The Ultimate Guide to Web Page Speed

The term "web page speed" refers to the time it takes for a browser to download web page content or media from the hosting server and display it for the end-user to view. When it comes to end-user experience and website performance, speed matters. 

According to Kissmetrics, 40% of consumers abandon websites that take more than 3 seconds to load and 47% say they expect a website to load in two seconds or less. 

Another thing to keep in mind is the fact that Google considers page speed as one of the factors that determines your website rank in the search engine results. Page speed also impacts your ad performance

So how do you improve your web page speed? Before getting into the technical details, let’s start with the basics.

Web Metrics

Web page speed can be tracked through several metrics. Those metrics will help you determine whether you need to optimize your website and point you in the right direction.

If you’re using Google Analytics to track your website statistics, you can monitor the performance of your site as well. Some of their metrics include:

  • Avg. Page Load Time: the average time it takes the page to load in seconds. This begins when someone clicks on a link to your site and ends when the page has finished loading in their browser.
  • Avg. Redirection Time: if you’re using redirects on your website, this metric will show the time needed for a redirect to start and end.
  • Avg. Domain Lookup Time: this metric monitors the time needed for the browser to find the IP address of your site.
  • Avg. Server Connection Time: the time needed to connect your domain’s IP address with your device’s IP address
  • Avg. Server Response Time: the average amount of time needed for your site’s server to respond to a visitor clicking through your pages and loading content.
  • Avg. Document Interactive Time: this metric measures the amount of time needed before a user can start interacting with your site.

Using a tool like the Pingdom Speed Test Tool or Google PageSpeed Insights in conjunction with these metrics will identify the bottlenecks that have the biggest impact on your site speed.

Web Page Compression

Web page compression or http compression is an effective way of speeding up your website and saving bandwidth at the same time. Most web servers can compress files before sending them to the browser. The browser then decompresses them and serves them to the user.

The most common way to compress the files is by using GZIP compression. GZIP is a compression utility that works best on text-based data like HTML, CSS, JavaScript, fonts, and XML. Since all modern browsers will request GZIP compression, your job is to ensure that GZIP compression is enabled.

If your host uses Apache servers, you’ll first need to double check that the module mod_deflate is installed.

After that, you need to edit the .htaccess file to include the following:


<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
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>

Alternatively, if you cannot edit the .htaccess file, you can use PHP to return compressed content.

If you’re hosted on the Windows hosting plan and use IIS, you can enable either "static" or "dynamic" compression by checking a box and editing a configuration file, depending on the IIS version.

JavaScript Compression

JavaScript compression is often referred to as JavaScript minification. The minification process simply refers to removing any unnecessary spaces, line breaks, and tabs in the JavaScript code. It also removes comments.

You can minify the files manually by opening them up in a text editor and deleting the unnecessary spaces, line breaks, and tabs. But if you’re not code-savvy, editing the files manually is not recommended 

Instead, you can use any one of several online tools to minify the JavaScript files for you. Here’s a list of a few of them:

Optionally, testing your page speed with Google PageSpeed Insights will provide you with the minified JavaScript files that you can download and then upload to your hosting server.

Aside from minifying the JavaScript files, you should put the .js files last in the document head so that a browser has a chance to load everything else first. Another way to speed up your website is to defer loading of JavaScript files until it is needed.

Optimizing CSS Files

CSS files handle the styling of a website. But, like JavaScript files, they have a tendency to become overly large due to unnecessary spaces and using declarations more than once.

There are a few best practices when it comes to CSS files.

  • Keep the markup clean with CSS selectors. CSS selectors make the coding easier to read but they also help you avoid using too many classes and keep the markup clean by using descendant selectors and pseudo-classes.
  • Reduce the number of CSS files by combining them into one file.
  • Minify the CSS either manually or using online tools such as CSSMinifier or CSSCompressor. These tools will remove any unnecessary spaces, line breaks, and tabs in your CSS files. 

Similar to JavaScript, running your site through the PageSpeed Insights tool will provide you with the link to minified CSS files so all you need to do is upload them to your hosting server.

Image Compression

Images are often the biggest culprits for slow loading times. Before compressing your images, first ensure they are saved in the proper format. In other words, use the JPG or JPEG format for photographic images like landscapes or portraits. If you need to display an icon, a logo, or any other image where transparency matters, save it as PNG.

Another thing to keep in mind is resizing the images to the size needed for your website using photo-editing software, rather than resizing them through HTML/CSS.

