PageSpeed Test, YSlow Grade, GTMetrix, Improve Page Load Time

Page Load Speed

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:

ANSI
ASCII
ISO-8859-1
Unicode
UTF-8

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:

@import url(“style1.css”);

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:

<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<link rel=”stylesheet” type=”text/css” href=”style1.css”>
</head>

Avoid CSS Expressions

A CSS expression is when JavaScript is run within CSS as shown below.

background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );

It is better to keep CSS and Javascript coding separate.

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:

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:

FileETag none

Defer Parsing of JavaScript / Put JavaScript at Bottom / Make JavaScript and CSS External / Prefer Asynchronous Resources

JavaScript generally does not to be loaded until much later in the page load cycle. Place JavaScript near the bottom of the page, and add asynch to any external JS files being loaded.

<script type=”text/javascript” src=”scripts.js” asynch></script>

The example above show code for external JavaScript. External CSS code looks like:

<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:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
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/x-javascript
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/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>

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.

<IfModule mod_expires.c>
ExpiresActive On
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”
ExpiresByType application/javascript “access plus 1 year”
</IfModule>

Asynchronous JavaScript and XML (AJAX) is a set of methods and strategies for dynamic client-side web browser applications. To Make AJAX Cacheable, simply make sure the following code is in the .htaccess file:

ExpiresDefault “access plus 1 month”

Inline Small CSS, JavaScript

If the content in an external CSS or JavaScript file is small or minimal, it is better to either combine that data with another external file or to add it to the HTML file itself. This reduces server requests.

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.

Minify CSS, HTML, JavaScript / Remove Duplicate JavaScript and CSS / Reduce the Number of DOM Elements

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.

2) Remove Duplicate JavaScript and CSS

Duplicate CSS and JavaScript content are not needed. Just remove or delete it. Also delete unused CSS and JS content.

3) Reduce the Number of DOM Elements

Do not use unnecessary DOM elements or tags. Instead of using this code:

<p><div><span>Text</span></div></p>

Use code like this:

<p>Text</p>

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

All CSS code needs to be within the <<head>> tag of the document. Some javascript can be at the top, but most of it should be near the bottom near the </body> tag. Stylesheets generally contain visual components, whereas javascript contains functional components. That is the primary reason that these scripts and sheets are placed in a certain order. Some sequencing or ordering of styles and scripts may be necessary if one is used to call other resources during load time. Use of the “Waterfall” feature within GTMetrix can be helpful to determine if resource order has been optimized.

Remove Query Strings from Static Resources

A query string in a url may look like the following:

http://uxodesign.com/wp-content/themes/skt-it-consultant/css/nivo-slider.css?ver=3.2

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:

<IfModule mod_headers.c>
<FilesMatch “\.(bmp|css|flv|gif|ico|jpg|jpeg|js|pdf|png|svg|swf|tif|tiff)$”>
Header set Last-Modified “Mon, 31 Aug 2009 00:00:00 GMT”
</FilesMatch>
</IfModule>

Specify a Vary: Accept-Encoding Header

Add this code to the .htaccess file:

<IfModule mod_headers.c>
<FilesMatch “\.(js|css|xml|gz)$”>
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>

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.