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 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.
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.
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:
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.
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
Optimizing CSS Files
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.
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.
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.
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.
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 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.
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.