【チェックリストあり】PageSpeedInsightsで表示スピードを改善

コーダーでフリーランスをしているmasashiです。

僕自身駆け出しコーダーの時に悩んでいたのが、サイトは作れるけどなんで表示スピードが遅いんやろ？ということでした。

特にWordPessで構築をするともっとスピードが落ちる感じ。「まぁWordPressは表示速度遅いっていうし、しょうがないよな…」て思ってました。

ある日WordPressって本当に遅いんかな？と思って、WordPressインストールして真っ新な状態でpageSpeedInsightsで計測してみたんですよ。すると普通に100点でした。

その時思いました。「結局、後から色々と重い処理を入れてるから遅くなるんだな。WordPressだからとか関係ないやん…」っと。

結局、原因は自分のコードや構築方法でした。

サイトを作って運用していこうとするお客さんにそもそもSEOで不利なサイトをお渡しするのはプロとして恥ずかしいですよね。

コーダーをしていてまだページスピード改善方法を理解していない人はこのページをブックマークして何度も見返しながらキッチリとマスターしていってくださいね。

今回の内容はこちらになります ↓↓↓↓

サイト表示スピードで悩んでるなら今が学習するタイミング

そもそもですが、HTMLやCSSの学習を学びながら、並行してサイト表示スピード改善を学ぶのはそもそも無理です。

僕自身もサイトスピード改善を学習するまでは、HTMLCSS、WordPress、PHP、JavaScriptなどを学んでから、サイト表示スピードが遅いことに気づき、お客さんに表示スピードを改善をして！と修正をいわれたことがきっかけで学んでいきました。

段階があると思うのですが、今現在サイト表示スピードが遅くて悩んでいるなら学習するタイミングだと思います。

僕もWordPressを学んでからお仕事をいただいているうちにサイトスピードが遅いのに気づき始めて、別に誰に習ったわけでもなくただPageSpeedInsightsの言うとおりに作業していっただけです。

実はPageSpeedInsightsで計測するとただ点数を表示するだけではなくこの部分が重いのが原因ですよ。と表示してくれています。

初めはPageSpeedInsightsの点数にだけ注目すればいい

先ほどPageSpeedInsightsに重くなる原因が書いてあると言ったんですが、僕もそうだったんですが専門用語で書かれすぎていて初めは全然わからんと思います。

なので初めは点数にだけ注目しておいて、下にページスピード改善のチェックリストを用意していますので、それを使いながらサイトを改善していき、点数が上がっているかを見ていきましょう。

ページ表示スピードの改善をやっていくとみるみる点数が上がっていくので実はやってるうちに楽しくなっていきます。

なので気楽な気持ちでチェックリストを見ていきましょう。

サイト表示スピード改善はチェックリストをやればOK！

それではページスピード改善のチェックリストをみていきます。ちなみに上から重要度高い順に書いてますので上からやるとすぐに点数が良くなります。

ぶっちゃけ上から2つをやればガッと点数が上がります。そんだけ上の二つがサイトを重くしています。

項目が多いと思いますがやれる範囲でいいと思います。中にはJSやSASSなどのスキルが必要なものもありますので、とりあえず出来るところから始めてもらっても大丈夫です。

次は各項目の解説をわかりやすく書いていきたいと思います。

ページスピード改善の具体的な方法を項目ごとに解説します

それでは、チェックリストの上から順に改善方法を解説していきますね。

