Salman AslamTime is our most valuable asset.
This is the reason why we spend more on technology from higher spec smartphones to expensive internet connection to productivity apps and like all these things, the website speed matters too.
Nothing is more frustrating than clicking on a website URL and then checking your clock to see how long you’ve been waiting for it to load.
When your customers visit your website, you only have few seconds to capture their attention, with a slow loading website, all of your marketing budget goes to waste when you lose customers on their first visit.
Why is Speed Important?
A study by Akamai found that:
- Of total websites users in their study 47% of them expect a web page to load in two seconds or less.
- 40% will abandon a web page if it takes more than three seconds to load.
- 52% of online shoppers say quick page loads are important for their loyalty to a site.
Website speed isn’t a vanity metric, according to Google they consider website speed when determining search engine rankings.
According to KISSmetrics websites that take more than 4 seconds to load can lose up to 25% of their visitors, and if the delay is 10 seconds to load a page, 35-40% of visitors can be lost.
Slower websites just don’t affect your search engine rankings, they have a much broader impact on your business, such as:
1. Customer Experience and Satisfaction.
2. Email Signups.
3. Sales conversions on your product pages.
4. Page views from Internal traffic.
It wouldn’t be wrong to so that fast loading website is not only critical to rank well in Google, but also for your bottom-line, as it impacts your revenue directly.
Increase Conversions with Website Speed
There are a lot of companies that have invested in their website architecture to increase their website speed and seen positive returns.
- Walmart, who found a 2% increase in conversions for every 1 second of improvement.
- AutoAnything saw 15% jump in online revenue when the cut the load time by half.
- Shopzilla increased their website speed by 5 seconds and increased the conversion rate 7-12%.
- Mozilla decreased the page load time by 2.2 second to increase download conversions by 15.4%.
All of these studies just reiterate the fact that increasing website speed is extremely important for your business.
Benchmarking Tools
Benchmark is very important for us when we are trying to achieve something. There are a number of tools online which you can use to check the load time of your website and also suggestions with which you can increase your website speed.
- Google PageSpeed insights is my favorite and the best one out there when it comes to benchmark scoring and if you want to know what you want to fix. It scores your website for both Desktop and Mobile and highlight issues that you can fix to improve your score and website speed.
- GTmetrix also grades your Page Speed, YSlow grade and your page load time and also compare multiple urls to see where you stand.
- Pingdom is a premium service which shows how much time your website is taking to load.
These tools are there to tell you how well you’ve done and grade your website, these tools also gives suggestions but that is not the whole picture.
Below you’ll find surefire ways to Increase your website speed.
1. Use Premium Web Hosting
Your web host is the backbone of your website. It should provide a fast load time to a single visitors to a million of them if you get viral or manage to get that much traffic. The point is, if you are running on a shared hosting like Bluehost, make note that even they’ve Introduced advance packages like Managed WordPress Hosting and VPS.
We’ve had good experience with Bluehost, however we also recommend these hosting too.
- SiteGround – One of the premium Hosting provider after Bluehost, they have servers in 3 continents for each of their plan and Free CDN with 23 locations. Daily Backups and WordPress SuperCache are a plus point.
- WP Engine –It is made only for WordPress and is blazing fast, if you are not picky on price and run WordPress only, WP Engine is a great option.
- Media Temple – Offers best Grid, VPS and Dedicated Services.
- Rackspace – Powers some of the biggest websites in the world right now, if you are a large corporation looking for Cloud Hosting Rackspace has it for you.
If your web host doesn’t have a solid infrastructure, you are bound to experience slow load times and if traffic peaks your visitors might see that your website is down so make sure you make the right hosting choice from the beginning.
If you are a wordpress user, check out our guide on Best WordPress Hosting to use in 2015.
2. Use CDN (Content Delivery Network)
Content Delivery Network takes off the load from your service and supercharge your website performance. CDN replicates static elements of your website on a network of servers around the globe so that when a visitor comes to your website, it fetches or uploads the content from the closest server.
They dramatically decrease the website load time which means better user experience, lower hosting cost and higher search engine rankings. A Good web host and a good CDN is killer combo.
While CloudFlare is fairly good, we recommend MaxCDN as it is the best and most trusted CDN network in the market right now.
3. Optimize Images
Large images sizes are one of the main non-technical reasons why pages load slow, while basic in nature they can really add extra load on your server, that is why you need to optimize them to increase your website speed.
You can optimize these images without compromising the quality.
If you are using WordPress. plugins like EWWW Image Optimizer & WP Smush.it plugin helps reduce the existing file size by compressing them. If you are a non-wordpress user, check out Kraken as a great image optimization service.
Tips:
- Try to save in JPEG format as first choice followed by PNG and GIFs.
- Adobe Photoshop users can use CTRL+SHIFT+ALT+S shortcut to save an optimized image for Web.
- Crop your images to your page width size. Don’t upload 2500px HD Image for a 600px wide page.
- Clean up your code by checking <img src=””> tags. Where there isn’t any source image specified in quote marks, the brower still sends requests which takes extra time.
4. Enable Browser Cache
This is very important for returning visitors because every time a visitors comes to your site, their browser downloads all the files such as images, css, java files.
Once you turn on browser cache, the static files are stored on the visitors browser so The next time the visitor comes back to the page it will load faster, as the browser already has those files which are retrieved rather than downloading again.
If you use are using WordPress, W3 Total Cache plugin is one of the must-have plugins for performance optimization.
5. Install Google PageSpeed
You can ask your Web Host company to Install Google PageSpeed Module on the server.
Since it is owned by Google, we highly recommend this as it speeds up your website by managing the pages and associated assets (CSS, JavaScript, images) automatically. SiteGround is already offering this module since last year which you can enable with a single click.
6. Update CMS Regularly
If you are using WordPress or any other CMS which releases update make sure to check frequently as they include fixes and often helps increase the performance of the website by making them lighter and faster to load.
Note: Make sure to check on a test site to see if the latest updates are compatible with your hosting or if they perform better than the current version, if not wait for final release.
7. Update your Theme
If you have purchased your theme from a marketplace or any specialized theme provider, make sure to see what updates have been included in the latest release. A lot of time these include better code structure, compatibility with latest browser or CMS versions.
8. Remove Unnecessary Plugins
We love plugins as they add features which are not available by default in the themes. However the more plugins you have, the slower your website gets as they require loading css and javascript files. A lot of plugins secretly install tracking scripts to collect data which affects page load time.
If you haven’t reviewed your plugins repository make sure to perform an audit and also see if any of the features which you are using through external plugins could be coded with your theme. This will reduce extra load from your website.
9. Avoid Multiple Tracking Scripts
As discussed above a lot of third party plugins install tracking scripts but mostly we do it ourself.
While it is important to keep tabs on data and analytics make sure you don’t obsess too much with the fancy scripts. Usually a few of them are enough to do the job e.g Google Analytics in combination with services like CrazyEgg, Clicktale or Visual Website Optimizer.
10. Minimize RTTs (Round-trip Times)
As we head into the technical aspects of optimizing speed, the first one is to minimze the number RTTs. Round-trip time or RTT refers to the the requests that are sent to a persons browser when they visit your website.
Now the issue here is not with the size of the files but the amount and number of requests that are being send as each takes their time separately. The number of plugins you use also increase the number of HTTP requests that are sent to load css, javascript and image files individually.
Google has published a handy guide which you can send your developer for reducing the http requests by making it leaner.
Here are the following steps which helps reduce the http requrests.
- Streamline the number of elements on your page.
- Use CSS instead of images whenever possible.
- Combine multiple style sheets into one.
- Reduce scripts and put them at the bottom of the page.
11. Reduce Redirects for Responsive Design
Similar to plugins, redirects create additional HTTP requests and make your website slower so it is important to reduce the redirects.
HTTP redirection is common where clients are redirected to device-specific URLs which is the case for mobile website as they redirect to a different URL e.g www.omnicoreagency.com to m.omnicoreagency.com
It is recommended to make a cacheable redirect which will reduce the page load time by Using a 302 redirect with a cache lifetime of one day.
Tip: Google has taken note of this issue and recommended the few steps for reducing HTTP Redirects.
12. Enable Compression
If you want to make your website faster, you need to make your website lean, minimizing round-trip times and redirects is one way, but you can also reduce the time through compression of the size of HTTP response.
This is where Gzip comes in which can reduce the response size close to 70% and account for a massive chance in page load time.
There are plugins which do this for you e.g WP HTTP Compression plugin for WordPress or can use this tool called Gzip.
13. Minify HTML, CSS and Javascript
While white spaces are great for web design, they aren’t of much help when it comes to coding.
HTML comments, CDATA sections, extra whitespaces and empty elements, all take up extra size and makes the website speed slow.
If you want your files to download faster, you can remove this whitespace before serving your code. Plugins like WP-Minify & W3 Total Cache are great for minifying the files.
Here are Google’s recommendation for minifying HTML, CSS and Javascript files:
- To minify HTML, you can use PageSpeed Insights Chrome Extension to generate an optimized version of your HTML code. Run the analysis against your HTML page and browse to the ‘Minify HTML’ rule. Click on ‘See optimized content’ to get the optimized HTML code.
- To minify CSS, you can try YUI Compressor and cssmin.js.
- To minify JavaScript, try the Closure Compiler, JSMin or the YUI Compressor. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.
14. Put CSS Files at the Top
Minifying the files are not enough, the placement of files are equally important too.
As a best practice, all style sheets related to design and interface should be included in the <head> section as we don’t want to display an unstyled website to our visitors, even when it is loading.
By including interface related stylesheets in the beginning, the design will load quickly and even if the impact is of milliseconds, they user experience will not be affected.
15. Put JS Files at the Bottom
After the content is loaded we want our functionality related files to load so that the visitors sees everything without any delay.
The rule is simple as we want to achieve the following with the same sequential order:
- Get content to visitors as fast as possible.
- Don’t allow unstyled content to appear in the browser (put CSS in the
<head>).
- Load the files required for interaction (tabbed widgets, certain external API calls, etc.) last.
16. Use CSS Sprites
CSS Sprite is an image comprised of other images used by your design as something of a map containing the coordinates of all the images. These can includes all of your icons, logos and buttons combined into one big file and then through css positioning you can use the required logo or icon where you need.
This reduces the roundtrips between browser and web server and also improves the page speed. A front-end developer (CSS guy) can take care of it. Some tools to create CSS sprites: Compass,SpritePad, Spriteme.
17. Fix Broken Links
Each external link sends an http request and if there are lot of broken links on your website, you are just wasting resources.
Make sure to fix any broken links from your website using online broken link checker or use WordPress link checker for free
Conclusion
While some of these ways are technical, there are a lot of ways which are easy to implement. In case you want to go through more literature on Increasing Website Page Speed check out these guides by Google and Yahoo.
- Google Developers – Make the Web Faster
- Yahoo Developer Network – Best Practices for Speeding Up Your Web Site
If you found these tips helpful, make sure to apply it and let us know what results you’ve been able to achieve in the benchmarking scores.
This article was originally published on Omnicore: 17 Surefire Ways to Increasing Website Speed & Conversions
(396)
