GTmetrix.com runs two tests on the page load time of your website: PageSpeed Test and YSlow Test. It then gives you a grade on the overall page load performance of your website. It also offers recommendations on how to improve the page load speed of your website. The tests are good tools to determine where to improve, but the explanations on how to fix them, especially for someone who is not Internet savvy, could be confusing. This page gives you step by step instructions on how to understand these page load time tests, but more importantly, how to fix them.
What is the Average Page Load Time for 2015
Below is a sample of page load times from some of the top 500 most popular websites in the world. Based on this sample of 27 popular websites, the average page load time for December 2015 is 4.9 seconds. This list is a mixture of websites from a variety of industries, including: banking, blogging, ecommerce, government, medical, real estate, search engines, shipping, social media, technology, news, videos, and more. The fastest sites are Facebook.com, Google.com, and WordPress.com with an average page load time of 0.9 seconds. The slowest sites are Cnn.com, Photobucket.com, and Usps.com with an average page load time of 14.8 seconds.
Home Page – Page Load Time – PageSpeed Test Grade – YSlow Test Grade
Adobe.com – 8.3s – 89% – 66%
Alibaba.com – 6.5s – 91% – 76%
Amazon.com – 5.0s – 93% – 74%
Bankofamerica.com – 4.3s – 90% – 76%
Booking.com – 3.3s – 95% – 90%
Cnet.com – 2.8s – 88% – 84%
Cnn.com – 12.3s – 87% – 68%
Ebay.com – 4.3s – 87% – 84%
Espn.go.com – 6.3s – 92% – 72%
Facebook.com – 1.2s – 98% – 92%
Github.com – 2.0s – 73% – 94%
Godaddy.com – 2.1s – 96% – 94%
Goodreads.com – 4.2s – 86% – 80%
Google.com – 1.0s – 98% – 98%
Homedepot.com – 3.2s – 91% – 66%
Huffingtonpost.com – 6.5s – 92% – 58%
Meetup.com – 2.8s – 86% – 90%
Nih.gov – 2.4s – 96% – 78%
Photobucket.com – 9.5s – 47% – 59%
Scribd.com – 7.1s – 94% – 80%
Usps.com – 22.7s – 88% – 63%
Walmart.com – 1.4s – 54% – 91%
Webmd.com – 3.3s – 84% – 67%
Wordpress.com – 0.6s – 99% – 99%
Yahoo.com – 5.2s – 94% – 65%
Youtube.com – 2.3s – 82% – 85%
Zillow.com – 2.3s – 51% – 94%
As a comparison, UXODesign.com has a page load speed of 1.3 seconds, a PageSpeed test score of 99%, and a YSlow test score of 92%. That would rank the page load speed of the home page of this website better than Walmart.com and essentially equal to Facebook.com.
PageSpeed / YSlow Test: How to Improve Grade
Avoid a Character Set in the Meta Tag / Specify a Character Set Early
There are a number of different character sets or character encoding styles in HTML:
Do not use charset in the meta tag, such as:
<meta charset=”UTF-8″ />
Instead, use the http-equiv meta tag, such as:
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>
Also, make sure this meta tag is as close to the <head> tag as possible.
Avoid AlphaImageLoader Filter
The AlphaImageLoader filter is a CSS style code that modifies image displays within Internet Explorer (IE). Here is an example:
<div style=”filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’1.png’, sizingMethod=’scale’);”></div>
Website coding best practice is to not use the AlphaImageLoader filter code.
Avoid Bad Requests / Avoid HTTP 404 (Not Found) Error
Remove “broken links” or requests that result in a 404 (page not found) or 410 (resource intentionally removed) error.
Avoid CSS @import
CSS @import is code in the CSS file that looks like:
This slows down load time by sequentially loading files. It is better to load files concurrently. This can be done by removing the @import code from the CSS file and replacing it with a line of code in the HTML head code:
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<link rel=”stylesheet” type=”text/css” href=”style1.css”>
Avoid CSS Expressions
background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );
Avoid Empty src or href
A browser uses unnecessary resources to resolve empty images and links. Find and eliminate empty src and href commands as shown below.
<img src=””> change to <img src=”1.jpg”>
<a href=””></a> change to <a href=”1.html”></a>
Avoid Landing Page Redirects / Minimize Redirects / Avoid URL Redirects
A page redirect is when a user passes through a url to get to another url before it starts to load and resolve. The best practice is to not use any type of redirect.
Combine Images Using CSS Sprites
Below is a sample of a CSS sprite:
The purpose of a CSS sprite is to use one image with many smaller images instead of individual images. This reduces the number of server requests during page load. In the sample provided, this CSS sprite reduces server requests from 59 to 1.
Configure Entity Tags (ETags)
Entity tags (ETags) are often unique to a specific server hosting a website. These ETags will not match when a browser gets the original content from one server and later tries to validate that content on a different server. By default, both Apache and IIS server software embed data in the ETag that dramatically reduces the odds of the validity test succeeding on web sites with multiple servers. For an Apache sever, if you are having ETag issues, just add the following to the .htaccess file:
<link rel=”stylesheet” type=”text/css” href=”style.css”>
Typically, you want to place CSS in the <head> tag, and JS just above the </body> tag.
Enable gzip Compression / Compress Components with gzip
Gzip compresses your HTML, CSS, and JS content before sending them to the browser. This reduces file size and transfer time. If you need to set it up in an Apache web server, you just need to add the following code to your .htaccess file:
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
Enable Keep-Alive / Add Expires Headers / Leverage Browser Caching / Make AJAX Cacheable
Keep-Alive uses the same tcp connection for all HTTP requests instead of opening a new one each time. This allows the web browser to grab more than just one file at a time. This is known as a persistent connection. To enable Keep-Alive, just add the following to your .htaccess file:
<ifModule mod_headers.c>Header set Connection keep-alive</ifModule>
Expires Headers / Browser Caching tell the web browser whether to request a specific file from the server or whether to grab it from the web browser’s cache. Web cache reduces the load of downloads from the server. To add Expires Headers / Browser Caching, just add the following to the .htaccess file.
ExpiresDefault “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType text/css “access plus 1 month”
ExpiresDefault “access plus 1 month”
Make Favicon Small and Cacheable
The favicon is a small icon or image associated with a URL that is displayed in a web browser’s address bar. According to the World Wide Web Consortium (W3C), the favicon must be 16×16 pixels or 32×32 pixels in size, using either 8-bit or 24-bit colors. The file type must be either PNG, GIF, or ICO.
To minify CSS, HTML and JS refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by a web browser. There are three primary things you can do to reduce file size:
1) Remove extra white space.
Instead of content that looks like:
This is an example.
It should look like:
This is an example.
3) Reduce the Number of DOM Elements
Do not use unnecessary DOM elements or tags. Instead of using this code:
Use code like this:
Minimize Request Size / Make Fewer HTTP Requests / Reduce DNS Lookups
Every server request slows down page load speed. To reduce the number and size of server requests, limit the number of files requested and reduce the size of those files. Also, make sure caching is working properly.
Optimize Images / Do Not Scale Images in HTML / Serve Scaled Images / Specify Image Dimensions
There are several steps to providing optimized images. First, crop the image to the exact sized that you plan to use. Second, name the image file using keywords (i.e. if it is an image of a cat jumping, call it cat-jumping.jpg). Third, provide an alt tag for the image (i.e. alt=”Cat Jumping”). Fourth, provide the height and width dimensions of the image where possible (i.e. width=”300″ height=”300″).
Optimize the Order of Styles and Scripts / Put CSS in the Document Head / Put CSS at the Top
Remove Query Strings from Static Resources
A query string in a url may look like the following:
The ?ver=3.2 at the end of the url states the version of the file. It also treats that url as a different file than the same file without the query string. For static resources, such as images and css files, do not use query strings to call them.
Serve Resources from a Consistent URL
The same resources, such as images, css files, and js files are often used on multiple pages within a website. Make sure the url associated with these resources are the same on each page. Do not use http://www.mysite.com/style.css on one page then http://mysite.com/style.css?ver=3.2 on another.
Specify a Cache Validator
Cache-Control defines how, and for how long the individual response can be cached by the browser and other intermediate caches. Each resource should have an explicit caching policy. When the server returns a response it must provide the Cache-Control and ETag headers.
Add the following code to the .htaccess file:
Header set Last-Modified “Mon, 31 Aug 2009 00:00:00 GMT”
Specify a Vary: Accept-Encoding Header
Add this code to the .htaccess file:
Header append Vary: Accept-Encoding
Use a Content Delivery Network (CDN)
A Content Delivery Network (CDN) is a large distributed system of proxy servers used in data centers via the Internet. The purpose of a CDN is to serve content (such as images) to end-users with high availability and high performance.
Use Cookie-Free Domains / Reduce Cookie Size
An HTTP cookie (web cookie, Internet cookie, browser cookie), is a small piece of data sent from a website and stored in the user’s web browser while the user is browsing it. It is used to track the user’s movements through the website. This is a technology that should be used sparingly or not at all.
Use GET for AJAX Requests
GET is a method for transferring variables from one page to another by use of the URL. POST submits data to be processed to a specified resource. The GET method requires less computing power and offers more flexibility than the POST method. The advantage of the POST method is that it is more secure. Only use the POST method if data is to be sent to the server, otherwise use the GET method.