7 tips to improve the performance of your WordPress site

With the­se 7 tips, you can opti­mi­ze your web­site to get bet­ter values ​​for the Goog­le Core Web Vitals. The Core Web Vitals were intro­du­ced in June 2021 and are now also ano­ther ran­king fac­tor.

How can I measure the loading times of my WordPress website? #

Good ques­ti­on, the­re are now many free tools on the Inter­net for that. Abo­ve all, GTMe­trix and Goog­le Page­Speed ​​Insights have estab­lished them­sel­ves.

Befo­re you start opti­mi­zing your web­site, you should try one of the tools to get some hel­pful tips. Here is an exam­p­le from our site.

You should take the test regu­lar­ly, ide­al­ly when­ever you have made major chan­ges.

Step 1: Check server response times #

The first thing you should check is whe­ther your ser­ver is even sui­ta­ble for your web­site. The­re are as many hos­ting pro­vi­ders as the­re are, a dime a dozen the­se days. In addi­ti­on, they all regu­lar­ly under­cut each other in terms of pri­ce — which of cour­se also affects per­for­mance.

You can test your TTFB here.

In the case of hos­ting, the pro­vi­der makes a ser­ver available. But then 10–30 web­sites are pla­ced on this. This means that the­se web­sites then share the available power.

As you can see, only a frac­tion of all resour­ces are available to you. Now, it is the case that many hos­ters natu­ral­ly want to achie­ve the maxi­mum pro­fit. The­r­e­fo­re, the hard­ware is of cour­se not the latest and also not the fas­test. In addi­ti­on, the ser­vers have not been opti­mi­zed for Word­Press eit­her.

So what to do ? Which is the right pro­vi­der now? The best thing to do is to look for a pro­vi­der who spe­cia­li­zes on Word­Press. This is whe­re RAIDBOXES come to mind.

Alter­na­tively, Alfah­os­ting and All-Inclu­­si­­ve have also recei­ved good reviews.

Step 2: Set up the WordPress Cache System #

If you are not yet using a cache sys­tem, you should defi­ni­te­ly install one. The­re are also count­less plug­ins that you can use for this.

We most­ly use WP Rocket. This is a pre­mi­um plug­in that offers you many func­tions to opti­mi­ze your site.

If you pre­fer not to spend any money, you can use WP Fas­test Cache or W3 Total Cache. Both plug­ins offer a sca­­led-down free ver­si­on.

If you’­re won­de­ring what the­se plug­ins can do for you, that’s very simp­le: They opti­mi­ze your site so that it loads fas­ter.

For exam­p­le, the plug­in can be used to opti­mi­ze the caching gui­de­lines for your files and images. Files then do not have to be down­loa­ded over and over again, but only when they have chan­ged.

In addi­ti­on, the com­mon cache plug­ins offer the opti­on of com­pres­sing and com­bi­ning CSS and Java­Script files (if HTTP/2 is not acti­va­ted).

Of cour­se, the­re are many more opti­ons — depen­ding on the plug­in. But that would go bey­ond the scope of the artic­le. The­r­e­fo­re, you should take a look at all of them and then look for ins­truc­tions for the sel­ec­ted plug­in.

Step 3: Deactivate unnecessary plugins #

Plug­ins are one reason why your site loads for a long time and gets bad values ​​on the Core Web Vitals. I know the­re are many plug­ins that add beau­tiful new designs, popups, but­tons, etc. to your web­site, but that usual­ly takes a toll on loa­ding times.

The pro­blem is quite simp­le, that the CSS and Java­Script files are loa­ded on all pages. Even if you don’t even use the plug­in on the site. Coll­ec­tions of snip­pets in par­ti­cu­lar are a huge resour­ce hog.

You should now go through your plug­ins and divi­de them into 3 groups.

1. Essen­ti­al plug­ins that are nee­ded for your web­site to func­tion.
2. Optio­nal plug­ins that you only use to spruce up your web­site.
3. Backend plug­ins that are only used for the admi­nis­tra­ti­on of your web­site will have no effect in the front­end.

If the­re are alre­a­dy visi­tors on your web­site, you should first con­sider set­ting up a sta­ging sys­tem. Other­wi­se it can hap­pen that visi­tors to your web­site get error mes­sa­ges and nobo­dy wants that.

As soon as you have com­ple­ted your divi­si­on, you should deac­ti­va­te all plug­ins that are in group 2.

Then check the loa­ding times of your web­site again. This is how you can find out which plug­ins will give you the most per­for­mance boost.

For exam­p­le, we only use a handful of plug­ins for a Word­Press web­site:

• WP Rocket for the cache
• Borlabs coo­kie for GDPR
• AIOSEO for SEO
• Redi­rec­tion for 301/302 Redi­rects
• WebP Express to pro­vi­de new image types
• Page­Buil­der for Con­tent Crea­ti­on

With this you can alre­a­dy build a gre­at web­site that looks gre­at and loads quick­ly.

Step 4: Remove unused CSS and JavaScript #

Now it’s get­ting a bit tech­ni­cal, but it’s worth it. As alre­a­dy men­tio­ned, plug­ins load scripts and style­sheets on all pages. Even when you are not actual­ly nee­ded.

