5.1Performance & speed optimization
The essentials in 30 seconds
- Speed is a major stake: a slow site drives people away and hurts SEO.
- Lever #1: images — compress them and size them correctly.
- Complete with: cache, quality hosting, light theme, Elementor's optimization options.
Through-line — Nadia speeds up the site
Before delivering, Nadia tests the speed of the joiner's site: slow, especially on mobile. The workshop photos weigh several MB each. She compresses them, installs a cache plugin, enables Elementor's performance options. The site goes from "sluggish" to "fast" — and visitors stay.
Start of level 5 — preparing a site ready to deliver.
1. Images, lever #1
Performance (loading speed) is a major stake: a slow site drives visitors away and penalizes SEO. Images are often the first cause of slowness: you compress them, size them to the display size, and use a modern format (WebP) when possible.
Nadia reduces her workshop photos from several MB to a few hundred KB: the gain is immediate.
2. Cache, hosting, Elementor
Other levers: a cache plugin (page caching, CSS/JS minification, optimized loading); quality hosting (resources, recent PHP); a light theme (Hello Elementor); and Elementor's optimization options (Flexbox containers lighter than sections/columns, optimized loading of fonts/icons).
Benchmark: the Core Web Vitals (Google's indicators) measure perceived speed. Nadia tests with a measurement tool before/after and aims for green.
🔎 Concrete example — Speeding up before delivering (Nadia's case)
Initial measurement: slow (mobile).
1. Compress the photos (MB → hundreds of KB, WebP).
2. Install a cache plugin (minification, page cache).
3. Light theme (Hello Elementor) + Flexbox containers.
4. Measure again: Core Web Vitals in the green.Result: a clearly faster site.
Lesson: images first, then cache and options.
Section vocabulary
- Performance (speed)
- The site's loading speed — a major stake for experience and SEO.
Simple example: a fast site retains visitors.
What it is not: judging it "fast enough" without measuring.
Reflex: measure the speed, especially on mobile.
- Optimizing images (lever #1)
- Compress and size images (WebP): the first cause of slowness.
Simple example: photos reduced from MB to hundreds of KB.
What it is not: uploading raw photos of several MB.
Reflex: always compress before inserting.
- Cache & optimization
- Page caching, CSS/JS minification, optimized loading (cache plugin).
Simple example: a cache plugin speeds up rendering.
What it is not: no caching on a public site.
Reflex: a cache plugin on a live site.
- Hosting & light theme
- Quality hosting (recent PHP) and a minimal theme (Hello Elementor).
Simple example: light theme + good hosting = a healthy base.
What it is not: heavy multipurpose theme + limited hosting.
Reflex: a light base from the start.
- Core Web Vitals
- Google's perceived-speed indicators, to aim at green.
Simple example: measure before/after optimization.
What it is not: ignoring the measurement and delivering "by feel".
Reflex: measure, optimize, re-measure.
In practice — Optimizing a site's speed
- Measure the speed (a Core Web Vitals tool), especially on mobile.
- Compress and size the images (WebP format if possible).
- Install a cache plugin (minification, caching).
- Check the light theme and Elementor options, then re-measure.
Ready-to-say script — valuing speed to the client (20 s)
"I optimized your site's speed, especially on mobile where most of your customers view you. By compressing the photos and enabling caching, the pages load much faster — which retains visitors and helps your SEO."
Link speed → retention → SEO → business.
Copy-paste template — performance check
INITIAL MEASUREMENT (mobile): _______________
IMAGES COMPRESSED / WEBP / SIZED: yes / no
CACHE INSTALLED (minification): yes / no
LIGHT THEME + HOSTING OK: yes / no
CORE WEB VITALS AFTER (green?): _______________Lots of images
Absolute priority to compression and the right format (WebP).
Modest hosting
Cache + light theme + recent PHP partly compensate.
Mobile
Measure on mobile first: that's where slowness penalizes most.
Before delivery
Always re-measure after optimization, aim for green.
✓ Best practices
- Compress the images first.
- Install a cache plugin in production.
- Measure before/after (Core Web Vitals).
✗ Common pitfalls
- Uploading heavy, uncompressed images.
- Forgetting the cache on a public site.
- Judging speed "by feel" without measuring.
Key takeaways
- Speed is a business and SEO stake.
- Images = lever #1 (compress, WebP).
- Cache + hosting + light theme + Elementor options.
- Measure the Core Web Vitals, aim for green.
48h challenge — apply tomorrow
Measure a page's speed on mobile, compress its images (WebP), enable a cache, then re-measure. Note the gain. 30 minutes.
- I compress and size my images.
- I enable a cache in production.
- I measure the Core Web Vitals before/after.
Frequently asked questions
What's the first thing to optimize?
Images: often the main cause of slowness. Compress them, size them to the display size and use the WebP format when possible.
What are Core Web Vitals?
Google's indicators measuring a page's perceived speed and stability. You aim for "green" and measure before/after optimization.
Is a cache plugin enough?
It helps a lot (caching, minification), but combines with optimized images, decent hosting and a light theme for a lasting result.
The joiner's site is slow on mobile, with photos of several MB. Where to start?