- 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.
- Enable compression
- Optimize image sizes and formats
- Reduce redirects
- Minimize server calls and HTTP requests
- Combine and externalize styles and scripts
- Leverage browser caching
- Reduce the size of cookies if they are used on your website
- Improve server response time
- Use content distribution networks
- Consider AMP
- 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:
- 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.
- 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.
- 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.
- 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.
- 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
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.
- 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.
- 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.
- 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
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.
- 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.
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.