画像を極力圧縮して軽くし、スマホ、タブレット、PCで画像を差し替える(pictureタグやimgタグで複数の画像を一気に読み込む）

ここめっちゃ重要な項目です。

なぜ一枚の画像では重くなるのかというと仮にPC用の画像を1枚表示していたとして、それをそのままスマホで表示すると明らかオーバーサイズですよね。

スマホではスマホサイズの画像を読み込むようなスペックになってるので、PCサイズの画像をスマホで読み込むと極端にスマホの表示スピードが落ちます。

なので、デバイスごとに画像サイズが違う画像を読み込むことが必要です。

「PC、タブレット、スマホの画像を用意するの大変だよ…」

と思った人も多いと思います。もしそんなに手間暇をかけれないのならPCとスマホだけでも画像を切り替えるようにしておきましょう。タブレット人口はそんなに多くないのでそれでも効果は十分あります。

スマホでPC用の大きな画像を読み込むと極端にスマホの表示スピードが落ちる。

画像の圧縮をマスターしよう

まずは画像の圧縮ですが、この２つのツールがあれば十分です。

SquooshはGoogleが開発した圧縮ツールで、MozJPEGとwebpに変換できます。
jpg画像はMozJPEGに変換しましょう（MozJPEGは普通にjpgとして使えて圧縮率が全然違います）。

webpは透過できてpngよりもさらに約26%圧縮できます(webpはバージョンが古いブラウザが対応できてないのでバックアップ画像を一緒に設置します。この後解説）。

tinyPNGはpng画像の圧縮率がダントツなのでpngの圧縮はこれ一択で大丈夫です。

webpとpngの使い分けはpngで圧縮しても重い場合はwebpにしますね。僕の感覚ですがPCだったら100KBを超える場合、スマホだったら50KBを超える場合はwebpにします。

サイトに入れる画像のサイズを知ろう

基本的に画像を綺麗に見せるならデザインの画像サイズの2倍で書き出します。PCで横幅700pxの画像なら1400pxで書き出す感じ。画像が小さいと画像が荒くなってダサい見た目になってしまいます。

2倍サイズで重いなら1.8倍でもいいかもですが、画像の荒さは注意しましょう。

こうやって書いてみると画像一つとってみても深いですね。

デバイスの画像の出し分け

今から書く画像の出し分けのテクニックですがマジで重要で、たぶん一度では覚えられないと思うので、ブックマークして何度も確認しておけるようにしておきましょう。

僕が調べた感じでは詳しく書かれているサイトはあまり無く、僕のサイトが一番わかりやすいです。

CSSでデバイスごとに画像を出し分けてもいいんですが、めんどくさいのでHTMLタグだけでレスポンシブできるpictureタグとimgタグを使っていきましょう。

pictureタグとimgタグの使い分けは、

まずはpictureタグでwebpを使う方法をみていきます。

pictureタグでレスポンシブする方法

pictureタグを使ったwebpの設置の見本コード。

<picture>
　 <!-- PC用画像 -->
  <source srcset="test-pc.webp" media="(min-width: 601px)" type="image/webp">
　 <!-- スマホ用画像 -->
  <source srcset="test-sp.webp" media="(max-width: 600px)" type="image/webp">
   <!-- バックアップ用画像 -->
　<img src="test-backup.jpg" alt="" class="responsive__img">　<!-- クラスはimgタグのみでOK -->
</picture>

pictureタグを作ってその中にsourceタグとimgタグを入れています。目につくのがmedia属性とtype属性とsrcset属性です。

sourceタグで使えるmedia属性でmin-widthとmax-widthが使えてレスポンシブで画像を切り替えることができます。

webpの場合だけtype属性で拡張子(type="image/webp")を登録します。

srcset属性はsourceタグのみで使い、レスポンシブ用の画像のパスを入れてください。

３つ目のimgタグはバックアップ画像を入れる用です。webpの対応していないブラウザではこの３つ目のimgタグが自動で画像を出してくれます。

クラスを付ける場合はimgタグにのみで大丈夫です。

picturタグの中身は書く順番に注意してください。なぜなら上からサーチしていき条件に合致した画像を出力するからです。必ずPC用画像→ SP用画像 → バックアップ用画像の順に並べましょう。

pictureタグでPCとSPで形の違う画像を入れる方法

pictureタグでPCとSP画像で形の違う画像を入れる場合はまた書き方が変わってきます。

<picture>
　 <!-- PC用画像 -->
  <source srcset="test001-pc.webp" media="(min-width: 601px)" type="image/webp">
　 <!-- スマホ用画像 -->
  <source srcset="test002-sp.webp" media="(max-width: 600px)" type="image/webp">
   <!-- バックアップ用画像 -->
　<img srcset="test002-sp.webp 600w, test001-pc.webp" sizes="100vw" alt="" class="responsive__img">
</picture>

PCとSP画像で形の違う画像を入れる場合はimgタグのバックアップ画像も２つ設定しないといけなくなります。バックアップ画像の複数指定はsrcset属性を使用して、画像のパスの後ろに今の例なら「600w」と指定します。

imgタグに複数画像を設置する時は「w」の単位を使い、wの単位はビューポートの幅を表してます。

600wと指定するとビューポート幅600以下はこの画像ということになります。

次の画像のパスの方はwを付けてないですが、wを付けないと後の600以上はこの画像を指定するよということになります。

バックアップ用のimgタグですが、src属性がないことにお気づきだと思うのですが、基本的に形の違う画像のレスポンシブの時はsrcsetのみで大丈夫ですので、src属性は無くても大丈夫です。

1つ注意点が、imgタグにsrcset属性を使用した時はsizes属性を入れないといけなくなります。もし忘れててもsizes属性が無いとレスポンシブされなくなるのですぐに気づくと思いますが…

現在のsizes属性は「100w」で両方ともの画像が画面幅一杯の設定ですので一つだけですが、レスポンシブで画像の横幅が変わるならメディアクエリを設定できます。例えばこんな感じ。

<picture>
　 <!-- PC用画像 -->
  <source srcset="test001-pc.webp" media="(min-width: 601px)" type="image/webp">
　 <!-- スマホ用画像 -->
  <source srcset="test002-sp.webp" media="(max-width: 600px)" type="image/webp">
   <!-- バックアップ用画像・レスポンシブで横幅が変わる場合 -->
　<img srcset="test002-sp.jpg 600w, test001-pc.jpg" sizes="(max-width: 600px) 80vw, (min-width: 769px) 100vw" alt="" class="responsive__img">
</picture>

max-widthやmin-widthを使っていき、コンマ半角スペースで区切ります。

sizes属性の単位はvw、px、emが使えますが、%は使えないので注意してください。

pictureタグはIEは非対応です。案件で使用する場合はまずはIEに対応が必要か？を確認してからpictureタグを使うようにしましょう。

IEはサポートが終わったので対応して欲しいというのはあまり無いかもしれませんね。

以上pictureタグの使い方でした。パターンがあるので少し長くなりしたが使いながら覚えていきましょう。

imgタグのみでレスポンシブ

imgタグのレスポンシブは結構限定的で、webpを使わない場合、形が一緒の画像をレスポンシブする場合という条件の時に使用できます。まずは例からみていきます。

<img src="test-bu.jpg" srcset="
test-sp.jpg 600w, 
test-tab.jpg 900w, 
test-pc.jpg
" sizes="
(max-width: 600px) 80vw, 
(max-width: 900px) 90vw,
100vw
" alt="" >

imgタグで３つの画像をレスポンシブで設定してみました。こうやって改行すると見やすいのおすすめです。

上からみていくと、1つ目の画像はビューポート幅600w以下で、2つ目の画像ビューポート幅900w以下、３つ目画像はビューポート幅901w以上になります。

imgタグもsrcset属性を使うとsizes属性が必要になります。３つ目の100vwはmin-widthを使わないと、それ以上ということになります。

こちらwとvwがごっちゃになりそうですね。srcset属性がwで指定ですね。

ちなみにですが、background-imageでのwebpの設定方法もみていきます。

background-imageでwebpを使う方法

webpは古いブラウザでは表示しないこともありバックアップ用の画像を設置しておくのですが、background-imageでの背景画像の設置はどうしたらいいでしょうか？

実はめっちゃ便利なjsプラグイン「modernizr」があります。なんて読むのか全然わかりません。
modernizr

開くとこのような画面になればOKです。「Add your detects」をクリックして進みます。

この画面で「Webp」を探します。プラスマークをクリックします。（プラスマークをクリックしないとダウンロードできないので注意）

Webpをクリックできたら「BUILD」をクリックします。

この画面になったら右上の「Download」をクリックします。すると「modernizr-custom.js」がダウンロードできるので、それをWEBサイトに入れて読み込みます。

読み込むとこんな感じになります。

そして、ブラウザのデベロッパーツールが開くと、headタグにクラスが付加されます。

HTMLタグにwebpなどのクラスが付加されているのがわかります。webp対応できてないブラウザでは「no-webp」が付くらしい。

.no-webp body {
    background-image: url('/img/test.jpg');
    background-size: cover;
    height: 500px;
}

.webp body {
    background-image: url('/img/test.webp');
    background-size: cover;
    height: 500px;
}

なので、このようにCSSを設定しておくとブラウザによって勝手に切り替わってくれますのでオススメ。

次は日本語フォントの改善をみていきましょう。

日本語フォントはダウンロードして圧縮しよう

Webサイトで画像の次に重いのがフォントになります。

読み込みのフォントをチェックしよう

まずは現在読み込んでいるフォントの種類、font-weightをチェックして無駄なフォント、font-weightがあれば削除します。意外ととりあえず全てのfont-weightを読み込んでおこう。としていて削除を忘れていることがあるんですよね。

それが終われば、次は日本語フォントをチェックしていきます。

日本語フォントはサブセットフォントメーカーで圧縮する

フォントはGoogle FontsやAdobe Fontsなどから直接読み込んだりすると思うんですが、Google Fontsから直接読み込むとかなり重いです。特に日本語フォントはめっちゃ重いので、日本語フォントはダウンロードして圧縮します。

まずはダウンロードですが、Adobe Fontsのダウンロードはライセンスに引っかかるんですが、Google Fontsは大丈夫なので、Google Fontsからまずはダウンロードしていきます。

Google Fontsで検索して、Google Fontsの検索でnoto sans jpと検索しましょう。

するとこのような画面になるので、右上の「Download family」をクリックするとフォントをダウンロードできます。

それを開くと全てのfont-familyが入っていますね。

このフォントの重さをみてみましょう。4MB以上の重さになり、このまま読み込んだらめっちゃ重いのでこれを圧縮していきます。

フォント圧縮に必要なツールはこちら。

この２つのツールを連携させて圧縮します。

「サブセットフォントメーカー」で検索してください。

武蔵システムさんのフリーソフトです。

開いたら、このような画面でしたらOKです。

一番下にスクロールしていくと、デバイスに合わせたダウンロードリンクがあります。ここからサブセットフォントメーカーをインストールしてください。

「サブセットフォントメーカー」をダウンロードできたら、次はWOFFコンバータをインストールしていきます。

「サブセットフォントメーカー」のページの中盤にある「概要」の項目にWOFFコンバータのインストールリンクがあります。

これでフォントを圧縮するツールを全てインストールできたので、実際に圧縮してみましょう。サブセットフォントメーカーを立ち上げます。

「作成開始」をクリックすると、自動的にWOFFコンバータが起動します。

WOFFコンバータでは「変換開始」をクリックするだけです。EOTはIEの古いブラウザに対応する拡張子ですが一応チェックを付けてます。

「EOTに対応していません。」の表示でOKをクリックしてしばらく待ちます。変換が終わったら先ほど指定したフォルダをみてみましょう。

otf、woff、woff2を出力してくれてます。先ほど4MB以上あったのが510KBまで圧縮できてますね。

woff2が一番読み込みが速いので、woff2を読み込むように設定します。

これで「Noto Sans JP Bold」の圧縮が完了しました。ちなみにフォントウェイトはそれぞれ一つずつしか圧縮出来ません。

フォントウェイトは1種類ずつしか圧縮出来ない。Noto Sans JPのレギュラーとミディアムが欲しいなら2回圧縮する必要がある。

次はこの圧縮したフォントを読み込んでみましょう。

圧縮したフォントファイルは@font-faceで読み込む

圧縮したフォントファイルはCSSの@font-faceという機能を使ってWEBページに読み込みます。

まずは圧縮したフォントファイルをWEBサイトにfontsフォルダを作ってそこに移動させます。

このようにindex.htmlと同じ階層にfontsファイルを作っておくとパスを付けるのがわかりやすいです。

そしてstyle.cssファイルで@font-faceを使います。

@font-faceはちょっと書き方に癖があるんですが、要は@font-faceを使うとパスでフォントファイルに接続できるんですね。一応コピペ用にも貼っておきます。

@font-face {
    font-family: my-font001;
    src: url('/fonts/Noto-Sans-JP-B.woff2') format('woff2'),
    url('/fonts/Noto-Sans-JP-B.woff') format('woff');
}

h1 {
    font-family: my-font001;
}

@font-faceの中身はまずfont-familyでフォントの名前を好きな名前に決めます。今回で言うと「my-font001」と決めました。

次に「src: url()」でパスを入れていきます。style.cssからの相対パスで書くので、/fonts/から始めましょう。そして半角開けて「format()」を入れます。こちらは読み込む拡張子を指定するのですが、他の拡張子の場合はリファレンスを見ると書いてあります。指定する拡張子に合わせて記入します。

url()のパスは相対パスでCSSファイルからfontsファイルまでのパスを書く

woff2とwoffを読み込んでますが、一応2つとも書いておけばいいです。そして読み込んで欲しい順に書きます。woff2が一番軽いのでwoff2から読み込みます。woffとwoff2だけで大概どんなブラウザでも表示できるので、コチラの2つを読み込みました。

もう使えるので、どこかにHTMLに付けてみましょう。

デベロッパーツールを開いて計算済みをクリックしてから右ウインドウをスクロールして一番下に読み込みフォントが表示されるので、ここが圧縮したフォント名になっていたら成功です。

長い道のりでしたが、慣れれば簡単に出来ますのでトライしてみてください。

imgタグに「loading="lazy"」属性を付ける（画像の遅延読み込み）

ページスピード施策の中でこの項目が一番簡単なのが、imgタグにloading="lazy"を付けるです！！

通常はページを表示しようと、表示するページの画像を全て読み込まないと表示しない仕様になっていますが、こちらのloading="lazy"をimgタグに付けるだけで、ページを表示する時の始めに表示される部分（ファーストビュー）だけの画像の読み込みをして表示してくれます。残りの画像はスクロールするたびに順々に読み込んでいきます。

ファーストビューの画像のみを読み込んで表示するので通常よりもだいぶ速く読み込めるようになります。

注意点は、ファーストビューの画像にはloading="lazy"を指定しないようにしましょう。ファーストビューとはサイトが表示される最初の表示部分のことです。

ファーストビュー部分にloading="lazy"を付けるとの画像の表示が遅くなることがあるらしいです。

書き方を書いておきます

<img src="img/test.jpg" alt="" loading="lazy">

このようにimgタグに追加するだけなので、非常に簡単です。

ファーストビューの画像にはloading="lazy"を設置しないようにしましょう。

loading属性設置前の点数。

loading属性を設定後。

loading属性はかなり効果が高いので、ぜひ設置してみましょう！！

CDNを使ってJSファイルなどを読み込んでるなら、ファイルをダウンロードして読み込むように切り替える

何のことをいっているかというと、よくJavaScriptのライブラリを読み込むのに「CDNを利用する」というのが書いてませんでしょうか？

CDNとは「インターネット経由でファイルを配信する仕組み」と書いてあります。つまりネット通信で必要なコードを取得する方法のことをCDNといいます。

よくみればわかるのですが、scriptタグの中にhttps://から始まるパスが書いてあればCDNですね。

webサイトのファイルを取り寄せるネット通信をして、さらにそのファイルの中に書いてあるURLからコードを取り寄せる通信をすることになるのでダブルの通信になるので遅くなります。

ネットからコードを取り寄せるのではなく、コードをダウンロードしておいて、Webサイトのファイル内に設置しておきましょう。

JSのスライダーライブラリのSwiper.jsでファイルダウンロードして設置してみます。

Swiper.jsはCSSファイルとJSファイルがあるので、公式サイトからダウンロードして、Webサイトのファイル内にアップロードして読み込みます。

これCDNでも出来ますが、ファイルダウンロードですると余計な通信を減らせます。

CSSの遅延読み込みを設定する

CSSの遅延読み込みとは、先ほど画像の遅延読み込みを解説しましたが、CSSでもファーストビュー以外のCSSは遅延で読み込もう！という話です。

実はCSSを全て読み込まないとWEBサイトは表示されません。

pageSpeedInsightsで「レンダリングを妨げるリソースの除外」という項目が表示されていて、ここでCSSファイルで何秒もロスしているなら、CSSの遅延読み込みをする価値があります！

「JavaScriptやCSSをインラインで配信」のインラインとはHTMLに直接styleタグで書き込むことをインラインといいます。

最近のWEBサイトのCSSのコード量はかなりの量になってきます。このCSSがボトルネックになってサイト表示スピードが遅くなることがよくあります。そういうときはCSSを遅延読み込みにしてしまいましょう。

CSS遅延読み込みに必要なツールはこちら。

このツールにサイトURLとCSSをぶちこむとファーストビューのCSSを特定して、圧縮したCSSを出力してくれます。

手順はこちら。

トップページならトップページの全てのCSSを入れて特定します。ボタンをクリックすると圧縮済みのCSSが出力さsれます。

圧縮済みのCSSが出力されるのでコピーします。

圧縮済みのCSSをheadタグ内にstyleタグを作ってその中にペーストします。

CSS読み込みのlinkタグよりも前にstyleタグを設置します。headタグ内にstyleタグを入れてそこにCSSを置くことをインライン化といいます。

次はCSS読み込みのlinkタグを変更します。

rel属性の値を「rel="preload"」に変更して、linkタグの最後に「as="style"」を付けます。

<link rel="preload" href="css/style.css" as="style" />

linkタグをこのように変更しました。これでCSSの遅延読み込みは完了になります！

意外と簡単でしたね。

この書き方はIEは非対応なので、もしIEに対応したい場合はこちら。

追記する場所に番号を振ってあります。

一応コピペ用に貼っておきますね。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>


    <style>
      /* ここに貼り付ける */
      .p-global-nav .menu-item-3899>a{color:rgb(15 108 186)}.l-body--right-sidebar .wp-oembed-blog-card__title{font-family:sans-serif;font-size:20px;font-weight:800;color:#6495ed}@media (min-width:64em){.c-container{max-width:100%}}
    </style>

    <!-- rel属性の値を rel="preload"にして、as="style"をつける -->
    <link rel="preload" href="css/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
    <!-- ②noscriptを付加する -->
    <noscript><link rel="stylesheet" href="css/style.css"></noscript>


    <!-- Swiper.jsのcss読み込み -->
    <link rel="stylesheet" href="css/swiper.min.css" />
 
    <!-- ③scriptを追加 -->
    <script>
      /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
      (function( w ){
      "use strict";
      // rel=preload support test
      if( !w.loadCSS ){
      w.loadCSS = function(){};
      }
      });
    </script>

  </head>
  <body>
    <h1>フォント読み込みのテストです</h1>

    <!-- Swiper.jsのjs読み込み -->
    <script src="js/swiper.min.js"></script>
    <script src="js/index.js"></script>

  </body>
</html>

こちらを各ページでやっていってください。

background-imageで背景画像を遅延読み込みにする

imgタグはloading="lazy"属性を付けると遅延読み込みが簡単にできるんですが、background-imageは付けれません。

少し手間ですが、JSのintersectionObserverという技術を使って再現していきます。

まずはこのscriptをbody閉じタグの手前に貼り付けます。

<script>
document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages;    

  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll(".bg-lazy");
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.classList.remove("bg-lazy");
          imageObserver.unobserve(image);
        }
      });
    });

    lazyloadImages.forEach(function(image) {
      imageObserver.observe(image);
    });
  } else {  
    var lazyloadThrottleTimeout;
    lazyloadImages = document.querySelectorAll(".bg-lazy");
    
    function lazyload () {
      if(lazyloadThrottleTimeout) {
        clearTimeout(lazyloadThrottleTimeout);
      }    

      lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('bg-lazy');
            }
        });
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
      }, 20);
    }

    document.addEventListener("scroll", lazyload);
    window.addEventListener("resize", lazyload);
    window.addEventListener("orientationChange", lazyload);
  }
})

