🏠 HugoのLighthouseスコアを改善

2020-08-20 /Development #Hugo

この記事は最終更新日から3年以上経過しています。

ふと自分のブログの Lighthouseのスコアはどんなもんかなと思って確認してみたらいくつか減点されていたので修正を入れてみたところページによっては100%が出るようになりました。改善方法は色々なサイトですでに解説されているので、ここでは主に Hugo 対策のメモ。

Hugo用の対策色々

Hugo Markdown Render Hooksでリンクと画像を修正

Markdownでリンクを記述すると a タグには target="_blank" を付けたり rel="noopener" を入れたりができなかったのですが、最近のバージョンだと Hugo Markdown Render Hooks を使用したら自動で入れられるようになったみたい。

こんな感じで入れておきました。

コピーしました
<a href="{{ .Destination | safeURL }}" {{ with .Title }} title="{{ . }}" {{ end }}
  {{ if strings.HasPrefix .Destination "http" }}target="_blank" rel="noopener" {{ end }}>
  {{ .Text }}
</a>

同じようにimgタグにも decoding="async" を追加。

コピーしました
<img src="{{ .Destination | safeURL }}" alt="{{ .PlainText }}" {{ with .PlainText }} title="{{ . }}" {{ end }} decoding="async" />

Syntax Highlightを変更

カラーテーマに monokai を使ってたのですが、コントラストが弱くて減点対象になるようなので github に変更。

$ hugo gen chromastyles --style=github > ./assets/stylesheets/syntax.css

で落としてきて、親のscssにインポートしたのですが、そのままではやはりいくつかのカラーがコントラストが弱いみたいで減点対象に。

他のテーマはどうかと思って Chroma Style Gallery のものをいくつか試してみたけれど、そのままで使えるものはなさそうだったので、結局自分でChromeのツールでAAAになるカラーを調べて修正（漏れがあるかもしれないので、あとは気が付いたら直していきます）。

CSS、JSをhtmlに埋め込んだ

今まではwebpackでstaticフォルダに書き出したcss、jsをヘッダとページの最後で読み込んでたのですが、htmlに直接埋め込むように変更。webpackからは /assets フォルダの中に書き出して、それをこんな感じで埋め込むようにしてみました。

コピーしました
{{ with resources.Get "dist/app.css" }}
<style>
  {{ .Content | safeCSS }}
</style>
{{ end }}

コピーしました
{{ with resources.Get "dist/app.js" }}
<script>
  {{ .Content | safeJS }}
</script>
{{ end }}

若干Performanceが改善されます。

普通の対策色々

小さいリンクに `padding` を追加

Archivesとかのリンク、いらないと思ったものの一応ブログっぽいし入れておこうという理由で設置しているだけなので小さくていいのですが、それだと減点対象らしいので padding を入れて対応。

コピーしました
margin: -0.4rem 0rem;
padding: 0.4rem 0rem;

本文中のテキストリンクとかは何も対応してないので隣接したものがあったら減点されそう…

Bootstrapのバージョンを4から5-alphaに 🐷

ここまでの対応で一通り100点が出たんだけど、さらに軽量化できそうだったのでついでにBootstrapのバージョンをあげておきました。今回はセレクタ名の変更も少なくて簡単に対応できました。

Bootstrapはこのサイトで必要なのかは微妙だけど、utilitiesやgrid周りのクラスは独自の命名で都度作るよりは一般化されているものを使った方が良いと思っているのと、ModalやDropdownは自分で1から書くよりバグが少なくてアクセシビリティが考慮されたものになるし（領域外クリックの挙動やタブでの動作などでも色々気が利いているし）、わざわざ自分では作らずにこっちを使うようにしています。

今までは一括で

コピーしました
@import "~bootstrap/scss/bootstrap";

としていたのだけど、今回は必要なものだけ読むようにしました。ほとんどのサイトでは以下だけあれば十分な気がします。

コピーしました
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/utilities/api";

コピーしました
import { Modal, Dropdown } from "bootstrap";

といいつつ、このサイトでは今のところモーダルもドロップダウンも使っていないので読み込んでおらず、実際にJSを使っている部分は目次のページ内リンクを生成する部分くらい。調べてみたらJSは全部で2K になっていました。

Comment