Website Performance Boosting — Part 1 — Resources

The first part of my PageSpeed guide includes practical examples and useful tools.

Why bother with performance?

As a developer we’re hearing that performance matters all the time… some of you maybe can not hear it anymore. But there are still a lot of advantages you can gain from optimizing your page speed.

Let’s (once again) check the advantages we gain from enhancing performance:

• improved user experience
• better ranking in search engines like Google (SEO)
• improved conversion rate (CRO)
• decreased bounce rate
• longer visits
• better click through rate (CTR)
• reduced hosting costs
• accessibility (slower internet connections/old devices)
• easier maintenance
• reduced energy and carbon emissions
• better company/organization image
• more income through serving more ads
• …

Part one of my “Performance Boosting” guide will focus on resources including some best practices and code samples.

What kind of resources we have:

• images
• scripts
• stylesheets
• fonts
• video
• audio
• iframes

Now let’s start with …

Lazy loading images and iframes

Native lazy loading

Lazy loading is a technique used to load resources only when they are visible in the viewport.

If your project preferences allow it — no need to support antique browsers ;) — you could use the easiest way to lazy load images and iframes by using native lazy loading by HTML attribute.

The attribute “loading“ with the value ”lazy” will activate the native lazy loading for supported browsers:

<img src=”placeholder.jpg” data-src=”your-image-file.jpg” loading=”lazy”>

You can set a placeholder image for all your lazy loaded resources and set the real image path inside a “data-src” attribute. The browser will then switch your placeholder to your image automatically by moving the path from the “data-src” attribute to the “src” attribute.

Can I use native lazy loading?

IntersectionObserver

If you need to support older browsers there is the IntersectionObserver Api which does the magic through JavaScript without any frameworks or libraries — just plain VanillaJS! To fix browsers without support you can add a Polyfill directly from W3C.

The following example shows the general usage of IntersectionObserver including lazy loading images, background-images and a Google Maps component:

Can I use IntersectionObserver?

Keep images from first view screen

Avoiding images on the first visible screen improves Google metrics First Input Delay (FID) and it allows faster viewing of the contents.

Read more about FID in the “Useful links” section at the bottom.

Use inline SVG

Safe requests — high quality is a must

Since inline SVGs don’t cause HTTP requests and are not rendering blocking, the company’s logo — in my opinion — is predestinated to be added as an inline SVG. Even Google wants to keep the first view screen free of images to deliver feedback as fast as possible.

Reference SVG for multiple usage

Multiple usage of SVG icons inside one document can be implemented in a performance improving way by adding an ID to the first occurence of the icon and later referencing to this ID for other usages.

Check the HTML code below:

Use modern image formats

By using the <picture> element with the <source> elements inside you can serve modern image formats for supported browsers and set a fallback in the <img> element.

<picture>
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="">
</picture>

WebP:
A very efficient file format for images
Can I use WebP?

AVIF:
Even more efficient than WebP
Can I use AVIF?

JPEG XL:
Even more efficient than AVIF
Can I use JPEG XL?

Minimize number of HTTP requests

Modern browsers download five files simultaneously, so the next files in queue have to wait, causing longer loading times. By using the HTTP/2 protocol or the experimental SPDY (Apache module by Google) you can activate multiplexing, which means unlimited simultaneous file downloads. Also HTTP/3 is coming… read more about HTTP/3 in the “Useful links” section.

So, by decreasing the amount of files, you can download resources faster and start rendering earlier.

A few things you can do:

• remove all unnecessary requested files (check if there is unused CSS and JS, only include files on subpage where it’s used e.g. calendar plugin used on contact page only)
• combine JS + CSS files (all-styles.css + all-scripts.js)
• combine graphics in sprites and use CSS background positioning (if you need pixel based graphics)
• use an icon webfont for all graphic symbols
• use HTTP/2 multiplexing

Avoid loading JS inside <head>

Move JavaScript files from <head> section right before the closing body tag. By doing this the user is able to see the content of your page before all the JavaScript is loaded and initialized. If you have your JavaScript files inside the <head> your browser will only start rendering after these files are completely downloaded.

…
<script src=”script.min.js”></script>
</body>

Webfont optimization

Avoid webfonts

The first thing you should consider when thinking about using a webfont is: thinking about not using a webfont :)

Downloading and rendering a webfont can cause delays in loading your page.