</script>

このscriptの内容はintersectionObserverが対応しているブラウザならintersectionObserverを使い、対応していないならscrollイベントで対応しよう！という内容になります。

このコードの内容の解説はすいませんが端折らせてください。時間があればJavaScriptを解読しながら遊んでみてください。

CSSを追記します。

section {
    background-image: url('/img/test.jpg');
    background-size: cover;
    height: 500px;
}

section.bg-lazy {
   background-image: none!important;
}

例えば、sectionタグにbackground-imageを付けていて、デフォルトでbackground-image: none;にしていて、スクロールしていってsectionに近づくと、bg-lazyのクラスを外して表示するという仕様になります。

基本はbackground-imageに画像を設定していないので、遅延読み込みになります。

CSSファイルとJSファイルの圧縮をする

CSSファイルやJSファイルなどは無駄なインデント（改行）が入っているのでインデントを省いてしまうことでファイルの読み込みを速くしようという対策です。

ホームページぐらいのページ数だと、CSS、JSの量も大したことがなくそんなに効果が出ないかもですが、もし大きな案件を対応することになったら効果を期待できるので、やり方を知っておくといいかもです。

前提条件でnode.jsとnpmをローカルPCにインストールしていることが必要です。

前提条件でnode.jsとnpmをご自身のPCにインストールしていることが必要

