【PageSpeed Insights】モバイルサイト高速化のために行ったこと5つ

ページ表示速度を速くしたい人「ページ表示速度測定ツールを使ってモバイルサイトの速度を計ってみたら、遅いという結果だった。速くする方法はないのかな」

こういったお悩みにお答えします。

僕はtwitterをやっています。とあるフォロワーさんから

あなたのページ重いですよ！

というコメントがありました。サイトのページ表示速度を測定してくれるPageSpeed Insights で、僕のサイトを計測してみたところ...

うわっ僕のサイトの点数低すぎ？！

と思うようなスコアでした。※モバイルでの点数です！(キャプチャこれしか残ってませんでした)

サイトを立ち上げて間もなくて画像も多くないのに、「この点数はやばくない...？」と夜に7時間くらいしか寝れないくらい悩みました。

ただ、これから紹介する5つの手順を踏むことで、

97点！！！

「なにか計測間違ってない？」ってくらいページ速度が速くなりました。

今はスマホからのアクセスが大半です。スマホからの読み込みが遅いとSEO的にも良くないですし、ユーザにも優しくありません。

サイトの読み込み速度が大事だというのは、みんなご存じだとは思うので御託はここまでにして、さっそく手順を説明します。

"EWWW image optimizer"を利用した画像圧縮

サイトの表示速度が遅い原因の大きな要因のひとつとして、サイト内で使用している画像が重いという原因があります。

”PageSpeed Insights”に表示される警告に「次世代フォーマットでの画像の配信」というものがあります。

次世代フォーマットというのは

あたりのことです。

ふだんサイト内で画像を利用するときは、".jpeg"や”.png”などを多いと思いますが、これらの画像をWebPに変換することで、JPEGやPNGをそれぞれ30％程度圧縮できるとのこと。

どうやれば、"JPEG"や"PNG""をWebP"に変換して圧縮できるんですか？

"WordPress"を利用している場合、"EWWW image optimizer"というプラグインがあります。このプラグインを使うことで画像を圧縮するとともに、"WebP"に変換することができます。

"EWWW image optimizer"での画像圧縮手順

あまりプラグインが増えるとそれもサイトを重くする原因です。すでに他のプラグインで画像圧縮をしているならこの章はスキップしても大丈夫です。

では、さっそく手順を説明します。

手順① : メタデータの削除

ベーシックのタブの選択し、「メタデータを削除」という項目にチェックをいれましょう。ここにチェックを入れることで、画像のメタデータを削除してくれます。

メタデータとは、データのためのデータのことです。そのデータを説明するための情報で、そのデータを削除することでファイルサイズを削減することができます。

上の画像の赤枠の部分にチェックが入っていればOKです。

手順② : WebPへの変換

つぎにWebPへの変換です。WebPタブを選択して

JPEG、PNGからWebPのチェックを入れましょう。

これで、"EWWW image optimizer"での設定は完了です。下の方にある「変更を保存」ボタンをおして設定を保存しましょう。

手順③ : 一括最適化

最後は一括最適化です。

このままだと新たにアップロードした画像は圧縮処理されますが、元々あった画像は圧縮は行われません。とはいっても、再アップロードをする必要はなく「一括最適化」というボタンがあります。

上の赤枠の「一括最適化」のボタンを押してください。メディアライブラリにある画像が一括最適化されます。

"EWWW image optimizer"で行うことはここまでです。

"Autoptimize"を利用した、CSSとHTMLの最適化

”PageSpeed Insights”に表示される警告に「キー リクエストのプリロード」というものがあります。

「プリロード」という言葉を直訳すると、「事前に読み込む」という意味です。

「キーリクエスト」というのは、ブログの中でよく使われている「CSS」や「HTML」、「JavaScript」などのことです。

つまり、ブログの中で良く利用使われてる「キーリクエスト」をプリロード(事前に読み込んでおくこと)でサイトの表示速度を高速化できるということみたいです。

そんなこと言われても何が「キーリクエスト」なのかわかりません。どうやって探してプリロードするんですか？？（怒）

"Autoptimize"とプラグインと、"Critical Path CSS Generator"というサイトを組み合わせれば、簡単に「キー リクエストのプリロード」ができます。

手順は以下の通り

順番に説明します。

手順① : CSSのキーリクエストの調査

「キーリクエスト」とは、よく使われている「CSS」や「HTML」という話をしました。キーリクエストのうち、CSSについてはCritical Path CSS Generatorというサイトで調査することができます。

なおクリティカルパスというのは、直訳すると「重大な経路」と意味です。

では、さっそく手順です。

"Critical Path CSS Generator"のページに飛ぶと

