The Importance of Website Speed
- Visitor retention: The longer it takes your page to load, the more likely a user is to bounce.
- Google search engine rankings: Google takes page load speed into account as one of the many ranking signals used to determine search engine rankings.
- Beat your competitors: If your website is consistently loading faster than the competition, users are more likely to stick with you than reach out to the slower sites.
- Better user experience: Avoid user frustration with a slow website, and give them an optimized user experience.
How to Optimize Website Performance
Here we have a list of things you can do to optimize the speed of your website. A lot of these techniques may require additional knowledge, like using the CSS sprites mentioned below. We don’t want to reinvent the wheel here, but tutorials can easily be found online with a little Google-fu (search Google for the keywords you are unfamiliar with or would like to know the best way to implement). Let’s get started.
- Hosting speed is essential. You can have the most well optimized code on the planet, but if you’re hosting with a second-rate provider that has significant lag time and a slow time to first byte (TTFB), your optimization efforts will be mostly futile. Run metrics based performance tests to determine the fastest web host and setup performance monitoring thereafter, to ensure your hosting company is up to speed.
- Limit the number of requests required by a page. Each time a request is sent from a browser to the server, precious milliseconds are used waiting for the server to respond. By consolidating elements into single files, such as 1 CSS sprite file in place of dozens of image files, you limit the number of requests the browser will make.
- Generate a CSS sprite file. Instead of downloading dozens of images for each page on your site, a CSS sprite file only needs to be downloaded once. This would eliminate the need to have many smaller images for things like menus, rounded borders and background images. The essence of a CSS sprite file is that you stack all images from your site into a single png file, and create references to each image location in your css. Now, when you need to display the image, you simply call the css class within a div and the image will be displayed.
- Use CSS whenever possible. Get rid of inline styles, images and other content that is shared across multiple pages on your website.
- Consolidate your style sheets so there is only 1 CSS request. Once the style sheet is downloaded, it eliminates future requests for all style related items.
One possible exception to the rule of one style sheet per site is if you are optimizing time to interaction- or the “above the fold” content. Content that appears at the top of your page that allows a user to begin interacting with the site should be prioritized when you are concerned that users will bounce if the page takes too long to load. In this case, you might load 1 CSS file to display above the fold content properly right away, and then load the second CSS file to optimize everything else on the page.
- Use Content Delivery Networks (CDNs). CDNs put the content of your website- particularly larger image, video and media files as close to the end user as possible. Rather than all users calling the elements from your web server, they now download these elements from a CDN server that is hosted just a few hops away in a data center near their geographic location.
Splitting elements between multiple domains (such as your base domain, and a CDN) will maximize the simultaneous parallel downloads in the browser as long as you do not use more than a couple of domains- at that point the cost of DNS lookup starts to count against you.
- Minimize the number of DNS lookups required by your site. Every element hosted by a unique domain may require an additional lookup which could add seconds to your load time. Even requests on related domains (such as www.example.com and css.example.com) still require an additional lookup. If this sounds counter-intuitive after we just recommended using CDNs, it is because there should be a happy medium. Simply try to limit the number of additional domains referenced. Extreme optimizers go as far as telling you to eliminate all of the social media buttons because they call out to each social media domain.
- Make sure your server allows browser caching based upon file age, expiry and Etag. This means that any content a browser has recently downloaded from the server such as a company logo will not be downloaded again as long as it is still valid. You must also make sure that each element has a proper ttl or file age to take advantage of browser caching.
- Utilize compression on your site. Using gzip can significantly decrease the total size of the files you are sending from the server to the browser. Compression often times provides more than a 70% decrease in bandwidth usage. All modern browsers
- Optimize file sizes by only sending the smallest image size required by the page. Edit the image to be the exact pixel size required on the page. When choosing a file format for images, use PNGs or jpegs rather than TIFFs and BMPs. Using an image compression tool such as https://tinypng.com/ is also a great way to get the most bang for your buck by shrinking the file size of images before putting them on your site.
Also avoid empty source tags on images. An empty <img src=””> tag causes the browser to send an additional request to the server.
- Minify the code. Once the page has been completed, run the code a minifier, https://developers.google.com/speed/docs/insights/MinifyResources which will remove all unnecessary code such as empty spaces, empty lines etc… saving KBs of file size.
- Optimize your database. If your site uses a database to host dynamic content such as a shopping cart or news articles, you want to make sure that the database is properly indexed. After the database is indexed, minimize the number of calls made to the database. For example, If your site grabs results from the database to display a list products, reuse the results of the query rather than sending an additional query when drilling into a subset of results.
- Monitor your site daily for broken requests. If your site contains code that points to an element that no longer exists, either on your server or from a third party, then you are needlessly wasting time sending and waiting for 404 errors.
- Regularly test your site for compatibility in different browsers including different mobile platforms. As mobile visitors are beginning to dominate the browser market, it doesn’t matter if your page loads lightning fast in a desktop browser if the page is unintelligible on a mobile device.
By following these steps you should be able to optimize your webpage load speed and increase the usability of your website. (Ensuring the quality of your content to retain site visitors’ attention is up to you.)
In addition to running a website speed test to get a clear picture of how your website performs from around the globe, the Google page speed insights tool is great for analyzing your web page and providing suggestions on how to perform many of the optimizations listed in this article. The Yslow plugin is also a great tool for finding additional ways to optimize a web page.