Node.jsとはWebページ作成などの際に使われるJavaScriptを、サーバー側で動作させるプラットフォームです。Node.jsについて理解するためには、あらかじめJavaScriptの概要や特徴について知っておく必要があります。

npm とはNode.jsのパッケージを管理するシステム、所謂パッケージ管理システムです。アプリケーションを作成する際、便利なパッケージをそのプロジェクトにインストールして、使用することができます。

npmでsassとgulpをインストールしていきます。

CSSのコードを圧縮しよう

Macならターミナル、Windowsならパワーシェルを使っていきます！

まずはローカルのファイルに移動します。

cd /font-test

font-testは仮です。あなたのサイトフォルダに移動してください。

そしてpackage.jsonを作成します。すべてyesなので-yオプションを付けます。

npm init -y

このようなpackage.jsonができてればOKです。

まずsassからインストールしましょう。テスト環境でのインストールなので、--save-devを付けます。

npm install sass --save-dev

package.jsonの中に"scripts"という項目があると思います！

その"scripts"に、下記の1文を追加します。前の一文の最後にコンマを入れることに注意してくさい。

"sass": "sass sass:css/ --style compressed --source-map --watch"

"scripts"の機能は、本当だったら毎回長いコマンドを入力して実行しないとダメなのですが、ここに記入しておくことで、省略して"sass"というワードだけで実行することができます！楽になる便利な機能です！

