A unique collection of Design Sets for Oxygen Builder

DESIGN SETS FOR OXYGEN

MADE WITH BY SUPADEZIGN

Feel free to donate if you like my tutorials ;)

How to optimize your website with GTmetrix

 /

What I love about GTMetrix, it's that it gives you a lot of details for each recommendation. Not only you know what to do, but you can also learn a lot.

The test website is a onepage website, not too huge, not too small. It's responsive and has some custom javascript. And it was obviously made with Oxygen (v 2.1).

The result doesn't look great.
But you will quickly find out that the first optimization to do, is all about the server.

 

Server configuration

Always enable the GZIP compression. If you are not sure about how to do it, GTMetrix will give you all the information needed :

https://gtmetrix.com/enable-gzip-compression.html

Same thing about the Leverage browser caching :

https://gtmetrix.com/leverage-browser-caching.html

After updating the .htaccess file, you will see that the Performance scores are already much better :

Image optimization

The biggest problem now is the scaled images. As the website is responsive, we need to figure out what size the image needs to be served at.

Oxygen doesn't support the srcset attribute yet (the next version will), so we are going to use this method :

https://gtmetrix.com/blog/how-to-optimize-images-a-practical-guide/

First, let's check the size of the image with the DevTools :

Resize the window to find out the maximum display size of the image :

Then resize the image :

It's already better now :

Now that most images have the right sizes, let's compress them.

You can compress them before uploading them, or simply use one plugin that will do the job for you.

For my website, I am going to use ShortPixel, as I already have an account. But there are plenty other plugins that work very well too, like Smush, Imagify...

The default settings will work well in most case. Just be sure you keep a backup of your original images :

I will also create a WebP version of the images. ShortPixel will do it for you, so why not using it. (Note that the WebP format is only supported by modern browsers. More info here : https://caniuse.com/#search=webp )

I don't check the option to "Deliver the WebP versions of the images in the front-end" because I will use another plugin to take care of it later.

The PageSpeed Score is even better, and the Total Page Size is twice smaller.
But as you can see the YSlow Score is still pretty low.

So now, It's time to use some Cache plugins.

Cache and minify

Once again, there are plenty of plugins for that. Some are free, some are quite expensive. Most of the time, the free plugins work as well as the paid ones.

As I like to keep it simple, I always use easy and simple plugins.

One of the most popular is Autoptimize.

Here are the settings I use most of the time. Each time you change something, check carefully that all the javascript still work. You might change the settings to exclude some scripts.

Most importantly, be sure to uncheck the option to optimize for logged in users. Or Oxygen won't work properly :

To be sure that the plugin works well, Log out and check your page. Then view the page source. The page will be "unreadable" and at the bottom you will see a Javascript file created by the plugin :

The scores got better :

Finally, let's add a cache plugin. It won't change the score much (or not at all), but for better performance, it's always better to use one.

Autoptimize recommends a couple of them :

If you consider performance important, you really should use one of the many caching plugins to do page caching. Some good candidates to complement Autoptimize that way are e.g. WP Super Cache, HyperCache, Comet Cache or KeyCDN’s Cache Enabler.

I often use Cache Enabler.  Not only it works well with Autoptimize, it's also one of the simplest. You won't waste your time trying millions of options.

The Cache Enabler plugin creates static HTML files and stores them on the servers disk. The web server will deliver the static HTML file and avoids the resource intensive backend processes (core, plugins and database). This WordPress cache engine will improve the performance of your website.

I check the WebP support option and I disable the Cache Minification, as Autoptimize already takes care of it.

That's it.

Once again, I always check if the plugin works properly :

I am totally satisfied with it. If the YSlow score is always lower, it's mainly because it recommends me to use a CDN. Which I didn't with this website.

You can always do better, but it always takes time to play with the options, do some experiments, try different plugins...

These are just the basic optimizations I usually do for all my websites. Easy, free, and doesn't take more than 10 mins to do.