Watch tutorial on YouTube. | Get JS lazy load keywords used in tutorial
Tutorial to improve PageSpeed for WordPress websites designed with Elementor plugin. It covers all areas of website optimization.
Elementor is great for designig beautiful websites. It is beginner friendly and powerful. You can bring to life your website deign dreams into reality and impress your website visitors.
After creating beautiful website you realize that it is slow to load.
In this tutorial we will fix PageSpeed for Elementor and make your website super fast.
Benefits
- Beginner friendly optimization.
- No code snippets.
- No external service dependencies (like API or service registration).
- Using free plugins without annoying upsells.
- Long lasting optimization that will survive content and website updates.
Before — After Elementor PageSpeed Optimization
| PageSpeed Metric | Before | After |
|---|---|---|
| PageSpeed score | 47 | 98 |
| First Contentful Paint | 2.8 s | 1.2 s |
| Largest Contentful Paint | 8.8 s | 2.2 s |
| Total Blocking Time | 520 ms | 0 ms |
| Cumulative Layout Shift | 0.063 | 0.005 |
| Speed Index | 16.8 s | 1.2 s |
| Document Request Latency | 628 ms | 123 ms |
| 20 Images | 10 MB | 1.6 MB |
| Render Blocking Google Fonts | 3 s | 0 s |
| Initial Total Page Size with all assets | 10 MB | 0.2 MB |
Breakdown of PageSpeed improvement for each optimization step
| Optimization | PageSpeed score |
|---|---|
| Before | 47 |
| Compressed images | 58 |
| Inline CSS, Defer JS | 61 |
| Inline all CSS | 71 |
| Lazy load Google fonts | 71 |
| Lazy load images | 61 |
| Added Page Cache | 69 |
| Lazy load JS | 98 |
FAQ
How to optimize when website has too many render blocking CSS files?
In this tutorial we had around 30 small render blocking CSS files. We inlined all CSS to the page. Page size increased from 20kb to 38kb which is not significant. As a result we completely removed render blocking CSS files.
How to optimize video embeds in Elementor?
Elementor uses its own video embed implementation which is different than regular WordPress video embeds. It uses javascript to detect video embeds and converts them to iframes.
For this reason video lazy loading plugins didn’t work.
I used lazy loading JavaScript which also lazy loaded Elementor version 3 video embeds. But this implementation didn’t work for Elementor version 4 alpha. Maybe it will work in the future.
JavaScript Defer vs. Lazy Load difference?
JavaScript Defer will execute and can load additional javascript files ASAP.
Lazy loading makes sure that website has enough time to become interactive. And complete loading other visual elements like above fold images. Only after that JavaScript files will be lazy loaded.
Which means users can use page much faster without noticing any slowness.
- With just deferring JavaScript we got maximum
71 PageSpeed score. - By adding Lazy loading to JavaScript we achieved
98 PageSpeed score.
How to optimize Google Fonts?
Google fonts also a render blocking resource. We optimized it using CSS lazy loading with help of inline JavaScript. Applied it clicking checkbox in a plugin.
How to optimize big images?
There are two steps for optimizing big images in Elementor.
- Reduce image file size and dimensions. Reduced from 10 MB to 1,6 MB.
- Force lazy load images starting from second image. Reduced initial load from 1,6 MB to 256 KB.
—
What is next:
- Get JS lazy load keywords used in tutorial
- Watch general WordPress PageSpeed optimization
- PageSpeed optimization results showcase
- Further optimization by using CDN Page Cache without plugin
- Download PDF checklist for optimizing WordPress website.