How to Optimize Page Load Time – A 12-Step Guide

optimizing-page-load-time How to Optimize Page Load Time – A 12-Step Guide

  1. Test the performance and speed of your web pages using tools like Google PageSpeed Insights, PageScoring Website Speed Test, Pingdom Website Speed Test, GTmetrix, and WebPageTest.
  2. Enable compression
  3. Optimize image sizes and formats
  4. Reduce redirects
  5. Minimize server calls and HTTP requests
  6. Combine and externalize styles and scripts
  7. Leverage browser caching
  8. Reduce the size of cookies if they are used on your website
  9. Improve server response time
  10. Use content distribution networks
  11. Consider AMP
  12. Consider using HTTP/2

Each of the above is explained in greater detail below

12-Step Guide to Page Load Time Optimization

Page speed is a measurement of how fast the content on your page loads (the time it takes to fully display the content on a specific page). It is an integral part of enriching user experience and influencing the site’s usability. Google considers page speed to be one of the 200 important ranking factors that influence a website’s position in organic search results. If the page does not load quickly, the chances are high that you will lose visitors to your competition in a matter of seconds.

Below is a twelve-step guide for optimizing the page load time of your webpages:

Use the right tools to analyze web page performance

There are a number of free and paid tools that can help you analyze the performance and speed of your pages. Below are a few of the most popular among them:

  1. Google PageSpeed Insights: With Google having a majority of the search market share, ranking in Google organic search is extremely important for most businesses. Google provides guidelines and a number of tools to help webmasters maximize the SEO compliance of their websites.

Google PageSpeed Insights is one such tool that evaluates the performance of your web pages on both desktop and mobile devices and grades the performance on a scale of 1 to 100. A score of 85 or higher is considered healthy — the higher the number, the better.

  1. PageScoring Website Speed Test: The Website Speed Test loads from PageScoring analyzes the performance of the entire domain entered. It shows a comprehensive analysis of how long the contents took to load. While Google PageSpeed Insights analyzes the performance of individual pages, this tool is effective for measuring the performance of an entire site in real time.
  2. Pingdom Website Speed Test: Website Speed Test from Pingdom is a free tool that analyzes the speed and performance of an entire site as well as the specific page tested. It provides visual depictions of the time taken for each site element to load. Pingdom can simulate the performance of your website in different locations around the world, reporting on down time from routing or accessibility issues.
  3. GTmetrix: GTmetrix compares the recommendations provided by Google PageSpeed Insights as well as YSlow and shows the complete history of a site’s page load times. Among the tools offered by GTmetrix is a video playback feature that helps pinpoint bottlenecks. You can also export the entire performance history to a CSV file.
  4. WebPageTest: Particularly useful for websites that target a global audience, WebPageTest lets you specify browsers and locations from around the world to test the performance of your website.

Enable Gzip Compression

Almost all browsers support compression and un-compress files while loading them. Gzip compression is the industry standard for compressing elements on the web to improve response time by up to 90%. This reduces the time required to download files, reduces the amount of data used at the client end and also speeds up the time needed to render your pages. HTML5 contains sample configuration files for the most common servers. You can also refer to the documentation for your web server to enable compression:

Optimize image sizes and formats

Images of varying sizes and formats can take up a lot of bandwidth, affecting the loading time of your page. It is not enough to downsize the website’s images in HTML because that only changes its appearance and not the actual size. Ensure images are no larger than they need to be and are in the right file format. It is ideal to stick to standard image formats such as JPG, PNG and GIF. External picture editor tools such as Photoshop can be used to resize the images.

Other image optimization tools which further compress the image to reduce its size are:

  • JPEG and PNG Stripper
  • Online Image Optimizer
  • SuperGIF
  • Gzip is another software used to reduce the size of CSS, HTML and JavaScript files that are larger than 150 bytes. This saves bandwidth, download time and reduces your page loading speed. The server should be configured to allow zipped content to return.

Reduce redirects and Optimize Dependencies

Reducing page redirects can prevent additional waiting for the HTTP request-response cycle to complete. Dependencies can be optimized in several ways.

  1. Plugins: A site that requires plugins may slow down the page loading speed but social share plugins are necessary. It is better to check for alternatives such as a CMS with built-in social plugins.
  2. Tracking Scripts: Typically, it is wise to track the website traffic, but it is not advisable to use multiple tracking software as this can hinder the page load time.
  3. CMS Software Updates: Upgrades of CMS software such as WordPress should frequently be checked and it is recommended to carry out upgrades on a separate server to test them rather than loading them on a live website.

Minimize server calls and HTTP requests

CSS sprites combine your images into one large image that loads simultaneously implying fewer HTTP requests. It displays only the sections that you want to show, thus saving load time by preventing users from waiting for multiple images to load. CSS Sprites can be used to reduce the number of image requests. This can be done by combining background images into a single image, combining inline images into your cached stylesheets and similarly, combining Javascript and CSS files into a single file.

Combine and externalize styles and scripts

