Image & Speed Optimization
Learn how to optimize images for faster load times, test site speed, and make adjustments that improve performance without sacrificing quality.
After video and review we will pay a new game:
Scripture
Habakkuk 2:2 (HCSB) – “The LORD answered me: Write down this vision; clearly inscribe it on tablets so one may easily read it.”
→ Tie-in: Just like a message is easier to read when it’s clear and well-presented, a website works better when it’s quick and smooth to load.
Why Site Speed Matters
- Faster sites:
- Keep visitors longer.
- Improve SEO rankings.
- Reduce bounce rate.
- Causes of slow sites:
- Large, unoptimized images.
- Too many plugins.
- Heavy animations or effects.
Image Optimization
- Best Practices:
- JPG for photos.
- PNG for graphics/transparency.
- WebP for best compression.
- Resize images before upload (avoid using huge images scaled down in Divi).
- Use correct formats:
- Keep image size under 200 KB when possible.
- Tools:
- imagify.io
- TinyPNG / TinyJPG
- Squoosh
- ShortPixel plugin.
Testing Site Speed
- Tools:
- Google PageSpeed Insights
- GTmetrix
- Show how to read speed reports:
- Largest Contentful Paint (LCP).
- First Input Delay (FID).
- Cumulative Layout Shift (CLS).
Live demo: Test class example site and discuss results.
Class Activity – Optimize & Test
- Students:
- Pick 2–3 large images on their site.
- Optimize them and re-upload.
- Run a site speed test before and after changes.
Homework
- Optimize all images on your site for size and format.
- Run a final site speed test and record your score.
- Make a list of changes you can make to further improve speed.