About a decade back, Google announced that that site speed would affect web search ranking. 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.
If you’re building your first website, it’s important to know that page load times are important in determining how many users remain 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!
To say the least, the size of your website and your overall site speed does matter, a lot! Even with an ever-increasing page load, there are things that you can do to improve how your site handles things. This post discusses it all.
Website speed optimization: What you need before we get started
This post assumes that you have two key things already taken care of while building your website:
- You use an optimized theme that doesn’t introduce much bloat on top of WordPress itself.
- You’re on a sufficiently fast host.
If you tick these two boxes, you may proceed to the following sections to explore a comprehensive list of tasks that you can undertake to make sure your website load times are minimal.
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
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.
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 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:
- Does WordPress Site Speed Really Matter for SEO?
- Google Maps JavaScript API Tutorial: Add a Custom Map to Your Website
- 7 of the Best Mobile Website Builder Tools in 2021
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 and PNGs.
They are not alike.
- JPG images are meant for photos and other complex images with a lot of color information in them
- PNG images are perfect for graphics that have little color information, such as interface screenshots.
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.
Lazy loading demonstration on CodeinWP
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:
| Plugin | Original JPG Size | After Optimization | Optimization % | Compression |
|---|---|---|---|---|
| ShortPixel | 518 KB | 169 KB | 67.36% | Lossy |
| TinyPNG | 518 KB | 248.6 KB | 52% | Lossy |
| Optimole | 518 KB | 274 KB | 47% | Lossy and Lossless |
| Imagify | 518 KB | 338.7 KB | 34.64% | Lossy |
| EWWW | 518 KB | 488.9 KB | 5.7% | Lossless |
| Smush | 518 KB | 493 KB | 4.9% | Lossless |
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 www.codeinwp.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 by Kinsta 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
ConnectiontoKeep-Alive - Through the
.htaccessorhttpd.conffiles 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.
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 curating web content 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.
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
This post was originally published on Codeinwp.