それでは、sassを動かしてみましょう！！

npm run sass

上記コマンドでsassを動かすことができます！！

これでscssファイルを作ってそこにcssを記入すると自動でcssファイルを出力してくれます。

ちなみに「--style compressed」がCSSを圧縮するオプションになります。なので圧縮しないのなら削除すればscss〜cssにコンパイルだけしてくれます。

そして「--watch」のオプションを入れることでCSSを書いた瞬間に自動でコンパイルしてcssを変更してくれます。

このようにcssを書いてインデントが削除されて一行になっていれば成功です。

これでCSSの圧縮は完了になります。

この時点でhtmlファイルと同じ階層には、package-lock.jsonファイルと、node_modulesフォルダが生成されてますが、パッケージの情報が入っているファイル群になりますので気にしなくても大丈夫です！！

JSのコードを圧縮しよう

次はjsファイルの圧縮になります。まずは下準備をしていきましょう！

npmでgulpをインストールします。

npm install gulp --save-dev

devDependenciesに「gulp」が入っていればインストール完了です。

もう2つnpmでインストールしておきましょう。

npm install gulp-rename --save-dev

npm install gulp-uglify --save-dev

devDependenciesに二つとも追加されていれば大丈夫です！

次はindex.htmlのと同じ階層にgulpfile.jsというファイルを作ってください！

