Performance improving tips

Please advise how to improve Render Blocking performance score. After moving files into the footer position and defer them the score still low. Please advise if anything else can be improved

  • Adam Czajczyk
    • Support Gorilla

    Hi ROIverhogen

    I hope you’re well today and thank you for your question!

    I checked the site and the current general score given by Hummingbird is 80 (the same as PageSpeed for desktop) which is quite a good result. The two main issue reported by Hummingbird, as you already mentioned, are image optimization and render blocking resources.

    1. Image optimization

    There are three images reported and marked as “Compress and resize”. Since all the images in Media Library had already been smushed (compressed) the critical part here is the “resize” suggestion.

    This message means that a given image is in fact dynamically re-scaled in a browser. That happens if real dimensions of the image are different (bigger) than the size of the image container element. For example: a 1000 x 500 pixels image is displayed on site inside a 800×400 “div” block. Browser takes the image and scales it down to match container dimensions and that can slow down the site (and due to that it’s affecting score).

    The solution here is to:

    – identify where the image is used across the site

    – find out what are its dimensions when displayed on site – that can be done by using “Inspect” option of a browser (see: the guide to using devtools in Chrome)

    – resize or crop the image to these dimensions (that can be done using built-in WP image editor in Media Library)

    You will find the list of the affected images on “Hummingbird -> Performance Test -> Improvements” page after clicking on “Improve” button for “Optimize Images”. Addressing this three images the way suggested above should help a bit with the score.

    2. Render blocking resources

    This may actually be a bit more “tricky” task. I see that you have already switched to advanced mode of Hummingbird Asset Optimization and judging upon current settings I believe you have spent some time setting it up.

    There are still some resources though that might be possible to optimize even further as they weren’t moved to footer and/or set to be loaded after the page loads. This is something that might need a bit more tweaking but, unfortunately, it’s a “trial and error” task and might take time.

    The resources that are listed as render blocking currently would be:

    – jquery-core

    – flatsome-icons

    – flatsome-style

    – lity.css in /plugins/gdpr-cookie-compliance/dist/styles folder

    – and Google Fonts style (Roboto and Dancing Script fonts)

    Except for Google Fonts, it’s all about fine-tuning Asset Optimization setting. You would want to switch off Page Caching and then try to move this resources to footer and/or defer (jquery-core), move to footer and/or inline (CSS resources) and once that’s set switch Page Cache back on. The “catch” here is that we don’t know and cannot know upfront whether it will help or break the site. That is an individual thing for each install and can only be checked experimentally.

    So basically, the straight goal is to have as many CSS resources minified, moved to footer and inlined and as many JS resources minified, moved to footer and set to load after page loads as possible, as long as it doesn’t cause the site to brake. That’s as far as you can get and sets a “limit” on resource optimization.

    The Google Fonts one is a bit different because the only way to deal with it is to actually make them local and only after that apply asset optimization if necessary. Making these fonts local means downloading them, adding local styles and enqueueing on site. This plugin could help:

    https://wordpress.org/plugins/selfhost-google-fonts/

    Note please: Google PageSpeed and/or Hummingbird Performance test (as well as GTMetrix and similar tools) they only give some suggestions on things that could be improved that could possibly speed up the site. But they don’t actually measure the real “user experienced” load speed and a low score doesn’t necessarily mean slow site the same way as the high score doesn’t automatically mean fast site. Those grades aren’t also taken into account if it comes to SEO.

    That being said, if suggestions that I gave earlier in this post doesn’t help much, it might actually mean that there’s been pretty much the highest score reached for that particular setup so the next step would be to actually asses the real and subjective loading speed and if that’s at acceptable level, just consider it set. If not, then we can look if there are any additional ways to speed up the site a bit – regardless what score it gets.

    Best regards,

    Adam

  • ROIverhogen
    • Marketing Master

    Hi Adam Czajczyk,

    Thanks for your elaborate reply! Really appreciate that. Regarding the render blocking issue I’ve indeed spend some time on the crash and test course. However I didn’t stop to think and disable the caching. This will really help me speed up the process, so thanks for the tip :slight_smile:

    Regarding the image resizing. I’ve been to resizing images through the wp editor for weeks (not only on this website) however whenever I scale and crop the image in the wp editor and I save it my image editor says it’s the size I gave it to be. Where I get stuck is that when I reload the page the image is back on full size. Sometimes the editor even lies to me.

    For example an image that is 2000×1000 and I resize it to 200×100 (and save this) when I reload my editor it even says the image is 200×100 but when I open the url given to the image it’s still 2000×1000. I don’t know why and I’m aware that Hummingbird should not cache images so I’m confused where this goes wrong.

    Greetz,

    Bjorn

  • Adam Czajczyk
    • Support Gorilla

    Hi ROIverhogen

    Thanks for your response!

    As for images, you surprised me a bit but I was actually able to replicate this.

    For testing, I created a new post and added a “Full Size” sized image to it. When I edited the image and re-scaled it in image editor in Media Library and updated there, the image in the post actually kept an original size, even though it was showing – when I tried to edit directly in the post – that it actually is of that new size.

    I must say I’m not quite sure why is that. I tested it with no caching enabled on site and I have no cache whatsoever on the server. There was no other plugins active (not even Smush and Hummingbird) and only the Twenty Seventeen theme. I think therefore it’s related to how WP itself handles images and I wasn’t aware of that.

    However, there seem to be simple (though might take time if there’s many images to handle) workaround. What I did then was:

    – first I edited (scaled down) image to expected dimentions in Media Library and saved it

    – then I.. replaced the image in post with the same image; just removed image from post and then added it again selecting the “Full Size” size again (which was showing actually a scaled down size).

    Once I update the post and reloaded the post page, the scaled-down version of an image was loaded, as expected.

    I think that should do a trick on your end to. Would you give it a try, please? Let me know if it worked for you.

    Best regards,

    Adam

  • ROIverhogen
    • Marketing Master

    Good to hear this problem is not only on my side. But I can imagine this is a rather big bug then? If this is WP sided that means that there are probably hundreds of thousands with this issue? Is it possible that this might be a feature for smush or something?

    I’ve tried it the way you explained. Unfortunately this also didn’t work for me. I’ve disabled Hummingbird in the process but my images keep showing on their original size. Even though my image editor says their saved as their new dimensions.

    This really bugs me out. I’m losing 51 score on image optimization for 3 images (total of 114kb). Like what the actual ….

    I’m glad you were able to replicate the issue because that means it’s not my fault. I’m curious as to how and if this can get fixed.

    Cheers,

  • Predrag Dubajic
    • Support

    Hi ROIverhogen,

    I was doing some additional tests on your site and compared it to default WP behaviour and noticed one more thing happening on your installation.

    By default, in WP when you add an image, let’s say image.jpg, and then go to Media Library and resize that image, it will create image-e123456.jpg, so it actually creates new original size image with some random numbers added.

    That’s probably a safe net so if you resize the image too much and the original one was used somewhere on site it would get pixelated, so WP lets you replace it manually with the new one instead of messing up the look if the image is too small.

    Now, on your site we have some additional images created which is causing the issue to stay even after replacing the image.

    The first part still stands on your site, if you resize the image it will create image-e123456.jpg, however, when you go to replace the image from your page builder it will create an additional one and use that.

    So, if you go to your home page and try to replace image in “Durf jij de stap te zetten?” section for example, you will not end up with image-e123456.jpg used, instead, your theme will actually create image-1200×800.jpg and use that instead.

    So your theme is creating its own thumbnails to be used and it doesn’t matter which image size you upload to the media library, and since the holder of those images is only 495×330 but it loads 1200×800 image it will show in the reports.

    I’m afraid that this is something that needs to be discussed with theme developers and see how it can be sorted out so it uses smaller image.

    Hope this clears things up and let us know if anything is unclear.

    Best regards,

    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.