Divi Pagespeed Optimization and Core Web Vitals
-
Client Arman Sadeghi
-
Category Divi
-
Date 2 November, 2021
First part. Optimize the site from the PageSpeed red zone to the green zone.
List of problems:
1) Youtube videos and scripts/styles
2) Sequential loading of styles
3) Unused scripts and styles
4) Loading external scripts
5) The font file is called 404 error
6) Vimeo on Homepage
7) Large images for mobiles
8) The pictures have a non-modern format
9) Jquery and popup conflict
Solution. Optimize the site from the PageSpeed red zone to the green zone. List of problems and their ⭐solutions:
1) Youtube videos and scripts/styles
Lazyload embed, delayed loading
2) Sequential loading of styles
Combining and minifying styles
3) Unused scripts and styles
Reduce unused scripts and styles
4) Loading external scripts
Delayed loading gtm.js, analytics.js
5) The font file is called 404 error
Remove Font Call
6) Vimeo on Homepage
Optimize video for devices, CDN loading, adaptive
7) Large images for mobiles
Separate mobile and desktop images
8) The pictures have a non-modern format
Transformation of images into a format webp
9) Jquery and popup conflict
Embedded the script without conflict
Optimized the database from 60 MB to 14 MB
Found and removed broken links and redirects
Second part. Core Web Vitals Core indicators are in the red zone. It is necessary to correct the indicators. Pay special attention to CLS.
Solution. I found, installed and corrected:
1) A serious shift (about 1) occurred due to the displacement of the a11y toolbar plugin. I have moved the plugin styles to a separate file.
2) Divi loads about 6-7 static and dynamic files, which alternately shift each other. I have optimized the style files and their loading
3) Divi loaded about 127 font files. Because of this, the text jumped and created offsets. I have downloaded 5 files and configured their call from swap to block.