In this blog, I will go through some quite simple, but yet very effective page speed optimization tips you should look at.
Of course, Page Speed Optimization is that kind of topic, where you can write multiple books. But, I will try to focus on a few actionable and easy speed optimization steps.
Let’s dive into it.
To start with, while doing speed optimization, Network tab in Chrome dev tools should be your best friend.
Of course, there are great Page Speed Optimization Tools, like Google Page Speed Insights or Pingdom.
But, here I will try to describe things from good, old Google Dev Tools.
You can see all webpage assets, which are loaded: images, scripts, styles, etc.
There is detailed info about each asset:
- Load time
- Waterfall (queue in which they are loading)
In the bottom of the Network tab, you should focus on three important metrics:
- Number of requests
- KB transferred
- Load time
1. Optimize images
Images and other media – the easiest first quick win to optimize your page speed.
Especially, if you are not tech-savvy – that’s what you can easily do and what will immediately bring huge improvements.
a. Use SVGs first
SVGs are small in file size because they cover larger areas of the screen using just a few vector points, rather than thousands or millions of individual pixels like in a JPEG or a PNG.
b. Resize images
Usually, for simple blog posts or pages, you rarely need an image with more than 2000px in width.
So, just crop that image to a smaller size either in Photoshop or even in Preview on Mac.
c. Compress images
Delivering images that are appropriately compressed and sized to their container will reduce file sizes. You can use save for web in Adobe Photoshop
For WordPress sites, there are plenty of plugins, which can help with both resizing and optimization of your images. It can be extremely helpful if you are adding a lot of content and images every day – these plugins will automatically resize and compress images for you.
My favourites image compression WordPress plugins:
2. Optimize HTTP requests
Every asset will generate an HTTP request even when no data is sent (e.g. even if there is a 404 error).
The browser is also limited in the number of parallel connections that can be open at one time.
For this reason, reducing HTTP requests is paramount to improving performance.
The fewer requests – the better!
a. Remove bad 404 requests
For a start, just remove 404 https requests, using analysis from Network tab in Chrome Dev tools.
b. Reduce HTTP Requests
For example, link external files only when and where they are needed. Sometimes you can accidentally copy links to files, which are required on one page, but not on another. And it will increase load time.
3. Optimize CSS
Here are some CSS optimization tips.
a. Avoid @import
Using the @import CSS rule introduces more roundtrips from the browser to the server. Therefore, it takes more time for your page to load.
b. Use hosted services
For example, instead of hosting fonts on your server, just link them from Google CDN. Using hosted services is better for speed and reliability, for additional parallel HTTP connections, and for better caching.
c. Create a sprite map
A sprite map can help combine images into one to reduce HTTP connections.
Note, you shouldn’t use a sprite map for all images on your site. It is mainly for logos and smaller images, which can be loaded from one file.
Therefore, refer to JS files at the bottom of your pages.
Also, try to use minified versions of scripts instead of full js file – it is better to use jquery.min.js than jquery.js (full script). You will slightly reduce file size.
Hey, evey byte counts!
Minification is a separate huge topic for website speed optimization.
Your minification should be based on these two concepts.
- Combine Assets – Combining CSS into one file reduces HTTP requests.
Minification can be super hard. But, thankfully, there are plenty of minification tools, which will help!
Also, if your js file is already small – you can just paste js into HTML file – to avoid HTTP request. You can just use Google closure compiler and paste generated code into the page (if it’s not too big).
Instead of many CSS files, create one minified CSS file, e.g. all.min.css
By deleting other CSS files and combining everything into one – you will remove nasty HTTP requests.
Important, that after you did minification – keep the copy of the original file. As minification cannot be reversed. So, keep the copy for modifications later.
Good caching system can significantly boost your page speed.
Good thing, that caching is already included in most hosting packages these days. For example, WPEngine, Kinsta, Bluehost and so on.
If your hosting plan doesn’t provide it – try Cloudflare.
So, you just need to push a button – and your site is two times faster!
WordPress caching plugins
If you are using WordPress, there are plenty of caching plugins:
- WP Rocket
- W3 Total Cache
- WP Super Cache
In my experience, if you have an expensive hosting – e.g. WPEngine – you don’t need any additional caching plugins.
On cheaper hostings, I would recommend WP Rocket. You will need some custom setup there. Also, very often caching plugins can break up your WordPress site. In my experience, if there is some WordPress bug & you use caching plugins – first thing is try to purge all cache and deactivate the caching plugin.
A lot of hosting packages also offer CDN – content delivery network services.
CDN basically means, that your content will be served from the closest server to that location – user browsing from e.g. Europe will be served from European server, from US – from American server and so on. It can massively speed up your site.
I personally use CDN with WPEngine and it’s worth it.
If you struggle with all the above, Google has a solution for you! Well, at least for mobile.
AMP – Accelerated Mobile Pages – a mobile framework from Google, which hosts your content on Google servers. Therefore your mobile pages load instantly.
For WordPress, there are plenty of AMP plugins. I would recommend:
- AMP for WP
- WP AMP
These plugins are super easy to install – it takes like 3-5 mins, without any technical expertise. Google Analytics is also connected to AMP.
It is super easy to convert simple page structures (blogs) to AMP format. But, if you use more complicated, custom-designed WP pages – AMP plugin might not work. And you will need to do custom development for that to appear nicely in AMP.
On Google SERP, AMP is distinguished with a special lightning icon. However, Google acknowledged that AMP is not a ranking factor – however all these pages load much faster.
After all these changes you’ve made – track progress.
Just go again to Chrome dev tools and check out two numbers:
- number of requests – it should decrease
- KB transferred – it should also decrease
- Response time – most important – is your page loading faster now?
Reload the page a few times – transferred KB can vary – but in overall it should stay in some repeatable range.
Track page speed and SEO
Sometimes, if you drastically improve your page speed on a big site – you can see your Google rankings going higher.
In my case, on one of my WordPress projects, I just did these three things:
- Optimized images
- Installed caching plugin (WP Rocket)
- Started using AMP
And in 30-60 days I had 30% growth from organic.
Leave your experience with these in comments below – did your Google rankings and traffic went up after page speed optimization?
To sum it up
Hope you enjoyed these tips and your load time shifter at least a bit.
If you don’t have time to dig into page-speed stuff yourself, I would just recommend going with high-quality (and maybe expensive) hosting. In my experience, this kind of hosting can solve 70% of your speed issues right away, especially on WordPress.