Improving Page Speed Using Web Performance Best Practices

Improving Page Speed With Web Performance Best PracticesIt seems like a no brainier, the faster the website the better. This is often an aspect of a site that is overlooked until it is a problem. Keeping your website optimized for speed can help give you an edge in your SERP ranking as well as provide a better user experience, decrease bounce rates and improve conversions. In this post we will go over how page speed affects your website’s audience and their behavior, as well as go over some tips to improve page speed.

In 2012 Google published a blog post “Global Site Speed Overview: How Fast Are Websites Around The World?” showing statistics on page load times for different devices, regions and markets. The global median average load time for a webpage was 2.5 seconds and 4.5 seconds for mobile users. For the United States the median average load time for a webpage was 4.5 seconds. They followed this blog post a year later with another asking Is the web getting faster? There has only been a slight increase in speed for desktop computers, while mobile devices have seen an increase catching up with the average load time of  2.5 seconds. These numbers may not seem very troubling but the average user abandons a website if it takes more than 3 – 4 seconds to load.

As more and more users view the web from mobile devices, it has become more imperative to address the increasing issue with slower networks and data limits.  If users run into a page on your website that takes a long time to load, it could result in an increase in bounce rate and lost conversions.  This can be seen by simply testing your website and going through the conversion process yourself while measuring page load times along the way. There are many tools out there to help you time page speed, with some tools offering the ability to test different use cases based on connection speed, regional location or even device.

Tools of the Trade

Most modern browsers come with developer tools which will allow you to track the network performance of the webpage you are viewing.  For example, in Chrome in order to access the developer tools right-click on any page element and select “Inspect Element” and then click the “Network” tab and reload the page. You will see it generate a graph of all the http requests and the time each element took to fully load and render on the page. This information can be very helpful for showing what items may be holding up page load times. You can also use sites such as Pingdom Website Speed Test or WebPagetest.org which will do the same task as the network tab, but will also give you the option to change the test location and connection speed. There are other services such as Google PageSpeed and Yahoo’s YSlow which will analyze and grade a page based on performance and offer tips to improve the load time.

It is also important to review any analytics data you may have for your website. Google Analytics offers Site Speed metrics which can give you average site load time and locate pages that may be taking longer to load than others, possibly requiring attention. You may also reference the Exit Pages Report and Standard Content Report to determine if a page with a slow load speed is affecting the bounce rate and exit rate of the page. If a page with a high page load time also has an unusually high bounce rate or exit rate, you can safely assume that the page load speed has an effect on that page’s performance.

Need for Speed

Web development and site administration is complex. You have to consider the trade-offs of the cost of making changes vs. the benefit the suggestion would have on your website and workflow. Not all suggestions are going to have the greatest effort vs. return ratio. Here are some general tips on how you can improve and keep your website’s pages up to speed.

  • Properly format and compress images to save download time.
  • Compress, combine and minify CSS files to reduce requests and download times.
  • Compress, combine and minify JS files to reduce requests and download times.
  • Make as few HTTP requests as possible.
  • Leverage browser caching to reload already downloaded resources from local disk
  • Compress resources with gzip or deflate to reduce files sizes for HTML, CSS, and JavaScript.
  • Minimize HTTP redirects whenever possible.
  • Reduce the number of unique hostnames to avoid DNS lookups and cut down response times.
  • Use a Content Delivery Network (CDN) to help users download resources quicker.

For more additional, in-depth tips please view Best Practices for Speeding Up Your Web Site by Yahoo Developers Network and Web Performance Best Practices from Google PageSpeed.

photo credit: Alex Dodd via photopin cc