It is a good practice to combine styles and scripts used on your web pages and to place them in external files using YUI Compressor. Also, make sure only the styles and scripts required by a particular page are called. A common mistake is to have all styles and scripts together. This calls all the styles and scripts – even those not used by a particular page. Having the JS and CSS files stored externally allows for better site maintenance. Combining styles and scripts reduce the amount of code on the pages and organize these resources better, allowing easier maintenance and changes.

Minify the Javascript code

‘Minification’ is the process of compressing javascript code. Page speed can be increased considerably by removing spaces, commas, code comments, formatting, unused code and other unnecessary characters. Minification improves the performance of pages in two ways:

  • Reduced file-size (because it removes comments and unnecessary whitespaces), so your script loads faster. Even if it is embedded into the <head>.
  • It is parsed faster since comments and white-spaces don’t have to explicitly ignore (since they’re not there).

Leverage browser caching

Each time a visitor loads a site, the web page image files, CSS and Java files load as well, taking up a lot of page load time. If caching is set up correctly, the browser can store these resources or files for subsequent requests. On repeated page loads these files can be retrieved from the cache rather than them being downloaded again from the network. This also reduces bandwidth and hosting costs. An expiration date can be set for the cache. In many cases, unless the site design changes frequently, a year is a reasonable time period.

Reduce the size of cookies if they are used on your website

Cookies are used to store data that needs to persist between requests. This data is sent on every request and adds to the load time when it’s big. Hence, by reducing the size of the cookies, you reduce the size of the data that is transferred and decrease the page load time. You should also eliminate unnecessary cookies.

Improve server response time

The optimal server response time is under 200ms and this time is affected by the amount of traffic received, the resources each page uses, the software the server uses and the hosting solution. To improve the server response time, check for performance bottlenecks such as slow database queries, slow routing or a lack of adequate memory and fix the issues.

Use content distribution networks

Content distribution networks (CDNs) also called content delivery networks, are a network of servers used to distribute the load of delivering content. This essentially means copies of your site are stored at multiple, geographically diverse data centers allowing users to have faster and more reliable access.

Consider AMP

Accelerated Mobile Pages (AMP) is a Google initiative that’s aimed at building static content web pages that load faster.  Since its introduction in 2015, Google has been promoting the AMP project and is now even highlighting an AMPd web page in search results. AMP consists of three main parts:

  • AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML.
  • The AMP JS library ensures the fast rendering of AMP HTML pages.
  • The Google AMP Cache can be used to serve cached AMP HTML pages.

Read more about the Google AMP project.

Consider using HTTP/2

HTTP/2 is the latest update to the HTTP protocol, introduced in 2015. HTTP/2 has distinct advancements in efficiency, website security, and speed. If you are considering HTTPS as an option for your website, you should also consider using HTTP/2 to compensate for the performance loss that moving to secure browsing can cause.

As described in this article on Search Engine Land, Following are the major changes that make HTTP/2 a good option to consider:

  • Single Connection to the server is used to load a website. The connection stays open as long as the website is open reducing the number of trips needed to set up multiple TCP connections.
  • Multiplexing. Multiple requests are allowed at the same time, on the same connection.
  • Server Push. Additional resources can be sent to a client for future use.
  • Prioritization. Requests are assigned dependency levels that the server can use to deliver higher priority resources faster.
  • Binary. Makes HTTP/2 easier for a server to parse, more compact and less error-prone. No additional time is wasted translating information from text to binary, which is the computer’s native language.
  • Header Compression. HTTP/2 uses HPACK compressions, which reduces overhead. Many headers were sent with the same values in every request in HTTP/1.1.

With an ever growing number of websites vying for the attention of the same target audience, the competition to earn site traffic and keep people impressed and engaged is becoming crucial every day. Pages with a longer load time tend to have higher bounce rates, thereby affecting conversions negatively. Page speed also plays an important role in overall user experience and following the above steps to optimize page load time can be very useful for your website.

fb50c5bf790872a8ecad33a6bd15d358?s=100&d=mm&r=g How to Optimize Page Load Time – A 12-Step Guide

CEO, Flying Cow Design
Attended University of Auckland
Lives in San Francisco Bay Area

October 18th, 2016

Need help with Web Design?

Write to us with your project details and we will get back to you shortly.

Related Articles
Self-hosted WordPress sites are versatile platforms for building a business. The secret to WordPress' flexibility
If you are a business owner looking to grow your business online, here are three
A payment gateway facilitates online credit card payment processing on your website. The software and
An iframe or inline frame is essentially a browser window set within the web page.
Content marketing creates organic traffic, but it requires sound strategy. Separating the two is like
When we look back over the last 10 years, it is amazing how corporate websites
When one mentions browsers, most instinctively think of Internet Explorer, Mozilla Firefox and Google Chrome.
Not often are CSS and typography used in the same sentence and in many ways,
It's rare to find a website to be completely free of errors. This is usually
What are web fonts? When designing for offline media like brochures, billboards, press advertisements, etc.,