WordPress – if I say most common used CMS in the market used for blogging and website platform will not be wrong, according to W3tech, it holds around 40% of the market. WordPress site optimization is majorly in demand right now you can check freelance websites which are flooded with request to optimize their website for core vitals update.

As mentioned in the title we will be working on WordPress site optimization with minimal plugin usage, or I say majorly only two plugins 1. Cache & 2. Image optimization & for other changes we must make our hands dirty to make changing in the code and adding extra stuff. you can also check out my previous post on how to improve core web vitals

I will suggest you start working on the mobile version first which will improve your desktop page speed score as well. Let start with scanning the site with Google page speed insights or alternatively you can use Chrome inbuilt lighthouse. we are using page speed insights over gtmatrics because it gives mobile page speed score in very simple way.

1. Initial server response time, higher response time significantly decreases page speed score to improve this you can do following changes

  1. Move to the better server usually, WordPress dedicated or upgrade server resources. (IF you already have a better server move to step 2.)
  2. Disable plugins which perform time-consuming process during page render process like find and replace on output HTML & third-party data request using Curl.
  3. Use Cache plugin only for cache purposes, you can use any free cache plugin as per server performance.
  4. Try to minify & Merge CSS and JS manually rather than using a plugin that prevents server-side processing of minification and merges.

2. Image optimization, normally everyone knows how much images can fluctuate your page speed score. As I mentioned above we will be using a plugin called WebP Express for compressing images and serve them as webp format. I am recommending is plugin because its free and uses you server for image compression, you can set your compression method, percentage of loss, return type as jpeg or webp. Just like compression lazy loading images which are below the fold is very much important for this you need to add lazy load script (lazysizes.min.js ) using wp_enqueue_script in your function.php and modify your img tag according to the script you add.

3. Css Optimisation, As I mentioned above, we need to make our hands dirty, after merging and minify CSS you need to add it back Use add_action(‘header’,addcss) function to add CSS with custom code so it won’t we render-blocking.

Function addcss() {

echo ‘<link href=”URL” rel=”preload” as=”style” onload=”this.onload=null;this.rel=’stylesheet’”>
<noscript><link href=”URL” rel=”stylesheet” as=”style”></noscript>‘;

}

Use the tool to generate CSS above the fold and add it in the head tag to minimize the CLS score to 0. these tools are far from perfect so you must work on the generated code to fix the structure.

Note: while working on CSS above fold remove all the CSS files so you can add the necessary code to fix Shifts.

5. (UPDATED) FONT Optimisations,(Helps FCP) now almost everyone uses font awesome or google fonts in their website to customize the looks and feels whether it’s an ICON or customized font set. if you use google fonts you know that its code comes with and URL parameter “swap” which help to load text content and display to the user without waiting for a font being loaded later when fonts get loaded it swap the fallback browser font with your customised font.

Also read : A Guide to Optimise web fonts performance

Preloading font files for fontawsome

<link rel=”preload” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2″  as =”font”>

  • Google fonts optimization: Always use swap, for example, if you want to load Roboto font instead of using

https://fonts.googleapis.com/css?family=Roboto

use:

https://fonts.googleapis.com/css?family=Roboto&display=swap

You can also save some millisecond by inline the CSS code of fonts

  • local fonts optimization: In your CSS set font-display property to Swap { Save FCP time }
    @font-face {
    font-family: ‘Open Sans’;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url() format(‘woff2’);
    }

4. JavaScript Optimisation, majorly everyone focusses on optimizing the image, CSS, using CDN & even server response time but sometimes the major culprit is JS whether it’s a slider, chat app, third party Cache policy library, Google analytics, Facebook pixel and much more. Let’s start with js

Use Gtag for Google Analytics, AdWords & Facebook pixel codes. It will down your request from 3 to 1 and if compared all three requests together via gtag is faster than to Facebook pixel stand alone.

If you have multiple sliders within a single page you need to add an event to run the slider, see pic below

function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}

const box = document.querySelector(‘.div’);

document.addEventListener(‘scroll’, function o() {
if(isInViewport(box)){ //check if div with slider is in view
document.removeEventListener(“scroll”, o);//remove event to prevent reloading
$(‘.team-carousel’).owlCarousel({
loop: true,
smartSpeed: 500,
lazyLoad:true,
responsiveClass: true,
nav:false,
dots:false,
autoplay: true,
margin:30,
autoplayHoverPause: true,
autoplayTimeout: 3000,

});

I will update this post regularly with other optimization methods and tricks.  

 

Follow me on Facebook @pawan6161, or mail me at [email protected] 

5 thoughts on “WordPress site optimization for core vitals with minimal plugin usage.”

Leave a Reply

Your email address will not be published. Required fields are marked *