PageSpeed Optimization Techniques

Lecture: Do Page Speed Test - The Right Way

Key Testing Tools

• Recommended tools:

  • Google PageSpeed Insights (uses Lighthouse to measure core web vitals)

  • WebPageTest.org

• Not recommended due to inaccurate results:

  • Pingdom Tools

  • GTMetrix

Why Proper Testing Matters

• Many tools provide inaccurate results and unhelpful recommendations

• Proper testing methodology ensures reliable performance metrics

• Helps identify actual optimization opportunities rather than false issues

Before Running Tests

1. Purge all caches:

   • WordPress cache plugins (Litespeed, WP Rocket, W3 Total, Autoptimize)

   • Cloudflare cache

   • Skip only if no changes were made in the past 24 hours

2. Use incognito mode in your browser:

   • Windows: Ctrl + Shift + N

   • Mac: Cmd + Shift + N

WebPageTest.org Advanced Settings

• Location selection: Test from different geographical locations

• Browser selection: Simulate various browsers and devices

• Connection speed: Affects mobile scores significantly (try 3G Fast)

• Resolution: Choose browser dimensions

Recommended WebPageTest Settings

• For desktop testing:

  • Desktop browser

  • Cable connection

  • 3 tests

  • First view & repeat view

  • Capture video

  • Label as "Desktop cable"

• For mobile testing:

  • Mobile device and browser

  • 4G or 3G Fast connection

  • Same settings as desktop otherwise

Lecture: Backup & Restore Your Sites

Why Backups Are Critical for PageSpeed Optimization

• PageSpeed optimization tweaks can sometimes break your website

• Having a proper backup ensures you can restore to a working state

• Database backups are especially important as most configuration issues affect database tables

What to Backup

• WordPress websites consist of:

  • Files in the root directory (public_html)

  • Database (contains actual content and configurations)

  • The database is most critical as it stores all your site's content and settings

Backup Methods Using UpdraftPlus

1. Install and activate UpdraftPlus plugin

2. Navigate to: Settings → UpdraftPlus Backups

3. Click: Backup Now

4. Select: Database (uncheck others for a quick backup)

5. Existing backups: View and restore from this section

6. Remote storage: Configure under Settings tab (Google Drive, OneDrive, etc.)

Manual Database Restoration (When WordPress Admin is Inaccessible)

1. Access hosting control panel (cPanel)

2. Find phpMyAdmin under Databases section

3. Identify your database by looking for tables with "_options" suffix

4. Confirm correct database by checking siteurl value

5. Go to Import tab and select the database backup file

6. Click Go to restore the database

Finding Backup Files

• If backup files weren't downloaded:

  1. Go to File Manager in hosting control panel

  2. Navigate to wp-content folder → updraft folder

  3. Find recent backups there

Full Site Restoration

• Rename existing public_html to public_html_old

• Upload backup and extract it

Lecture: Configure Cloudflare

Cloudflare Free Plan Benefits

1. Protection against DDOS attacks

2. Fast DNS resolver (improves server response time)

3. CDN with 250+ data centers worldwide (reduces load time globally)

4. Free SSL certificates

5. HTTP/2 support (enables concurrent downloads)

Setup Process

1. Sign up for a free Cloudflare account

2. Add your domain

3. Point your domain nameservers to Cloudflare

Basic Configuration

• Domain Overview:

  • Use "Purge Cache" after making visual/functional changes

  • Enable "Development Mode" when actively updating design (auto-disables after 3 hours)

• SSL/TLS Settings:

  • Choose SSL mode carefully:

    • Off: If no SSL certificate installed

    • Flexible: Just installed SSL but not fully tested

    • Full: After completely testing HTTPS on all pages

  • Edge Certificates options:

    • Enable "Always use HTTPS" only after full HTTPS verification

    • Enable HSTS only after confirming HTTPS works site-wide

    • Set HSTS max age header to 6 months

    • Enable Preload and No-Sniff header

    • Choose TLS 1.0 as minimum version

    • Enable Opportunistic Encryption, TLS 1.3, and Automatic HTTPS rewrites

• Firewall Settings:

  • Security level: Medium (default)

  • Challenge passage: 1 week

  • Enable Browser integrity check and Privacy pass support

• Speed Settings:

  • Disable Auto Minify for JavaScript, CSS, and HTML (if using other optimization plugins)

  • Enable Brotli compression

  • Enable Rocket Loader

• Caching Configuration:

  • Caching level: Standard

  • Browser cache expiration: One month/year (or one day for dynamic sites)

  • Enable Crawler hints

  • Optional: Enable Always Online feature

