HOW TO IMPROVE PERFORMANCE OF WEBSITE

UPDATED ON: 2023-11-04

Nothing complex here, at least at this time.
Here i’ll accumulate performance related information.

░▒▓ LAZY LOADING OF IMAGES ▓▒░

Just implemented lazy loading at my main index page.
Concept is pretty simple you are loading images only when they appearing in the viewport of the browser.
All you need to do is just to apply loading=“lazy” to the classes of loaded images.

<img loading="lazy" src="/img/demo./png" alt="Picture">

In my case it was like this:

<img loading="lazy" src="{{ .Params.thumbnail | relURL }}" alt="{{ .Title }}">

░▒▓ PRELOADING FONTS ▓▒░

If you are using custom fonts, they should be loaded at first place, to maintain consistency of page.

Can be done by adding rel=“preload” line to loaded CSS file.

<link rel="stylesheet" rel="preload" href="styles.css">

In my case it was like this:

<link rel="stylesheet" rel="preload" href="{{ $style.RelPermalink }}">

And don’t forget to use WOFF2 fonts, because of a really small size.

░▒▓ MINIFYING CSS STYLES ▓▒░

When uploading site to the hosting always minify [optimize] CSS and Js code to improve loadind times of website.

GENERIC CSS CODE

@font-face {
    font-family: 'amiga_topaz_unicode_rusRg';
    src: url('/fonts/amiga-webfont.woff2') format('woff2'),
 	 url('/fonts/amiga-webfont.woff') format('woff');
    font-size: 18px;
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'MisterGiacco-Bold';
    src: url('/fonts/MisterGiacco-Bold.woff2') format('woff2'),
         url('/fonts/MisterGiacco-Bold.woff') format('woff');
    font-size: 18px;

}

OPTIMIZED/MINIFIED CSS CODE

@font-face {font-family: 'amiga_topaz_unicode_rusRg';src: url('/fonts/amiga-webfont.woff2') format('woff2'), url('/fonts/amiga-webfont.woff') format('woff');font-size: 18px;font-weight: normal;font-style: normal;}@font-face {font-family: 'MisterGiacco-Bold';src: url('/fonts/MisterGiacco-Bold.woff2') format('woff2'), url('/fonts/MisterGiacco-Bold.woff') format('woff');font-size: 18px;}@font-face .... 

Neat tool to use: [CSS BEAUTIFIER].
Utility formats your CSS code, makes it minified or more readable if you want to.

░▒▓ OPTIMIZE YOUR IMAGES ▓▒░

Always optimize images in graphical editor by internal tools or if your are passionate enough do external optimization also.

[Excellent utils] to optimize PNGs and animated GIFs.
Also check the GRAPHICS & SVG sections of my [collection of links].

░▒▓ ANOTHER TRICK ▓▒░

…
…
…
…

░▒▓ PROPER LINKS ▓▒░

[CSS-Tricks] ► nice site to acquire optimization knowledge.

[ESSENTIAL FRONTEND DEVELOPER LINKS] may come in handy too.