があります。

サイトのURLには、あなたのサイトのトップページのURLを入力してください。

問題なのは、FULLCSSですよね。「FULLCSSって何？」と思うかもしれませんが、記入するCSSは、

の2つだけで十分です。

それぞれの探し方を簡単に説明すると、wordpressを利用している場合は基本的には"stlye.css(親テーマ)"は

<あなたのトップページのURL>/public_html/wp-content/themes/<あなたの使用テーマ>/style.css

にあるはずです。内容をコピペして、FULLCSSに貼り付けましょう。

注意点がひとつ、"style.css" の1行目には 文字コードの

@charset "UTF-8";

が記載されていると思いますが、これはコピペしないようにしましょう。2行目以降をコピペしてください。

つぎに追加CSSですが、これはwordpressの「外観」＞ 「カスタマイズ」からみれるものです。「追加CSS」を使ってい人であれば見方は分かっているはずなので説明は割愛します。追加CSSも貼り付けてください。

CSSを貼り付けたあと、"Create Crtical Path CSS"を押すと、

"Crtical Path CSS" にCSSのクリティカルパスが出力されます。次の手順で使うのでこのページは開いたままにしておいてください。

手順② : CSSとHTMLの最適化

"Autoptimize"を利用しCSSとHTMLの最適化を行います。

JavaScript、CSS,HTML,Googleフォントの最適化を行うことができますが、JavaScriptだけは別のプラグインで設定した方が効率が良いので、JavaScriptはここでは設定しません。

CSSの最適化

CSSの最適化の設定を行います。CSSの最適化でチェックを入れるのは以下の4点です。

画像の通りチェックを入れましょう。

「CSSのインライン化と遅延」には、手順①で調査した「CSSのクリティカルパス」を貼り付けます。

HTMLの最適化

「HTMLコードを最適化」にチェックを入れましょう。これだけです。

CSSとHTMLのチェックが終わったら、画面下までスクロールして

「変更を保存してキャッシュを削除」を押して変更を保存しましょう。

Googleフォントと絵文字の削除(オプション)

追加タブを選択すると、Googleフォントと絵文字を削除の項目があります。

Googleフォントと絵文字をサイト内で使っていない場合は、チェックを入れることでサイトの高速化が見込めます。

必要に応じてチェックを入れて、変更を保存を行いましょう。

"W3 Total Cache"を利用したキャッシュの削除

”W3 Total Cache”では、コンテンツ配信ネットワーク（CDN）統合や最新のベストプラクティスなどの機能を活用して、Webサイトのパフォーマンスを向上させ、読み込み時間を短縮することで、サイトのSEOとユーザーエクスペリエンスを向上させます。※プラグインに書いてるまんまです

簡単にいうと、キャッシュの最適化を行ってくれます。

3つキャッシュ最適化のためにチェックを入れます。

チェックを順番に入れていくだけです。

すべてチェック完了したら、「すべての設定を保存」をおして、設定を保存しましょう。

”W3 Total Cache”で行うことはこれだけです。

"Async JavaScript"で、JavaScriptの非同期化及び、遅延化

JavaScriptは読み込んでいる間は、画面の描画をブロックされます。

"Async JavaScript"を使うことで、JavaScriptの非同期化を行ったり、最初のページ読み込み時には不要なJavaScriptの読み込みを遅延化させたりすることができます。

さっそく設定です。

"Enable Async JavaScript"で、上の画像のように3つチェック入れましょう。すべて"JavaScript"を非同期化するための設定です。

"Async JavaScript Method"は、”Async”を、　”jQuery”は、"Defer"を選択しましょう。ちなみに、”Async”は「非同期」、"Defer"は「遅延」という意味です。

すべてチェックが終わったら、"Save Setting"を押して設定を保存しましょう。

ここまで設定が終われば、基本的な設定を終わりです。お疲れさまでした！　次の手順は、できる人とできない人がいるのでオプションです。

"Google adsense"のjavascriptを削除(オプション)

最後は、"Google adsense"のjavascriptの削除です。　

僕は、"Google adsense"の審査を受けるために、"Google adsense"のjavascriptをヘッダ内に埋め込んでいたのですが、結構このjavascriptが重い...。

すでに審査が通って、"Google adsense"を貼り付けている方や審査中の方は別ですが、

一度"javascript"を埋め込んで審査に落ちたけどそのままにしてしまっている方は、次の審査で申請するまでは削除しておきましょう。だいぶ変わります。

まとめ

本記事では、サイト高速化の手順を説明しました。

サイトの読み込み速度はSEO的にも大切だと言われているので、少し手間はかかりますがめげずに設定を行いましょう。