Lecture: Compress Images in WebP Format

WebP Advantages

• Next-generation image format with superior compression algorithms

• Significantly reduces image size while maintaining quality

• Improves PageSpeed scores by addressing "Serve images in next-gen formats" issue

Image Compression Types

• Lossless compression: No quality loss (recommended)

• Lossy compression: Minimal perceived quality loss

• WebP: Supports both lossless and lossy compression methods

Server Requirements for WebP

• PHP 7.4 or higher

• PHP extensions: Imagick or GD

• WebP support on server

WebP Converter for Media Plugin Configuration

1. Install and activate the plugin

2. Go to Settings → WebP Converter

3. Check server configuration compatibility

4. Enable supported file extensions: jpg, jpeg, png

5. Enable supported directories: plugins, themes, uploads

6. Enable WebP as output format

7. Choose conversion method: Imagick (preferred) or GD

8. Set image quality (recommended: 90%)

9. Image loading mode: "via htaccess" (recommended)

10. Under extra features:

    • Disable "keep images metadata"

    • Enable automatic removal of larger WebP files

    • Enable browser caching

    • Enable conversion for images outside media library

    • Enable automatic conversion of uploaded images

    • Enable force redirections for all domains

11. Click Save Changes

12. Regenerate all images

13. Clear all caches and purge Cloudflare cache

14. Verify WebP conversion by checking image URLs

Alternative: WebP Express Plugin

• Use if WebP Converter for Media doesn't work

• Key settings:

  • Operation mode: "Varied responses" or "CDN friendly"

  • Enable: prevent using larger WebPs, create WebP files upon request, convert on upload

  • Configure redirection settings based on operation mode

Lecture: Litespeed Cache

Litespeed Server

• Proprietary web server software

• Drop-in Apache replacement with high performance

• Built-in dynamic content acceleration

Who Should Use LiteSpeed Cache

• Small to large WordPress websites needing an all-in-one solution

• Sites hosted on LiteSpeed servers seeking better performance without premium costs

WP Rocket vs LiteSpeed Cache

• WP Rocket: Better if you value your time and page load time

• LiteSpeed Cache: Better if you value both PageSpeed score and page loading time

Cloudways vs LiteSpeed Server

• Cloudways doesn't use LiteSpeed server (can't use LiteSpeed Cache)

• Cloudways offers Breeze plugin instead

• LiteSpeed Cache leads in both PageSpeed score and load time

• Cloudways servers with Breeze/W3TC/WP Rocket still faster than shared hosting at same price

LiteSpeed Cache Plugin Configuration

1. General Settings:

   • Set auto-update preference

   • Request domain key for Quic.cloud services

   • Enable Guest mode and Guest optimization

2. Cache Settings:

   • Enable cache, cache REST API, cache favicon.ico, cache PHP resources

   • Enable cache for mobile users if using mobile-specific content or AMP

3. ESI Settings:

   • Disable ESI, cache admin bar, and cache comment form

   • Enable ESI only for WooCommerce or sites with many logged-in users

4. Object Cache Settings:

   • Enable object cache if your server supports memcached/Redis

   • Choose Redis method with port 6379 if available

5. Browser Cache:

   • Turn browser cache on

6. CDN Settings:

   • Configure Quic.cloud CDN or Cloudflare

7. Image Optimization:

   • Enable Auto request cron and Auto Pull cron

   • Enable Optimize original images

   • Enable Optimize Losslessly

   • Disable Preserve EXIF/XMP data

   • Enable WebP versions and replacements

8. Page Optimization:

   • CSS Settings:

     • Enable CSS minify and combine

     • Enable Generate UCSS (remove unused CSS)

     • Enable Load CSS asynchronously

     • Set Font display optimization to "swap"

   • JS Settings:

     • Enable JS minify

     • Disable JS combine

     • Set Load JS Deferred to "Deferred"

   • HTML Settings:

     • Enable HTML minify, DNS prefetch, Remove query strings

   • Media Settings:

     • Enable Lazy load for images, iframes, videos

     • Enable LQIP cloud generator or responsive placeholder

     • Enable Add missing sizes

9. Database Optimization:

   • Use "Clean all" button (except "All transients")

10. Heartbeat Control:

    • Enable Frontend, Backend, and Editor Heartbeat control

Lecture: WP Rocket Cache

WP Rocket Features

• Lazy load images

• Minify JS & CSS

• Generate Critical CSS

• Defer non-critical JS

• Remove unused CSS

• Create and preload page cache

• CDN integration

• Database optimization

Requirements

