More than a decade ago, Google let it be known that site speed officially became a search ranking factor. Although the post did not clarify the impact of speed on the rankings, webmasters reading the announcement understood that website speed optimization should be at the top of their development plans. Nowadays, this is more valid than ever, and arguably even more so than back then.
If you’re in the process of building your first website, it’s crucial to keep in mind that page load times are vital in keeping visitors on your website. HubSpot reports that a drop in conversion is related to increasing page load times – a one-second delay in load time could lead to a ~20-30% reduction in conversion [1]!
Over the past several years, there has been a steady increase in average page sizes. This is partly – though not solely – due to the explosion in popularity of video, with more websites embedding videos into their content. Of course images and static files have also played a role.
Even with these elements and the ever-increasing page load that accompanies them, there are still actions you can take to improve how your site handles things. This article that you’re reading right now is going to teach you what those actions are, so that you can improve your website speed optimization.
Table of contents 📚
- Two things you’ll need before you start
- Get started with website speed optimization
- How to increase website speed in five steps
Website speed optimization: What you need before we get started
We assume that you have two key aspects of building your website already taken care of. These two things are that:
You’re using…
- An optimized theme that doesn’t introduce much bloat on top of WordPress itself.
- A sufficiently fast hosting provider.
If you can say “yes, I am” to both of those, then you may skip to the next section to start learning about how to speed up your website.
However, if you answered “no, I can’t”, then you don’t need to abandon this tutorial or your goal of making your website faster. Here’s what to do instead:
- First, bookmark this page so you can come back to it easily in case you accidentally close this tab or for whatever other reason.
- Second, check out this list of the fastest WordPress themes that are based on real test results that we conducted ourselves.
- Third, and final, go to this list of the fastest WordPress hosting providers and see if your current hosting company made the cut. This list was also compiled by us and is based on performance tests that are updated every month.
Once your website is locked and loaded with a solid foundation for takeoff, feel free to move forward with ignition below.
Getting started with website speed optimization
Anatomy of a web page
The trick to optimize your web pages for speed is to understand what goes into a web page. Let us go through the most popular components:
- The HTML code that gives structure and content to a web page – even with WordPress running the party on your site, all it does is take what’s in the database – all the content – and convert it to static HTML output
- Static files that help in design, functionality and interactivity (CSS, JavaScript)
- Images for backgrounds, logos, and content
In order to render a page, the browser requests for each element of a web page – the page itself in the form of HTML, static files, images, external content. Therefore, the number of HTTP requests also plays a crucial role in the website speed optimization.
Finding out where you stand: website speed optimization tools
Before we move on to specific techniques that help you in optimizing your web site, let us take a moment to review tools that help in analyzing the speed of web pages.
If you are a beginner looking for a casual testing tool, you can consider using the Pingdom Tools suite for a quick appraisal of your web site. For a more complete solution, you can head over to Google’s Page Speed Insights.
In addition to those, if you are looking for a quick option in the form of a browser plugin, you can try YSlow, which tests websites and provides suggestions from within the browser. Further, the GTmetrix tool utilizes YSlow’s test results for reports.
💡 If you want more options to test your site speed, this post lists 5 of the best speed checking tools out there.
Before going through the techniques listed in this post, make sure you run your website on one of the tools listed here to serve as a benchmark. As soon as you make any website speed optimization, make sure to go back to the tool to check for any speed improvements.
How to increase website speed in five steps
- Step 1: Optimize static files
- Step 2: Optimize images
- Step 3: Optimize HTTP requests
- Step 4: Caching
- Step 5: Optimize for mobile
Step 1: Optimize static files
The first step of this guide focuses on the optimization of static files – most popularly in the form of stylesheets (CSS files) and scripts (JS files).
(a) Move CSS to head, JS to bottom
The first optimization to perform is to make sure the stylesheets go in the <head>
section of your page structure, whereas all the scripts are moved to just above the closing </body>
tag of your page. The logic behind this is simple:
- Generally, stylesheets are smaller in size than scripts
- Once stylesheets are loaded in the
<head>
tag before the browser renders the body of the page, any elements that are rendered in the page will have proper styling - The functionality of the scripts generally comes into play once the content of the page is loaded, so, scripts can generally be placed at the bottom
This practice ensures that visitors to your website do not leave a page in frustration while waiting for it to load.
To handle the scripts part quickly, you can install the Scripts to Footer plugin for WordPress. It works on autopilot and does the job well.
(b) Set up minification
Minification is the process of removing those parts of a file that are not necessary for its execution. For instance, in your stylesheets or scripts, the following are not necessary for execution:
- whitespaces for indentation
- comments
- long function and variable names
- unused code
Minification helps in greatly by reducing the size of your static files. You can minify your JavaScript or CSS files by using a service like Minify, or installing one of these minification plugins in WordPress.
(c) Use asynchronous loading
A web browser renders and requests for resources sequentially as they appear on a web page. This is termed as synchronous loading. However, you could change this default functionality of the browser by using the async
attribute to load resources as soon as they are available. For instance, you can load a script asynchronously as follows:
<script src="script.js" async></script>
Here is a list of plugins that help you with asynchronous loading in WordPress.
(d) Use GZIP compression
GZip compression is a technique to compress resources through HTTP requests. With GZip compression, the server sends zipped files of resources, which the browser unzips while rendering a web page.
The time and resources required to compress and decompress a resource is outweighed by the time and bandwidth saved in transferring a smaller file from the server to the client. This technique not only loads pages quicker, but also saves on server costs.
GZip compression is a part of a few WordPress caching plugins like WP Fastest Cache.
(e) Use Google CDN for popular libraries
The final optimization technique in this step is to use either Google or Microsoft CDN when fetching any common libraries that are used on your site. The reason behind is simple – due to the popularity of these CDNs, it is probable that a visitor has already a cached version of the resource in their browser.
You may also be interested in:
- 9 Best On-Page SEO Tools: Free and Paid Options Available
- 55+ of the Best SEO Tools to Dominate Search Engine Rankings in 2020
- 120+ Spectacular SEO Stats: Your Ultimate List of Search Engine Optimization Statistics
Step 2: Optimize images
As discussed above, the primary source of increasing sizes of the web pages over the years is images.
Even take a look at CodeinWP’s own numbers:
Therefore, tackling images should lead to the most significant improvements in your website speeds, and it does.
Images are essential for a web site, however, the use of full-quality images for the web isn’t really recommended. You should compress images to a degree that reduces the size drastically, while giving a fair visual quality.
You can do a couple of things to make that happen and have website speed optimization in mind:
(a) Upload images of the right size
Your current theme likely has the maximum size of image that it’s able to display – dimension-wise. Find out what that is and then upload only images that are maximum twice as large as that.
Why twice? This will also allow the theme to display retina-quality versions of the images.
(b) Use the correct type of image
The two most commonly used types of images on the web are JPGs, PNGs, and increasingly, WebP.
They are not alike.
- JPG images are ideal for photos and other complex images that contain a lot of color information. They are widely used because of their ability to compress detailed images with minimal perceptible loss of quality.
- PNG images are perfect for graphics with less color information, such as interface screenshots. They offer lossless compression, meaning the quality of the image remains high, making them ideal for images with text or sharp edges.
- WebP, a newer format developed by Google, combines the strengths of both JPG and PNG. It provides high-quality images at significantly smaller file sizes, supporting both lossy and lossless compression. This makes WebP versatile, suitable for a wide range of web imagery, from detailed photos to simple graphics.
(c) Optimize images locally before uploading
There are various tools you can use prior to uploading any images to your site.
- For a web solution, try TinyPNG
- For desktop, try ImageOptim
(d) Lazy load your images
Another technique to optimize images is lazy loading, a practice where an image is not downloaded until a visitor scrolls down to see it.
Here’s a complete guide to lazy loading images on your site.
(e) Get an image optimization plugin
Last but not least, you should get a quality image optimization plugin for your WordPress site. Depending on which one you’ll end up using, you might get the bulk of your image optimization needs done on autopilot.
Here are 6 of the best image optimization plugins compared.
If you need a quick recommendation, check out our own Optimole. It provides highly efficient image compression, in addition to a CDN in the free plan! Optimole also delivers some stellar results when put against its main competitors:
Step 3: Optimize HTTP requests
Earlier in the post, we discussed that when a user browser starts loading a web page, the actual transfers are done via individual HTTP requests. A single request fetches each resource. Hence, an increase in the number of such requests increases the load times of your web page.
(a) Combine files
The first task to minimize the load of HTTP requests is to combine similar resources. When you are minifying resources, you can combine similar files together. For instance, all stylesheets (CSS files), and all custom JavaScript files can be combined into single files. This reduces the number of requests that a client has to make to load all resources.
Again, these minification plugins for WordPress can help you do that.
(b) Minimize DNS lookups
When an HTTP request is made to a domain like wpshout.com
, a DNS (domain name system) lookup is performed to find the IP address of the server. Consequently, your target should also be to minimize the number of DNS lookups across all the requests, in order to speed up website loading.
Here’s a cool guide on how to do that.
(c) Enable keep-alive
Without any optimization, the browser sends a single HTTP request for every resource. This connection closes once the download is complete. The browser then makes a new request to the server for a new resource. Keep alive is a technique that does not terminate a request when a resource download is complete.
You can enable keep alive through the following ways:
- In the HTTP headers, by setting
Connection
toKeep-Alive
- Through the
.htaccess
orhttpd.conf
files if you are using the Apache web server - NGINX, by default, enables keep alive
(d) Minimize redirects
A redirect is an instruction to automatically take a client from one location to another location of a resource. Each redirect increases load times of your web page and unless absolutely necessary, you should avoid any redirects in your code.
(e) Use a CDN
A CDN (content delivery network) is a collection of web servers present across vast geographical locations that deliver content quickly and efficiently to clients.
A client requesting for a resource will be served the resource from a server that is geographically closest to the client’s location. This ensures that the content requested reaches the client in the shortest time possible!
We have a separate resource comparing the top CDN solutions for WordPress sites, along with info on how to get stared. Check it out in the related posts list at the top of the page.
Step 4: Caching
No website speed optimization guide can exist without a section on caching. Some techniques that we discussed earlier, such as GZip compression and minificaiton, are a part of many caching solutions today.
Caching refers to a phenomenon of storing a resource in a temporary storage to retrieve it quickly when required. There are various forms of caching:
- Page caching: A static HTML version of a page stored on the server
- Database caching: The results of common database queries (such as top 10 posts on your site) stored on the server
- Browser caching: Storing parts of your page in the browser
We have compared the most popular WordPress caching plugins in this post.
TL;DR: Go check out WP Rocket if you are looking for a complete solution. Alternatively, if you prefer something that’s free, here’s a guide on how to configure W3 Total Cache.
Step 5: Optimize for mobile
In the earlier parts of this article, we discussed optimization techniques that are relevant for both desktop and mobile. However, the consumption of content on mobile is increasing, and there are new challenges a smaller screen brings. This section, thus, discusses website speed optimization methods for mobile devices.
Mobile optimization refers to the practice of ensuring that mobile visitors to your web page experience the same functionality and efficiency as their desktop counterparts. The following list contains certain hygiene factors for ensuring that your website speed optimization is up to par for mobile devices:
- Use responsive web design to ensure different devices get different versions of a web page
- Avoid use of flash and pop ups, as mobile devices may not support it
- Do not position interactions such as links too close to each other
In addition to these factors, AMP (Accelerated Mobile Pages) is a project that aims at creating content that is fast and consistent across devices.
Here is a guide to getting started with AMP in WordPress.
Conclusion 🧐
I hope this guide has given you some tips on what you should do to improve your site’s overall level of website speed optimization.
Just to recap; we first looked at the anatomy of a web page to tackle specific areas to improve. Then, we moved on to specific steps for optimization:
- Step 1 covered the optimization of static files in the form of stylesheets and scripts
- Step 2 tackled images and their optimization
- Step 3 was all about techniques to optimize HTTP requests
- Step 4 discussed a few popular caching techniques
- Step 5 covered optimization for mobile devices
Is there anything you’re struggling with when it comes to website speed optimization? Do let us know in the comments below.
…
Don’t forget to join our crash course on speeding up your WordPress site. Learn more below:
Layout, presentation and editing by Karol K.