Page Speed Components
- Page Speed / Site Performance
- Leverage Browser Caching
- Enable Compression
- Optimize Images
- Inline Small CSS
- Serve Scaled Images
- Minify HTML
- Minify CSS
- Specify Image Dimensions
- Specify a Character Set
- Remove Query Strings from Static Resources
- Avoid CSS @Import
- Avoid Bad Requests
- Combine Images into CSS Sprites
- Minimize Redirects
- Optimize the Order of Styles and Scripts
- Prefer Asynchronous Resources
- Put CSS in the Document Head
- Serve Resources from a Consistent URL
- Waterfall Chart Analysis
- Set expiry headers correctly & Remove ETags
- Reduce HTTP requests by combining common CSS/JS
Webpage speed and load times are direct ranking factors due to their impact on the user experience. Slow webpages can increase user frustration and can lead to lost leads, business, increased bounce rates, and in some cases data loss due to performance issues.
As such it is crucial to have a fast website, faster websites will also typically be quicker on mobile and tablet devices improving the user experience across the board. We have set out below a number of different checks that can be done in order to improve site / page speed
Browser caching means that when a website user has visited pages and their browser has loaded content present on every page such as the logo or header, the browser remembers this and does not reload it on each new page.
Because the browser does not need to load every image and resource every time, queries to the server are reduced and the content is loaded from a local source significantly improving site speed.
- Ensure that browser caching has been enabled on the server.
Compression as the name suggests, compresses data being sent from the server to the browser, reducing the bandwidth required to download it. This time saving translates into improved performance in terms of page load times. It is worth noting that GZIP compression does not affect images, other recommendations are below to address image compression.
- Ensure that server compression (DEFLATE / GZIP) has been enabled on the server.
Using a .htaccess file to enable compressions, you must add the following code to the htaccess file and upload it replacing the existing file (typically in the root of the domain).
# compress the files
# removes some bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0 no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
If your site is hosted on a Windows server you can enable compression for both static and dynamic files. It’s fairly easy to set this up in IIS manager:
1. Open up IIS Manager
2. Click on the site that you want to enable Gzip compression on
3. Locate and click on Compression (found under IIS)
4. Lastly, simply enable static compression
Use lossless image compression, which is essentially a way of reducing image size without compromising too much on image quality.
- Check to see if the images on the website have been correctly optimised using lossless compression.
See our article on image optimisation for information on this topic.
Using CSS code in the HTML page (within the head section of the source code) can reduce load times under certain circumstances. Essentially a browser will not have to load two files (CSS + HTML), but if this code is used to control the look and feel of the site on every page, having a CSS file will save time. This is because the CSS file will be cached and hence after the initial load there is no need to reload the file.
The most common application of inline CSS is for the home page or landing pages that need to load very quickly.
- Check to see if there are any opportunities to inline small instances of CSS code.
Serving scaled images means that images are served in the dimensions that they will be displayed in rather than the dimensions that the file exists in on the server. For example if an image of the dimensions 320x320px exists but when it is loaded it is presented in the dimensions 25x25px; there is a cost saving in terms of performance if the image is loaded in the smaller dimensions.
Ideally images should exist on the server in the size that they are to be displayed in.
- Check to see if there are any images that could possibly be resized to reduce their file size.
Minifying HTML is the process of making the code more efficient, by removing white space, unnecessary characters etc.but without changing functionality. Often HTML code can be reduced if it is written more efficiently, e.g. if a font and text size is defined on every page, removing this and controlling it through CSS would reduce the amount of code that exists on each page and hence has to be loaded on every page.
- Check to see if the HTML code size could be reduced by minifying the code.
- Check to see if there are any CSS files that could be reduced by minifying the code.
If a webpage does not specify image dimensions it may take several attempts by a browser to build the page as images are loaded throughout the page. Because images will push text down or laterally across the page, the overall ‘build’ process will be repeated until all images are loaded. If the dimensions are specified initially, the browser will be able to build the layout in one attempt, reducing load times.
- Check to see if there are any image that are missing their size dimensions.
Specifying the character set will assist in avoiding loading errors in how the page is displayed. If the character set is not specified the browser will assume that it is a default character set and this could lead to display issues, also impacting load times.
- Ensure that a character set is being identifying in the HTTP response headers.
Resources with a query string such including characters such as “?” or “&” in the URL are not cached by many proxy caching servers. Moving the query string and encoding the parameters into the URL will increase your WordPress site performance grade significantly. Removing these parameters will have a similar effect, reducing load times.
Check to see if there are any resources that contain parameters query strings, which could possibly be removed without impacting the page.
The @import technique of retrieving CSS files causes files to be loaded sequentially rather than in parallel impacting load times. When files are loaded in parallel, no time is spent wasted waiting for one file to download before downloading the next.
Replace the code below:
With this code:
<link rel="style.css" href="style.css" type="text/css">
- Check to see if there are any instances of "CSS @import" commands being used.
Loading pages that resolve to an error such as 404’s wastes time, impacting the user experience and should be avoided.
- Check to see if there are any files that are resolving 404/410 errors.
Combing images into CSS sprites reduces the amount of lookups / round trips required when loading images.
For example, if there were several images on a page such as header, menu images, logo and bullet point images, they would all have to be downloaded and loaded separately, but combining these files into one means that only a single download has to be performed. This reduces load times significantly.
This technique involves two main components; combining images and positioning them such that only the right image displays in each instance that it is used.
- Check to see if there are any images that could be combined into a single file to improve page load times.
Redirects of any kind impact, to a small extent, website performance. Once hundreds or thousands of these are used on a site, the collective effect of them can impact site load times. Reduce the amount of redirects used on a site where possible.
- Check to see if there are any calls to resources that are resulting in unnecessary redirects.
Typically when a browser is loading scripts it will not load any other component, what this means is that there are inefficiencies when loading scripts first. By ensuring that styles come higher on a page than scripts, the whole page should load faster. Google have performed tests on this and have concluded that this is the best order for loading styles and scripts.
- Check to see if there are any calls to external JS or CSS files that could be re-ordered to improve page loading.
Loading resources asynchronously means that multiple components will be loaded at the same time. Typically scripts that are loaded using the opening and closing script brackets <script> will not load asynchronously. Instead use the example code below to load scripts asynchronously:
<script async="async" src="xxxxx”></script>
Ensure that there are no CSS calls being made within the <body> section of the HTML code.
Check to see if there are any assets that are being retrieved from 2 different URLs. All resources should be accessible from just one URL to avoid duplication issues and load times.
Reviewing the waterfall chart under the Firebug > Net report, ensures that there are no file calls that are blocking the load of the website.
Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
To take advantage of the full benefits of caching consistently across all browsers, we recommend that you configure your web server to explicitly set caching headers and apply them to all cacheable static resources, not just a small subset (such as images). Cacheable resources include JS and CSS files, image files, and other binary object files (media files, PDFs, Flash files, etc.).
In general, HTML is not static, and shouldn't be considered cacheable.
- Expires and Cache-Control: max-age. These specify the “freshness lifetime” of a resource, that is, the time period during which the browser can use the cached resource without checking to see if a new version is available from the web server. They are "strong caching headers" that apply unconditionally; that is, once they're set and the resource is downloaded, the browser will not issue any GET requests for the resource until the expiry date or maximum age is reached.
- Last-Modified and ETag. These specify some characteristics about the resource that the browser checks to determine if the files are the same. In the Last-Modified header, this is always a date. In the ETag header, this can be any value that uniquely identifies a resource (file versions or content hashes are typical). Last-Modified is a "weak" caching header in that the browser applies a heuristic to determine whether to fetch the item from cache or not. (The heuristics are different among different browsers.) However, these headers allow the browser to efficiently update its cached resources by issuing conditional GET requests when the user explicitly reloads the page. Conditional GETs don't return the full response unless the resource has changed at the server, and thus have lower latency than full GETs.
It is important to specify one of Expires or Cache-Control max-age, and one of Last-Modified or ETag, for all cacheable resources.
It is redundant to specify both Expires and Cache-Control: max-age, or to specify both Last-Modified and ETag.
80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components, in turn, reduces the number of HTTP requests required to render the page. Consequently, this is the key to faster pages.
Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.