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
- 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
- long function and variable names
- unused code
(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>
(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?
- 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.
(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.
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:
This post was originally published on Codeinwp.