page speed

8 Page Speed Optimization Tips

Andrii

• 6 min read
8 Page Speed Optimization Tips

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:

  • Name
  • Status
  • Type
  • Size
  • 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:

  • Smush
  • Tinify

 

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.

 

4. Optimize Javascript

a. Load JavaScript at the bottom

In general, a JavaScript file will block any further rendering until the JavaScript has finished being loaded and parsed.

Therefore, refer to JS files at the bottom of your pages.

b. Hosted JavaScript libraries

Just like fonts, it’s best practice to find hosted versions of popular JavaScript libraries, such as Google’s hosted version of jQuery.

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!

 

5. Minification

Minification is a separate huge topic for website speed optimization.

The CSS and JavaScript that we write is often filled with spaces, line breaks, comments, and long variable names. The web browser doesn’t need any of these things to parse properly, and yet they still are being downloaded when a site visitor loads up the page. Minifying assets removes these extra bits and reduces overall page weight.

Your minification should be based on these two concepts.

  • Minify Assets – Minification reduces the file size of JavaScripts and CSS by removing spaces, line breaks, comments, long variable names, and via other optimizations.
  • 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).

Minify CSS

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.

 

6. Caching

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
  • Cachify

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.

 

7. CDN

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.

 

8. AMP

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.

 

Measure performance

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.

 

Sign up for more like this.

Enter your email
Subscribe