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.
In today’s instant-on world, speed is everything!
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 you can find tutorials 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 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. Performance monitoring can be set up afterwards to ensure your hosting company is up to speed.
- Limit the number of requests required by a page. Each time a user sends a request from a browser to the server, they lose precious milliseconds. By consolidating elements into single files, such as one 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 should only require a single download. 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 tag.
- Use CSS whenever possible. Get rid of inline styles, images, and other content shared across multiple pages on your website.
- Consolidate your style sheets so there is only one CSS request. Once you download the style sheet, 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 one 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 website content, particularly larger images, 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.
As long as you do not user more than a couple of domains, splitting elements between multiple domains (such as your base domain and a CDN) will maximize the simultaneous parallel downloads in the browser. 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’s because there should be a happy medium. Simply try to limit the number of additional domains referenced. Extreme optimizers go as far as eliminating all social media buttons because they call out to each 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. Also make sure that each element has a proper TTL, or file age, to take advantage of browser caching.
- Move JavaScript to the bottom of your page. This ensures content loads before waiting on larger JavaScript files to load.
- When you have the option, consolidate or eliminate as many JavaScript plugins as possible. While it is great to gather data on how your visitors use your website, you don’t want the script gathering that data to slow your site down and adversely affect the user experience. If you are going to add a new plugin to a website, make sure that you aren’t duplicating the functionality of an existing plugin, and if you are, remove the old plugin.
- Utilize compression on your site. Using gzip can significantly decrease the total size of files you are sending from the server to the browser. Compression often times provides more than a 70 percent decrease in bandwidth usage.
- 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. Use an image compression tool such as TinyPNG. It’s a great tool to shrink the file size of images before putting them on your site. Also avoid empty source tags on images. An empty tag causes the browser to send an additional request to the server.
- Minify the code. Once the page has been completed, run a code a minifier. Google’s version (https://developers.google.com/speed/docs/insights/MinifyResources), removes 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, 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.
- Bonus Tip! Regularly test your site for compatibility in different browsers including different mobile platforms. Mobile visitors are beginning to dominate the browser market. Focus on testing your site on mobile before desktop.
By following these steps, you should be able to optimize your web page 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.