Adding image attributes into Theme for improved Pagespeed

I’m using Hugo with the Universal theme running on SSL, Amazon S3, CloudFront, Route53. I’ve followed an excellent detailed guide from David Baumgold to setup & serve SSL from the CloudFront edges taking origin from my S3 buckets for the site https://www.sentencingguidelines.co.uk/.

We’re all supposed to be getting our sites onto SSL. Google Chrome will start to badge non-SLL as Not Secure which will certainly impact page rankings. Government are also promoting this.

Now deployed I’ve been using GTMetrix and Google PageSpeed Insights to identify where I can improve page speed. Both of these tools will give you optimized content which can replace your existing JS, CSS and images.

Both of these tools highlighted missing image attributes for my Universal theme. Edit your themes\hugo-universal-theme\layouts\partials to insert your image attributes height="px" and width="px".
Edit nav.html to fix your logo.png and logo-small.png:

    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand home" href="{{ .Site.BaseURL }}">
                <img src="{{ .Site.BaseURL }}img/logo.png" alt="{{ .Title }} logo" class="hidden-xs hidden-sm" height="72" width="72">
                <img src="{{ .Site.BaseURL }}img/logo-small.png" alt="{{ .Title }} logo" class="visible-xs visible-sm" height="48" width="48">
                <span class="sr-only">{{ .Title }} - {{ i18n "navHome" }}</span>
            </a>

You can also fix some of the carousels including testimonials.html by adding your image attributes HOWEVER all my images must be the same dimensions.

            <ul class="owl-carousel customers">
                {{ range .Site.Data.clients }}
                <li class="item" title="{{ .name }}">
                    {{ if .url }}
                      <a href="{{ .url }}" target="_blank">
                        <img src="{{ .image }}" alt="{{ .name }}" class="img-responsive" height="200" width="150"/>
                      </a>
                    {{ else }}
                      <img src="{{ .image }}" alt="{{ .name }}" class="img-responsive" height="200" width="150"/>
                    {{ end }}

I suggest an enhancement to Hugo where image attributes are included within the generated HTML static site.

I hope this helps anyone working with Hugo on S3 and CloudFront.