/ #Web 

Optimizating website performance

Today I tried to optimize my website and learnt more about sitemaps.

Analyzing website performance

I used Google’s PageSpeed Insights tool to understand how I can make my website load faster.

Score on Desktop

Score on Desktop

Score on Mobile :((

Score on Mobile :((

While my website on desktop scored better than on mobile (89 versus 72), considering that most web traffic are served through mobile nowadays it makes sense to prioritise user experience on mobile.

PageSpeed Insights offers concrete suggestions (“opportunities”) and provides links to articles to learn more, by estimated savings in seconds. The opportunities I got were:

  • Serve iamges in next-gen formats (10.65s)
  • Eliminate render-blocking resources (0.24s)

I plan to work on the first point, since it delivers significant savings in loading time.

Understandign next-gen image formats

These “next-gen” image formats refer to JPEG 2000, JPEG XR and WebP, supported by IE, Safari, and Chrome respectively. They are essentially more efficient encodings that allow images (JPEG or PNG) to load faster and to consume less data.

The tricky thing about these next-gen formats are that they are not universally supported across browsers, and fallback images (the old JPEG or PNG) are required in case the next-gen formats fail to load in the client browser. For example, Safari does not support the Chrome-backed format WebP (while Chrome and Firefox do).

Converting images to webp

In my case, I decided to convert all my existing images to WebP using a command-line tool.

The command is actually something as simple as typing the following, without having to install any additional software:

cwebp -q 50 images/flower1.jpg -o images/flower1.webp

with 50 being the quality (0 is the worst and 100 is the best).

And so I ran the following script in folders containing images:

`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

Modifying shortcode to display webp format when available

I referred to this blog to modify my shortcode. Highlight of this exercise is to add the <picture/> and <source srcset=""> tags.

The shortcode might look something like (taken from this post in the Hugo forum):

{{ $base :=  print .Page.Section }}
{{ $path := .Get "src" }}
{{ $url := print $base "/" $path }}
{{ $image := resources.Get $url  }}

{{ $image_ext := path.Ext $image }}    
<br>
<br>
{{ $image_webp := replace $image.Permalink $image_ext ".webp" }}

<p class="{{ .Get "class" }}">
    <picture>
        <source type="image/webp" srcset="{{ $image_webp }}">
        <source type="image/jpeg" srcset="{{ $image.RelPermalink }}">
        <img src="{{ $image.Permalink }}" alt="{{ .Get "title" }}" class="img-fluid {{ .Get "class" }}">
    </picture>
    <span>{{ .Get "title" }}</span>
</p>

Modifying layout for background images

After deploying the above changes, my score didn’t imporve much… due to the fact that most of my loading times come from loading thumbnails in article cards. As the HTML uses background-image to load in article cards, I have to do more than simply modifying my shortcode for <img/> or <figure/>.

Code before modification (excerpt)

<article class="post-card post"> 
    {{if .Params.image}}
    <a class="post-card-image-link" href="{{ .Permalink }}">
      <div class="post-card-image" style="background-image: url({{.Params.image | absURL}})"></div>
    </a>
    {{else}}
    <a class="post-card-image-link" href="{{ .Permalink }}">
      <div class="post-card-image" style="background-image: url({{$.Site.BaseURL}}defimg/{{ index (seq 7 | shuffle) 0 }}.jpg)"></div>
    </a>    
    {{end}}

 ....

Code after modification (excerpt)

<article class="post-card post"> 
    {{if .Params.image}}
      {{ $url := .Params.image }}
      {{ $image_ext := path.Ext $url }}    
      {{ $image_webp := replace $url $image_ext ".webp" }}
    <a class="post-card-image-link" href="{{ .Permalink }}">
      <div class="post-card-image" style="background-image: url({{$image_webp}}), url({{.Params.image | absURL }})"></div>
    </a>
    {{else}}
    <a class="post-card-image-link" href="{{ .Permalink }}">
      <div class="post-card-image" style="background-image: url({{$.Site.BaseURL}}defimg/{{ index (seq 7 | shuffle) 0 }}.webp), url({{$.Site.BaseURL}}defimg/{{ index (seq 7 | shuffle) 0 }}.jpg)"></div>
    </a>    
    {{end}}

 ....

Verifying improvements

Scores, unfortunately, did not improve. I also noticed that scores tend to fluctuate; my mobile score is still in the zone of 58+… not too satisfying.

Moving some of my JS files to CDN (instead of loading them locally) did seem to help with loading time (500ms previously, versus 10-20ms). That said, these are marginal compared to the bottleneck of image loading on the main page…

May work on more ideas.

Author

Admin

Good at daydreaming and procrastinating.

@asia-northeast1