Once your image is properly resized and saved in the correct format, you can use a variety of image compression tools to reduce the filesize. 

  • TinyPNG/TinyJPG: an online tool that will reduce the file size of PNG and JPG images. The free version allows you to upload 20 images at once, provided the individual filesize doesn’t exceed 5MB.
  • JPEG & PNG Stripper: this Windows tool will remove unnecessary metadata from JPG/JPEG/JFIF & PNG files.
  • Imageoptim: a free Mac tool that reduces the file size of your images. It even works if you’ve already compressed the images using Photoshop or similar software.
  • RIOT: RIOT stands for Radical Image Optimization Tool. It’s a Windows image optimizer that can be downloaded as a standalone application or as an extension for IrfanView. The tool can compress JPG, PNG, and GIF files as well as strip out image metadata.

HTTP Cache

The performance of your website can be greatly improved by reusing the resources that have already been fetched from the server, also known as caching. Caching stores a copy of a given resource and serves it back when requested. The resource can be an HTML file, a CSS file, images, or a JavaScript file.

Caching is controlled by the use of the Cache-Control, Last-Modified, and Expires response headers.

The Cache-Control response header controls who caches the response, under what conditions and for how long. You can add it to your website by inserting the appropriate meta tags in the head of the document:


<meta http-equiv="Cache-control" content="public">

It can be set to one of the following values:

  • Absent: if the Cache-Control header is not set, then any cache may store the content.
  • Private: the content is intended for use by a single user and should only be cached locally in the browser.
  • Public: the content may be cached in public caches and private browser caches. 

The Last-Modified header supplies the information on when the content was last modified and if any changes have been made, the browser will serve the latest file.

The Expires header specifies when the cached content expires at which point the browser will load the web page as it did the first time and cache it again. 

The recommended HTTP specification for the Expires header is to set it no more than one year in the future. Alternatively, you can use a max-age value with the Cache-Control header:


Cache-Control: max-age=31536000
The Expires and Last-Modified headers are added in your .htaccess file:
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
Header set Last-Modified "Thu, 21 May 2012 20:00:00 GMT"
</IfModule>

HTML5 vs XHTML

Another area where you can improve on your page speed is to use HTML5 instead of (X)HTML. According to Jens Meiert:

“In comparison with valid HTML omitting optional tags, file size of XHTML documents is about 5 (large documents) to 10% (small documents) bigger, adding a realistic file size overhead of at least 400 bytes.”

The reason behind this is the fact that HTML5 specification did away with certain elements whose function was deemed to be better served by CSS. It also removed the presentational attributes which were present in HTML4, thus resulting in leaner code and faster loading times.

Mobile Site Speed Optimization

When optimizing your web page speed, you shouldn’t ignore loading times on mobile devices. One of the best ways to ensure your site loads fast on mobile devices is to take advantage of the Accelerated Mobile Pages Initiative (AMP). Accelerated Mobile Pages display only the bare minimum of styling, with the primary focus on content. 

The process of enabling AMP on your site requires creating a separate version of your main page by using AMP HTML, adding styles using CSS, and validating the AMP version of your pages.

Aside from using AMP, you can use conditional loading for any interactive content, make use of responsive design and images, and avoid using a separate domain for the mobile version of your site.

Optimizing CMSs

CMSs are a popular solution for many website owners, with the top three being WordPress, Drupal, and Joomla.

Aside from the general guidelines mentioned earlier, here are the basic tips for optimizing CMSs.

WordPress

Simple solutions to improve the speed of your WordPress website include:

  • Remove unused plugins: this will help remove any unnecessary scripts which slow down the site.
  • Use a caching plugin: there is no shortage of caching plugins available for WordPress. Some of the most popular ones include W3 Total Cache, WP Super Cache, and WP Rocket.
  • Optimize your database and reduce the number of post/page revisions: reducing or completely disabling the number of post revisions reduces the size of your database which in turn leads to a faster website. You can use a plugin like WP Optimize to remove old post revisions, remove deleted posts, spam and trashed comments, and more.

Joomla

Joomla has a native cache and GZIP compression which can be enabled by going to:

System > Global Configuration > System and System > Global configuration > Server > Server Settings respectively.

However, you can further optimize a Joomla website by using a dedicated caching extension such as JotCache or SpeedCache.

Drupal

Similarly to WordPress and Joomla, Drupal has a number of modules that can help improve your site speed. The most popular modules include different caching modules that apply cache and GZIP compression to HTML, JS, and CSS files.

Another useful module is the DB Maintenance Module that helps defragment your website and speeds up the accessing and processing of queries.

Improve Your Web Page Speed

Eventually, your website can become so large that the best method to decrease loading times will be to offload the resource heavy content such as images, script, and stylesheet files on a Content Delivery Network. Until then, use the tips in this guide to improve your web page speed.