Quick tip on how to make extremely heavily animated pages with 100 scores on web vitals

After some time and investigation, we want to share with you some thoughts how to make almost perfect Web vitals on very heavy page with animation.

As example, we use our homepage. As you see, it has a lot of animations and scripts and huge amount of graphic. We used very light and optimized BlockPress theme and extremely performant Greenshift plugin which makes all the job automatically but still I was not able to get more than 80 score on mobiles. And problem is in scripts. You may have very optimized scripts, but if you have too much scipts on page, you can’t get good score.

And there is one reason of this – how browser executes web pages.

Browser loads assets which you have in Head section. Usually, it’s meta tags and styles. Then, Content of page and scripts in end. And this is a problem, because if you have any kind of script related elements in top section – browser will executes it only after everything is loaded. This will reduce LCP and if you have big page with many elements, you can expect near 20-30 point drop on web vitals.

Why do not place scripts in head section? Because in this case, you will get another problem – render blocking error

Another problem is images. Any image in WordPress has lazy load by default and this is great, until you place image in top part of site. In this scenario, it will do opposite and will be delayed in loading, so LCP will be reduced.

So, we did next.

1

Remove lazy loading in top imagesTo improve LCP

WordPress doesn’t have option to remove lazy loading in images, fortunately, Greenshift plugin has it. So, use Image block in Greenshift for all top level images (including site logo) and disable lazy loading there

2

Use simple elements in your first screenThis is affecting web vitals a lot

What you have in first screen – is 60% of your score. So, if you want to have better score – make sure that you use simple elements in first screen. Better – Text or SVG (and without custom fonts). They must cover whole screen on mobiles. You can have everything which you want on desktop, but first screen of mobile version must be very simple. Check our example

And in Greenshift we have few helpers to get this

  1. Order in Columns and CSS grid elements. This can help you to place column which is on right side on your desktop to be first one on mobiles
  2. Option to disable background on each resolution. Users don’t estimate your super cool background on mobiles, because, they will not see it perfectly, so, better to disable it.
  3. If you want to have graphical elements in top screen on mobiles – use SVG shape block and Custom code. it’s important to use SVG as code and not as image because code is executed immediately
  4. You can also use Lottie Animation Block and special Smart Load feature. This feature will delay animation and speed will be not affected even if you have extremely heavy lottie file
  5. The same Smart load feature is available in Slider, 3d block and others, but we still recommend to have simple first screen if speed is important for you
  6. There are many design features in Greenshift to improve simple elements – gradient animation (which doesn’t use scripts), text gradients, CSS transformation
3

Avoid using any scripts and animation in first screenBuild complex layouts easily

It doesn’t matter how good is your page, but heavy js libraries can destroy your score. So, what is the solution – DON’T use heavy js libraries.

Ok, if it’s not your scenario (for example, we must show good sides of our plugin on home page and it’s not possible without complex animations), then, there is the way to control this.

We use Wp rocket plugin and it’s feature Delayed Scripts.

What does it make? The same as our smart loaders for blocks, but it does this for whole page. Users (and google bots) will see page without scripts first, then, once they start to interact on page, scripts will be loaded.

Wp Rocket is premium plugin, but the same option is available in free plugins. For example, Flying Scripts (which can be also useful to delay Analytics and other external plugins)

Again, it’s important to have simple first screen on mobiles to make this helpful. Also, if you check Excluded option, we added aoslight.js there. It’s because we still want to use some animations before scripts execution. Latest Greenshift version has very small animation script, just 0.4kb so you can use Animation panel in blocks without affecting page speed (but don’t enable gsap library in such top screen animations).

4

Reusable template Ajax loadingDelay loading of whole page

And this is another unique feature of Greenshift. You can delay loading not only just block’s scripts but whole section or even page. So, for perfect score, you can make static first screen, then, make rest of page as reusable and use Ajax loading for this reusable template. Check how it’s working in our unique features section

This can also solve problem with big Dom size of page. And we use this feature to load our heavy SVG animated section

But this can be dangerous. Because not always all scripts can work perfectly when they are loaded in ajax request. Also, we found that this can give more loading on server, so, you need to have enough CPU server memory. So, experiment before you implement this.

«

Leave a Reply

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