Fast Static Page

How to score a perfect 100 percent on Google PageSpeed Insights?

After the rumor started in 2013 Google will add mobile-friendliness as a page experience signal in a few days. A long debate on “Does page speed correlate with page rank?” exists. Even page speed might not be correlated with rank, conversion seems to be. Slow pages might feel like slow IT support, just not appealing. Due to the SEO update by Google we updated our homepage.

The code of this post is available on GitLab.

PS: This is our first post on the revised homepage. Feel free to add any feedback to our HackerNews Post.

How was our Jekyll setup on GitLab Pages?

Let me summarize the status quo before we began the optimization:

• We had no contact form
• We did not use the concept of pages in a multilanguage setup
• Individual images on the page were as big as 3 MB
• we used the full bundle of minified Bootstrap files
• the page was optimized for mobile already

This resulted in a Google PageSpeed Score of 51.

How to improve website speed

1 of 4: Images

The most trivial action included removing any large image or lazy load it via Lazysize. Most of the images were rather optional. Funnly enough, our largest image was a picture of our CEO and Dr. Klaus-Peter Röhler, a member of the board at Allianz SE, with more than 3 MB.

<img data-src="/img/roehler_at_dia.jpg" src="/img/roehler_at_dia_small.png" class="lazyload" alt="Dr. Klaus-Peter Röhler at DIA 2019"/>

However, any further action was even more powerful.

2 of 4 : Minify CSS, HTML and Javascript with jekyll-minifier

Make sure to support es6 by adding the following to your _config.yml:

jekyll-minifier:
  uglifier_args:
    harmony: true

Jekyll-minifier is still using a production variable. This might change according to the issue 55.

JEKYLL_ENV=production jekyll build -d public

It minifies HTML, XML, CSS, JSON and JavaScript both inline and as separate files utilising yui-compressor and htmlcompressor. Also all HTML, JSS and CSS comments will be removed. Below you can find the defaults which are activated per default.

  remove_spaces_inside_tags: true   # Default: true
  remove_multi_spaces: true         # Default: true
  remove_comments: true             # Default: true
  compress_css: true                # Default: true
  compress_javascript: true         # Default: true
  compress_json: true               # Default: true
  uglifier_args:                    # harmony

This resulted in a minified homepage, see on the right.

3 of 4: Use Gzip on Gitlab Pages

If you provide a gz version, GitLab Pages will use the Gzip version. I did not find an official documentation, but a great guide by Christian Danscheid. To summarize, just add the following to your GitLab CI script.

&& gzip -k -6 $(find public -type f)

4 of 4: Customize your Bootstrap to improve page speed

Make sure to customize Bootstrap. Exclude any element you homepage does not require. Our old homepage used Bootstrap 3, so there was a page getbootstrap.com to do so.

Add-on: Add a Sitemap.xml to a multilanguage Jekyll page

It was pretty hard to find a sitemap generator for multilanguage jekyll pages. Even the plugin jekyll-sitemap has marked those feature requests as wontfix in the past. This was the reason to combine the idea by Independent Sortware from Maputo, Mozambique with the namespace idea descriped in the Jekyll Multiple Languages Plugin. Make sure to include the urlset attributes so you can use xhtml:link tags. As this might be difficult to find, I link to Stackoverflow post.

Congratulations!

You should have reached a Google PageSpeed Insights Score close to 100! Also GTmetrix might grade your page A.

Why do we write about page optimization?

On working days, we focus on Computer Vision, NLP, and AI DevOps for enterprises. As we saw a growing interest in the topics we are working on, we updated our homepage and began writing posts. We accomplished our aim to reach 100 %. Even speed is not the only element our homepage is now well prepared.