• Works on Windows, Nginx, Litespeed or Apache servers

• PHP 7+ and Pretty permalinks

• Pricing: $49 for 1 site, $249 for unlimited sites

Configuration

1. Basic Cache Options:

   • Enable caching for mobile devices

   • Leave user cache disabled

   • Cache lifespan: 7 days (default)

2. File Optimization:

   • CSS Files:

     • Enable Minify CSS files

     • Disable Combine CSS files (for HTTP/2 servers)

     • Enable Optimize CSS delivery

     • Enable Remove unused CSS

   • JavaScript Files:

     • Enable Minify JavaScript files

     • Disable Combine JavaScript files

     • Enable Load JavaScript deferred

     • Use caution with Delay JavaScript execution

3. Media Settings:

   • Enable lazy load for images, iframes, videos

   • Enable YouTube iframe preview images

   • Enable Add missing image dimensions

4. Preload Settings:

   • Activate preloading and sitemap-based cache

   • Enable link preloading

   • Configure prefetch DNS requests if needed

   • Configure preload fonts if using self-hosted fonts

5. Additional Options:

   • Database optimization (Database tab)

   • CDN integration (CDN tab)

Lecture: 3 Plugin Combo Technique

For Non-Litespeed Servers Without Premium Plugins

Use these four plugins together:

1. Cache plugin (W3 Total Cache or Breeze)

2. Debloat plugin for JS/CSS optimization

3. OMGF (Optimize My Google Fonts)

4. WebP converter plugin

Why This Technique

• Achieves excellent PageSpeed scores (mobile 99, desktop 100) even on WooCommerce sites

• Works on cheap shared hosting despite server response time limitations

W3 Total Cache Configuration

1. Go to Performance → Setup Guide

2. Test and choose optimal settings for:

   • Page cache (choose lowest response time option)

   • Database cache (choose "none" if only disk cache is available)

   • Object cache (avoid disk cache method)

   • Browser cache (enable)

   • Enable Lazy load images

3. General Settings:

   • Enable page cache, opcode cache (if available)

   • Enable database/object cache if using non-disk methods

   • Enable browser cache

   • Do NOT enable minify (will use Debloat plugin instead)

Debloat Plugin Configuration

1. CSS Optimization:

   • Enable Fix render blocking CSS

   • Enable Inline Optimized CSS

   • Enable Minify CSS

   • Enable page builder support if needed

   • Enable Remove unused CSS

   • Enable Remove CSS on all pages

2. JS Optimization:

   • Enable defer JavaScript

   • Enable minify JavaScript

   • Enable page builder support if needed

   • Enable delay JavaScript (1s maximum delay)

   • Enable "disable for admins"

OMGF (Optimize My Google Fonts) Configuration

1. Optimization Settings:

   • Optimization mode: Manual (default)

   • Font display: swap

   • Uncheck unused font stylesheets

   • Disable optimization for admins

2. Detection Settings:

   • Google fonts processing: Replace

3. Advanced Settings:

   • Enable remove settings at uninstall

Troubleshooting Broken Sites

If your site breaks, disable these options one by one:

1. Remove unused CSS

2. Fix render blocking CSS

After each change:

• Save changes

• Empty all caches in Debloat

• Purge all caches in W3 Total Cache

• Check site in incognito window

Common Breaking Causes

• Theme/plugins not optimized for page speed

• Shared hosting limitations

Lecture: What If I Don't Get 100 PageSpeed Score

Key Message

• Perfect scores aren't necessary: It's not important to chase a 100/100 Google PageSpeed score

• Green score (90+) is sufficient: What really matters is the actual page loading time

• Focus on real-world performance rather than perfect test scores

Benchmark Page Load Times to Aim For

• Cable: 2s first view, 1s repeat view

• 4G: 3s first view, 1.5s repeat view

• 3G: 3.5s first view, 2s repeat view

Common Reasons for Poor Scores

1. Slow hosting

2. Non-optimized theme

3. Poor front-end plugins/scripts

Solutions

1. Hosting Improvements:

   • Switch to VPS or Cloud VPS (e.g., Cloudways)

   • Even $12 plan on Linode/Cloudways is faster than many shared hosts

2. Theme Optimization:

   • Avoid unoptimized drag-and-drop builders

   • If needed, use speed-optimized builders like Divi

   • Consider minimalistic themes without extras

3. Plugin Management:

   • Avoid pop-up scripts/plugins

   • Distinguish between front-end plugins (load for visitors) and back-end plugins (admin only)

   • Remove unnecessary JS/CSS files identified in PageSpeed reports