You can avoid webfonts by using system fonts for different operating systems.

In my example below you can see how medium.com and WordPress use system fonts and an example for font smoothing by anti-aliasing:

Hint:
To be GDPR compliant you should host your webfont on your server locally, if not you will send the IP of the user for example to Google. By not using webfonts you can solve this issue automatically :)

Use “font-display: swap”

If your project preferences do not allow you to remove a web font you should make text visible during rendering.

By using “font-display: swap” you will observe a system font shows in the first moment and after your webfont is fully loaded it will switch to your webfont.

Use webfonts as base64

To avoid the swapping effect by switching from system font to webfont on initial page load, you can also increase performance and avoid layout shifts by converting your webfont to a base64 string and adding it as font-face inside your inline CSS block (<style>) in the <head> section. By using this method there is no need to add the “font-display: swap” rule.

Styling icons with CSS

Icons can now be easily created with CSS. Using the :before and :after pseudo-selectors, symbols like the burger menu icon can be rendered with a single HTML element. The same applies to arrows, closing crosses, etc.

Here you can find an example of a burger menu icon in pure CSS:

Avoid frameworks

Unless it’s absolutely necessary, try to avoid the usage of frameworks like jQuery or Bootstrap. They will cause an overhead by loading the file size and initializing the script. You can now rely on VanillaJS in modern browsers ;)

Avoid JavaScript :)

Try to use server side rendering and CSS instead of JavaScript if possible. Any execution of JavaScript will make your website slower.

Remove unused CSS

If you use a framework like Bootstrap you will have an overhead of CSS rules that are never used. This causes not only an increased loading time of the file, but also an interpretation and attempt to render each rule at every page break. Every selector in your CSS code is searched by the browser in the DOM which blocks the page from loading.

Compress files (gzip, images, guetzli, webp, …)

On the server side you can activate compression for files so they will be served with smaller file size to the browser.

Add this to your .htaccess to compress your ressources (mod_deflate):

# Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent 

Minify JS + CSS + HTML files

Minifing means the removal of whitespace, stripping of comments, combining of files, and optimization/shortening of common programming patterns. You will decrease the file size of your ressources and their download time.

In the “Useful links” section at the bottom you will find some tools to minify your CSS, JS and HTML.

Caching

By caching files in the browser you will serve your page faster to returning visitors. Use efficient cache rules for all used file types.

Activate Expires Header Caching by adding these lines to your .htaccess:

## EXPIRES HEADER CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

## EXPIRES HEADER CACHING ##

Activate Expires Header Caching on Nginx:

    location ~*  \.(jpg|jpeg|gif|png|svg)$ {
        expires 365d;
    }

    location ~*  \.(pdf|css|html|js|swf)$ {
        expires 2d;
    }

Useful links

Web Vitals: measure page performance

Web Vitals

WebPageTest: measure page performance

WebPageTest

GTmetrix: measure page perfromance

GTmetrix | Website Performance Testing and Monitoring

TinyPNG: compress your WebP, PNG and JPEG files

TinyPNG - Compress WebP, PNG and JPEG images intelligently

First Input Delay

First Input Delay (FID)

More information about browser caching:

Cache-Control — HTTP | MDN

HTML minifier:

GitHub — kangax/html-minifier: Javascript-based HTML compressor/minifier (with Node.js support)

JS + CSS minifier:

Minify JS and CSS online, or include the minifier in your project for on-the-fly compression.

CSS minifier:

GitHub — cssnano/cssnano: A modular minifier, built on top of the PostCSS ecosystem.

JS minifier:

GitHub — mishoo/UglifyJS: JavaScript parser / mangler / compressor / beautifier toolkit

Image file format: WebP

An image format for the Web | WebP | Google Developers

CSS Sprites

CSS Sprites: What They Are, Why They're Cool, and How To Use Them | CSS-Tricks

Icon font generator: Fontello

Fontello - icon fonts generator

What is HTTP/2?

Introduction to HTTP/2

What is HTTP/3?

https://www.cloudflare.com/en-gb/learning/performance/what-is-http3/

So, what’s next?

In part two of my PageSpeed guide I will focus all around improvements on rendering of the CSSOM and DOM such as Critical CSS, repaints, reflows, layout shifts, Shadow DOM, documentFragment, efficient selectors and GPU powered animations.

Stay tuned…