Of cour­se, you can deter­mi­ne yours­elf which files are loa­ded on which page. For pro­gramm­ers, Word­Press offers the opti­on of sim­ply thro­wing scripts out again befo­re ren­de­ring.

function wp_dequeue_my_script() {
     if(is_page(2)){
          // JavaScript
          wp_dequeue_script( 'jquery-ui-core' );
          // Stylesheet
          wp_dequeue_style('style-handle');
     }
}
add_action( 'wp_print_scripts', 'wp_dequeue_my_script', 100 );

You then have to place the code in your functions.php and the ‘jquery-ui-core’ script will be unloa­ded on the page with ID 2.

This can of cour­se now be repea­ted for all pos­si­ble scripts and styl­es. The who­le thing can of cour­se be quite com­plex, espe­ci­al­ly if you use many sub-pages.

The­re are also two plug­ins for this, the Word­Press Asset Mana­ger and Asset Cle­a­nUp. Both plug­ins also offer the free ver­si­on of remo­ving scripts and style­sheets from pages, con­tri­bu­ti­ons or cus­tom post types.

Step 5: Optimize images #

Images play a big role in loa­ding times. It is not uncom­mon for us to see web­sites that upload pic­tures in 4K reso­lu­ti­ons and then won­der why the page is slow to load.

Optimize before upload

Befo­re uploa­ding, you should cut your pic­tures to the cor­rect dimen­si­ons with Pho­to­shop, Gimp or ano­ther image editing pro­gram.

Espe­ci­al­ly if you use stock pho­tos from Foto­lia, Pix­a­bay or Uns­plash, you will recei­ve very lar­ge files after down­loa­ding the­se images. The­r­e­fo­re, redu­ce the images to the pixel size you use on your blog or web­site.

Most image editing pro­grams also offer you to com­press your images befo­re saving them. You should set a qua­li­ty of 60 to 80%. This keeps the image sharp but still beco­mes a bit smal­ler. Alter­na­tively, for exam­p­le, you can use COMPRESS JPEG to com­press your image online.

Downsizing when uploading

With Word­Press you can use plug­ins that com­press your images when you upload them. To do this, you don’t have to go any fur­ther than instal­ling the plug­in.

You can use WP Smush.it or Resmush.it, for exam­p­le. Both plug­ins are updated regu­lar­ly and offer you the oppor­tu­ni­ty to sub­se­quent­ly redu­ce the size of images that have alre­a­dy been uploa­ded.

Don’t worry, the qua­li­ty will be retai­ned.

Step 6: Activate reloading of the images (LazyLoad) #

The rel­oa­ding of images is also cal­led Lazy­Load. Nowa­days, you can hard­ly find a web­site that does not use the pro­cess. Under­stan­da­ble, so the loa­ding time can be redu­ced con­sider­a­b­ly, espe­ci­al­ly for lar­ger pages.

How does the LazyLoad process work?

This is actual­ly quite simp­le. Basi­cal­ly, images are only loa­ded when they are in the visi­ble area of ​​your brow­ser (view­port). Images are only loa­ded when you start scrol­ling down.

Gre­at idea, right? That’s why you should use this pro­ce­du­re too.

How can I activate LazyLoad?

That depends on the the­me or the desi­red plug­ins. But you should make sure that you only acti­va­te one Lazy­Load sys­tem. For exam­p­le, the Word­Press the­me Ava­da has an inte­gra­ted Lazy­Load pro­cess. But we usual­ly deac­ti­va­te this and use the WP Rocket func­tion ins­tead, sin­ce we always use a caching plug­in any­way.

We just noti­ced that WP Rocket scored bet­ter Core Web Vitals than Ava­da. This is pro­ba­b­ly also becau­se WP Rocket was spe­ci­al­ly pro­grammed for it.

If you don’t use WP Rocket or Ava­da, you can also use Cra­zy Lazy.

Step 7: Activate HTTP/2 #

HTTP / 2 is the impro­ved ver­si­on of the HTTP / 1.1 pro­to­col. It is based on the SPDY pro­to­col deve­lo­ped by Goog­le.

With HTTP / 2 it is pos­si­ble to trans­mit seve­ral ele­ments of a web­site (images, style­sheets, Java­Script …) via a sin­gle con­nec­tion (mul­ti­plex). This was not yet pos­si­ble with HTTP / 1.1. The­re, only one ele­ment could ever be trans­mit­ted over a con­nec­tion.

The pro­blem was that only bet­ween 2 and 13 con­nec­tions to a ser­ver could be ope­ned at the same time (depen­ding on the brow­ser). That is why at that time an attempt was made to auto­ma­ti­cal­ly group scripts and trans­fer a huge file ins­tead of many small ones.

Many Word­Press caching plug­ins still offer this. You should deac­ti­va­te this if your ser­ver is alre­a­dy using HTTP / 2.

You can find out whe­ther your web­site sup­ports HTTP / 2 with Geek­fla­re.

If it is not yet acti­va­ted, you should inqui­re with your hos­ting pro­vi­der or con­sider swit­ching to ano­ther hos­ter.

Summary #

I hope our 7 tips to impro­ve the loa­ding times of your Word­Press site hel­ped you. Do you have any tips or ques­ti­ons about the loa­ding times of your Word­Press site yours­elf? Then plea­se lea­ve us a com­ment.