▼測定環境はMacOS Mojave、Chrome バージョン73

以前このサイトとは別に個人でコーディングブログをしていていました。
そのサイトのLighthouseのスコアを満点近くにすることができたので、今回はその時にしたサイトの改善についてお話いたします。

サイトの構成について

まず何を改善したかお話する前にサイトの構成について述べておきます。
私が運営していたサイトはAWSとDjango(PythonのWebフレームワーク)で構築しています。
WordpressやWixの様なCMSは使用していないので、今回のお話は主にhtmlやcssなどの全サイトに共通する部分の改善方法となります。
wordpress特有の改善などについてはまた別記事で書こうと思います!
では本題に入りましょう。

Lighthouseのスコアを改善する方法

https / Http2 / head内タグの整理については今回のスコア改善前にしていましたので、省略しています。

外部cssファイルのインライン化

なのでインライン化して良いcssはstyleタグにインライン化しましょう。

変更前 -------------------------------------------
css/style.css

.example { color: red; }

htmlのhead部分

<head>
    <link href="css/style.css">
</head>

変更後 -------------------------------------------
htmlのhead部分
<head>
    <style>
        .example { color: red; }
    </style>
</head>

インライン化だけでなく、javascriptでページがレンダリングされた後にlinkタグでcssを読み込むようにも出来ます。
しかしページを表示した直後はcssで装飾されていないhtmlむき出しのページが表示されます。 なので、一番はページのファーストビューに使われているCSSのみをインライン化してあげて、 それ以外は他のファイルに書いて、javascriptで読み込むのがベストな方法です。

画像の遅延読み込み

画像の読み込みが一番サイト速度に影響を与えると言われています。
圧縮や画像サイズを適切にするのももちろんですが、画像を遅延して読み込むようにすることで最初のページ表示までの速度を改善することが出来ます。
今回は画像の遅延読み込みができるJavascriptのIntersectionObserverを利用しました。
IntersectionObserverを一言で説明すると「サイト上で現在表示されている画面の位置をずっと監視している警備員さん」です。
画面に画像が表示された瞬間に画像が表示されるようにすることができます。
以下はIntersectionObserverで全てのimgタグの画像を遅延読み込みするときのコードです。

<div id="contents">
    <h1>デモページ</h1>
    <img data-lazy="./website/assets/images/main0_pc.jpg">
    <img data-lazy="./website/assets/images/main1_pc.jpg">
</div>
<script>
document.querySelectorAll("img").forEach(target => {
    const io = new IntersectionObserver((entries, observer)=>{
        entries.forEach( entry => {
            console.log("💩");
            if(entry.isIntersecting){
                const img = entry.target;
                    const src = img.getAttribute('data-lazy');
                    img.setAttribute('src', src);
                    observer.disconnect();
                }
            });
    });
    io.observe(target);
});
</script>
画像の位置に来た時にコンソールで💩が表示していれば、ちゃんと画像遅延が実装されていると思います。
※確認できたらconsole.log("💩");は消してください。

htmlファイルの圧縮

正直htmlファイルの圧縮が一番効果がありました。
すごい当たり前のことを言いますが、ページのレンダリングは当然改行やスペースも読み込まないといけないので、多少たりともページの速度に影響してきます。
なので、いらない改行、スペースは圧縮してファイルをなるべく軽くしてあげましょう。
TM - WebToolsで圧縮をすることができます。
ここからはSEO観点での改善のお話になります。

背景と文字のコントラストの明確化

例えば、「#efefef」は凄く見にくいですよね?
上記の様にページ内で文字が凄く読みずらい部分が何箇所かあって、googleさんに読みにくいんだよ!と怒られました。
そのため背景色に対して使用する文字はコントラストがはっきりした色を使用するようにしました。

aタグにaria-label属性を追加

恥ずかしながらaタグにaria-labelがあることを知りませんでした(恥
文字を書かずにfontawesomeなどのアイコンでaタグを表示している場合、クローリングロボットは「これ、なんのリンク?」となってしまうので、どの様なリンクかをaria-labelに書いてあげる必要があります。

例えばtwitterのリンクをfontawesomeのアイコンで表示する場合は以下の様に書きます。

<a href="twitterのURL" aria-label="twitterのアカウント"><i class="fab fa-twitter"></i></a>

imgタグにalt属性の追加

imgタグにalt属性については多分ほとんどの方が知っていると思いますが、ちょっと怠っていて怒られました笑
これについてもクローリングロボットはなんの画像か分からないので、画像の内容について教えてあげなければいけません。
また何かしらの不具合で画像が表示されなかった時に代わりに表示されるものなので、ユーザーにとっても必須です。

<img src="cat.jpg" alt="可愛い猫の画像">

Webサイトでもカスタマーファーストが重視されていますが、裏ではクローリングファーストも考えていかないといけませんね。

まとめ

Lighthouseのスコア改善でやったことをお話いたしました。
主にcssのインライン化、画像の遅延読み込み、htmlの圧縮、aタグのaria-label属性、imgタグのalt属性についてお話いたしました。
lighthouseの結果が全てでは無いですが、サイトを良くする一つの指標にはなるので改善の価値があると思います。
ここまで読んでくれてありがとうございました。
質問等ありましたらSNSからご連絡ください。
またね✋