Optimize web page loading

Resources

• Google Chrome LightHouse Extension: Google Chrome extension which mesure a score for performance, accessibility, best practices, SEO, and progressive web app (PWA).

Performance

• Google PageSpeed Insights: Web page load time with recommendations to improve your score
• Web Page Test: overall web page load time with scores, details, filmstrip view of your website during loading, etc.

Security

• Qualys TestSSL: One of the best SSL/TLS analyzer
• SecurityHeaders: Check the HTTP headers sent by your server

Accessibility

A checklist: https://design-accessible.fr/checklist

Protocols Support

• https://ywo.fr/test_url.php: my own tester (HTTP/2, Brotli, GZip, IPv6, etc. and links to other tools).

Free illustrations

• https://undraw.co/illustrations

Compress JPG and PNG Images

Use this script: optimize-img

Example:

find . -type f -exec file -i {} \; | grep image | cut -d: -f 1 | xargs ~/tools/miSCripts/optimize-img

Optimize JavaScript

Use vanilla JavaScript instead of jQuery

• https://flaviocopes.com/jquery/
• https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/

Lightweight JavaScript frameworks

Use a light framework such as svelte instead of jQuery, the full Bootstrap, etc. It embeds only the part you add at compile time, instead of loading the full framework at each visit of your website.

Minify JavaScript

uglifyjs -o agency.min.js agency.js

Optimize CSS

Lightweight CSS frameworks

Use a light framework such as Knacss instead of a full bootstrap.

Minify CSS files

yui-compressor agency.used.css -o agency.used.min.css

Apache Configuration

Enable Caching in Browser

Enable the expires module:

sudo a2enmod expires
sudo systemctl restart apache2

Add this configuration to the virtualhost:

<IfModule mod_expires.c>
    <FilesMatch "\.(jpe?g|png|gif|js|css|woff2)$">
        ExpiresActive On
        ExpiresDefault "access plus 1 month"
    </FilesMatch>
</IfModule>

WordPress extension

• WP Fastest Cache: optimize the cache policy (must enable it in the extension settings)
• WebP Converter for Media: Automatically convert image to WebP format

Enable CloudFlare

Using the (free) CloudFlare service will automatically cache your website. To be continued.