Lesson 2 Increase Site Speed

Summary

Optimizing site speed on popular website builders and with developer-friendly tools ensures fast load times, better user experience, and higher search rankings. On Wix, leverage built-in lazy loading, automatic image compression, and the Wix Turbo engine. WordPress users benefit from powerful caching plugins (e.g., WP Rocket), image optimizers (Smush, Imagify), and CDN integrations. Squarespace offers image-size controls, third-party extensions like TinyIMG, and lightweight templates. For developers, running audits with Lighthouse, removing unused CSS via PurgeCSS, and enabling HTTP/2 & Brotli compression on modern servers deliver granular performance gains.

---

Wix

1. Enable Lazy Loading & Wix Turbo

Wix automatically applies lazy loading to defer off-screen images and uses the Wix Turbo engine to optimize resource delivery¹².

2. Optimize Images

Upload images in appropriate dimensions; Wix compresses them on upload. For advanced control, use the Wix Image Optimization guide³.

3. Limit Animations & Third-Party Scripts

Reduce excessive site effects and remove unused apps in your Wix dashboard to cut down on render-blocking resources¹.

---

WordPress

1. Install a Caching Plugin

Use WP Rocket for page and browser caching, GZIP compression, delayed JavaScript execution, and CSS/JS minification⁴.

2. Optimize & Convert Images

Activate Smush or Imagify plugins to bulk-compress images and convert them to WebP/AVIF formats without quality loss⁵⁶.

3. Integrate a CDN

Pair your host with a CDN (e.g., Cloudflare) to serve static assets from edge locations, reducing latency worldwide⁷.

4. Minify & Remove Unused Code

Use WP Rocket’s “Remove Unused CSS” feature or run PurgeCSS in your build process to strip out dead CSS rules⁸.

---

Squarespace

1. Compress & Resize Images

Follow Squarespace’s guide to reducing page size and connect the TinyIMG extension for automated image compression⁹.

2. Choose a Speed-Optimized Template

Select a lightweight template (e.g., Brine family) and avoid heavy custom code blocks to minimize load time¹⁰.

3. Limit Fonts & Integrations

Stick to two web-safe fonts and remove unused integrations or embed codes that add extra HTTP requests¹¹.

---

Developer-Friendly Tools

1. Lighthouse Audits

Run Google Lighthouse (in Chrome DevTools) to identify performance bottlenecks, track Core Web Vitals, and receive prioritized suggestions¹².

2. PurgeCSS & Build Optimizations

Integrate PurgeCSS in your Webpack or Gulp pipeline to eliminate unused CSS¹³.

3. HTTP/2 & Brotli Compression

Enable HTTP/2 on your server for multiplexing and header compression; add Brotli for superior text compression over GZIP¹⁴¹⁵.

4. Image Preloading & Critical CSS

Manually preload key assets (fonts, hero images) with <link rel="preload"> and inline critical-path CSS to accelerate first render¹².

---

References