Digital Launch

WordPress website speed optimisation tips you can use right now.

There is much to be said about Google’s Lightspeed update and wether you like it or not is is bringing the web industry to a new level. It already was but with the new tools clearer insight are available as everyone can open a Lightspeed window now and see whats going on in your website. It has to be said though that performance scores should only be viewed as an indication. There are plenty of examples in our portfolio of sites with a 50 performance score running practically faster than a 80 score website. Here are some tips you can use right now from Guido Branderhorst from the Digital Launch team to improve your speed right now or your future loading speed.

1: Server server server!

Yep, most speed battles are already won or lost on the server before anything really has happened. Invest in a decent hosting and use a reputable company to set it up correctly. You can optimise all you want for thousands of dollars but adding Varnish, Redis plus a proper Nginx server setup blows that all away performance wise. Sorry, there are no ways to cut cost here. Stay away from any shared hosting solution and get a powerful cloud solution like Amazon AWS or any of their high quality competitors. In server land everything has to do with usage, your solution should always be tailor made for the best results. It’s the difference between a 5 second loading time a 0.5 second loading time. For WordPress there are some great pre-made Amazon AWS server setups available that require relatively low tuning time. We like Bitnami but the security settings are very high so that might not be for everyone.

2: Javascript, to animate or not to animate, thats the question.

Lightspeed’s performance score relies heavy on the judging of your Javascript setup in your website. You need to cut out any unwanted Javascript and you can do this easily by investing in a decent cache plugin/module that allows you to defer, disable, move to footer/header. I’m going to assume you’re not a DevOp so you might not know many of this can be done as well on the serverside so having a decent hosting partner again can save you many optimisation hours. Some frameworks don’t allow too much meddling with Javascript like Magento 2 does, but using a module or plugin if you are not that tech savvy is a good option. There’s something to be said about adding code to leverage it to remove code, but generally the benefit for the average site is great. In WordPress the plugin Hummingbird even has a basic skill to do this all for you in a single click (but manual option is available to).

If your website is one of those spiffy animated ones, ask your developer for Lottie animations. Its super lightweight and beats any movie or gif solution any day of the week performance wise.

3: Image optimisation type WebP

WordPress and other frameworks have several modules to convert images to WebP format. It’s the ‘new’ standard for image optimisation. It’s just smaller and better. Here’s a tip for you to save you this WebP conversion module and save you another javascript library! Did you know you can add WebP formatted images directly into WordPress instead of your normal format? You need to add a small snippet of code to your WordPress theme file “functions.php” and now you can use the media library to upload WebP formatted file and use them like ‘normal’ ones. Just export them from any self respecting image editing program as WebP format and drag them into WordPress done you are! Don’t forget always to have Smush installed and enabled for better compression rates.

//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

//** * Enable preview / thumbnail for webp image files.*/
function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_WEBP );
        $info = @getimagesize( $path );

        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }

    return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

4. CSS and Font organisation

Fonts and CSS are important to Google as to where and how it is loaded. For this the Lightspeed tool is quite handy but also a bit lacking. There is really only very little speed in CSS and fonts to be gained, this is more for us a vanity item than it is speed related but there is a case to be made about loading unnecessary large CSS libraries. Be sure to have your developer organize the Font loading correctly so they display fast but do not block loading as WordPress does not standard do this correctly. Again a great plugin here is Hummingbird, this time the functions are nice but also switching the module to “manual” easily lets you identify all the CSS scripts being loaded and move them around in the loading sequence. Cutting down modules you don’t need is important, but I’m assuming you already knew that before the Lightspeed update.

5. CDN usage

It has to be said here we feel the CDN ‘judging’ of lighthouse is most lacking. A CDN is a quite complex and heavy tool for a light and already nimble website that targets only a local area. Though your Lighthouse performance score might be heavily impacted there is a big case to be made about not using a CDN at all for your particular website. A (cheap & expensive!) CDN can easily also be unstable and actually increase the real loading time of your website. Though Lightspeed will give you a nice bonus, a CDN can really negatively impact your website. If you are targeting your local area and your server is in this area too, realistically this is not a case where you even need a CDN. Newer CDN’s also come with all kinds of tools that are enabled by default, like minification and security scripts. These might be convenient but managing this without CDN on the server/website side is much faster.

Hey hope you enjoyed this optimisation post, we optimise websites daily for speed purposes but also for SEO optimisation, there are many ways to Rome so let me know in the comments, your golden tips/comments or send me your questions’/inquiries at [email protected]

By
in news
Post a Comment