そして、下記の内容を書いていきましょう。

var gulp = require("gulp");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");

gulp.task("default", function() {
    gulp.src('js/index.js')
        .pipe(uglify())
        .pipe(rename({
            extname: '.min.js'
        }))
        .pipe(gulp.dest('src/js/'));
});

そちらはgulpを実行させる時の命令を書いておく場所になります。

そして、圧縮したJSファイルの保存場所に「src/js」を追加します。

index.jsに適当なコードを書いときましょう。

このindex.jsをgulpで圧縮します！！

下記をコマンドで実行します。

npx gulp

src/jsファイルに「index.min.js」に名前を変えて出力されました！インデントも削除されて、一行になって圧縮されました。

最後はindex.jsの読み込みをindex.min.jsに変更すればOKになります。

一度、gulpfile.jsファイルの中身を見ていきましょう。

var gulp = require("gulp");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");

まずはそれぞれのgulpファイルを読み込んでいます。

問題はこっからです。

gulp.task("default", function() {
    gulp.src('js/index.js')
        .pipe(uglify())
        .pipe(rename({
            extname: '.min.js'
        }))
        .pipe(gulp.dest('src/js/'));
});

まず「gulp.task」でgulpが実行する処理を定義します。関数を定義するイメージです。

「"default"」はタスク名を付けれますが、defaultと書くことでコマンドで実行する時にタスク名を省略できます。

本当は 、「npx gulp タスク名」と書かないとダメですが、defaultなので省略できます。

「gulp.src」で対象のファイルを指定。

「pipe」で処理を繋いでいくことが出来ます。「uglifyとrenameとdest」を繋ぎました。

destは出力先フォルダを指定します。

「extname」は名前をどう変えるかを指定します。以上、gulpfile.jsの解説でした。

これでどれだけ軽くなるかわからないですが、コード量が多いならやってみる価値はありそうです。

今回はサイトスピード改善の思いつく方法を全て書いてみましたが、かなり濃い内容になったと思います。

一度ページスピード改善をやってみてください！！

もし実装などで上手くいかないことありましたら、下記ボタンからご相談いただけましたらありがたいです。