そんな悩みが解決できる記事を書きました。

本記事では、WordPressブログにおけるWebP対応手順を中心に解説します。

意外と簡単にできますので、サイト速度を改善したい方はこの記事を参考にやってみて下さいね。

WebPの対応手順だけ知りたい方は、2章からご覧くださいね。
さっそく解説していきます。

Webとは？

WebP（ウェッピー）とは、Googleが開発した次世代の画像フォーマットのこと。

ファイルの拡張子は、「.webp」となります。

WebPの特徴：ファイルサイズの軽量化が図れること

WebPの最大の特徴は、ファイルサイズの軽量化が図れること。

軽量化によりサイトの表示速度を改善できれば、もちろんSEO対策にも繋がります。

ファイルサイズはどれくらい圧縮されるの？

JPEGファイルと比較して25~34%、PNGと比較して28%小さくなると言われています。

▼実際にJPEGとWebPの比較をしてみましたのでご覧ください。

画像の劣化はまったく分からないにも関わらず、ファイルサイズは80%程度も小さくなっています。

ウェッピーってすごいんだね！

WebPのデメリット：一部のブラウザで非対応

実はWebPには、IEなど一部非対応のブラウザがあります。

これがWebP導入を躊躇してしまう要因だったりします。

それじゃ導入はやめておこうかな…

いえいえ、これから紹介する方法であれば、WebP対応ブラウザならWebP、非対応ならこれまで同様JPGやPNGというような出し分けができますので、ぜひ参考にしてみてください。

さっそく次章より紹介していきます。

WordPressでのWebP対応手順３ステップ解説

WordPressブログであれば、「EWWW Image Optimizer」というプラグインを使えば、意外と簡単にWebP変換を導入できます。

さっそく手順を紹介していきます。

1. EWWW Image OptimizerのWebP変換設定
2. .htaccessを編集
3. 一括最適化

順に説明します。

EWWW Image OptimizerにてWebP変換設定

EWWW Image OptimizerにてWeb変換設定をしていきます。

まずは、EWWW Image Optimizerをインストールしましょう。

▼1.WordPress管理画面の「プラグイン」→「新規追加」より、EWWW Image Optimizerをインストール後、有効にします。

上図はすでにインストール＆有効にしていますが、はじめは「今すぐインストール」になっているはずです。

▼2.EWWW Image Optimizerの設定画面を開いたら、「WebP」というタブを開きます。
そこの「WebP変換」という項目にチェックを入れます。

最後に、変更を保存をクリックして保存ください。

▼3.すると、下図のような怪しげなコードが表示されると思います。それを丸ごとコピーしましょう！

これは、次の.htaccessファイルの編集の際に使用します。怪しいものではないのでご安心を。

【補足】EWWW Image Optimizerそのほかの設定

EWWW Image Optimizerは優秀な画像最適化プラグイン。せっかくなので、そのほかの設定も確認しておきましょう。

と言っても基本的に確認するのは以下の2点くらいです。

①▼基本タブの「メタデータを削除」にチェックを入れる。

②▼変換タブの「変換リンクを非表示」にチェックを入れる。

2つともデフォルトでチェックが入っていたかもしれませんが念のため。

他の項目はデフォルトのままで大丈夫です。

画像遅延読み込みの設定もありますが、そちらは後で紹介します。

.htaccessを編集

次に、サーバーの設定を変更する「.htaccess」ファイルを編集します。

▼1.まずはConoHa WINGにログイン後、「サイト管理」→「サイト設定」→「.htaccess設定」をクリック。

▼エックスサーバーであれば、サーバーパネルにログイン後、「.htaccess」をクリック。

▼.htaccess設定の右側の鉛筆マークを押せば編集できますので、先ほどコピーしたものを貼り付けましょう。
先頭に貼り付けておけばOKかと（元々コードがある場合は、間に追加したりしないように！）。

これで、WebP対応ブラウザならWebP、非対応ならこれまで同様jpgやpngというような出し分けができるようになります。

▼この時点でEWWW Image Optimizerの画面で「PNG」と表示されていたのが、緑色で「WebP」に変わっているはずなので確認してみてください（下図の右下）。

確認できたら、次に進みましょう。
（確認できなければ、設定を間違えた可能性がありますので見直してみてください。）

一括最適化

EWWW Image Optimizerの一括最適化機能を使って、既にサイト内にある画像ファイルをWebP化していきましょう。

▼1.WordPressの管理画面より、「メディア」→「一括最適化」をクリック。

▼2.「最適化されていない画像をスキャンする」を押せば最適化できますが、圧縮は他のプラグインなどで実施済みだよって方は、「WebPのみ」にチェックをいれてから実行してもいいでしょう。

僕はチェックを入れて実行しました。

▼3.最後に、下図の最適化のボタンをクリックします。

▼4.最適化が始まります。完了するまでしばらく待ちましょう。

僕は1時間くらいかかりましたね。

完了すれば以上で終了です。

WebP変換確認

実際にWebP化できているか確認してみましょう。

自分のサイトに行って、F12を押して検証ツールを開きます。

▼Networkタブに行って、「Img」を選択。「Disable cache」にもチェックを入れておくと、キャッシュの読み込みを無効化してくれるので、こちらにもチェックを入れておきましょう。

Typeの欄に「webp」と表示されていればWebPに変換できています！

また、IEで開くとJPGやPNGのままちゃんと表示されているので確認してみてくださいね。

EWWW Image Optimizerなら画像遅延読み込みにも対応可能

▼EWWW Image Optimizerの設定で下図の赤枠にチェックを入れれば、画像遅延読み込みも対応可能です。

上記の設定を行えば、

• A3 Lazy Load
• Autoptimizeの画像遅延設定

などは不要になります。

僕はチェックを入れて、Autoptimizeの画像遅延設定を解除しましたが、このあたりのプラグインの良し悪しは検証しておりませんので、お好みでお願いします。

Compress JPEG & PNG imagesプラグインを導入している方へ

同じ画像圧縮プラグインとして有名な「Compress JPEG & PNG images」を使用している方も多いのではないでしょうか。

しかし、WebPにしたほうが圧縮率が高いですよね～。

なので今後はEWWW Image Optimizerを使っていこうと思います。（パンダ君ごめんなさいね。）

WebP対応手順３ステップ解説 まとめ

いかがでしたでしょうか。意外と簡単にできたのではないでしょうか。

僕のサイトはPageSpeedInsightsのスコア自体はあまり変わりませんでしたが、人によっては大きく改善されるかもしれませんね。

WebP対応でスコアが大きく改善されたよって方は、Twitter（@KoaraCom）までご連絡いただけると助かります。

当サイトではPageSpeedInsightsの項目を基準に、あなたのサイト速度を改善できる施策を多数用意しております。

その他にも簡単に取り組める施策がありますので、サイトが重くて気になる方はトライしてみてください。
>>サイト速度を改善する施策一覧を見てみる。

そんな悩みが解決できる記事を書きました。

このように英語で表示されているかもしれませんね。

本記事では、サーバーの初期応答時間を短縮（TTFB）の改善方法として３つ紹介します。

さっそく解説していきます。

サーバーの初期応答時間（TTFB）を短縮するとは？

サーバーの初期応答時間を短縮するとは、「サーバーの処理速度を向上させて、ページの読み込み時間を短縮してくださいね」と言っています。

いま、あなたが見ているWebページって、サーバーに保存されたページを読み込んで閲覧しているんですね。

なので、サーバーの性能があまりに低いと、当然ページの読み込みに時間がかかってしまうというわけ。

しょぼいサーバーは機会損失のもとですね。

サーバーの初期応答時間を短縮（TTFB）の3つの改善方法

サーバーの初期応答時間を短縮（TTFB）の改善方法はこの3つ。

1. PHPのバージョンアップ
2. 時間をおいてから計測しなおす
3. サーバーの引っ越し

順に解説していきます。

PHPのバージョンアップ

PHPをバージョンアップすることで、応答時間を短縮できる可能性があります。

使用しているレンタルサーバーのサイトにログインして、PHPをバージョンアップできるかどうか確認すると良いでしょう。

僕もやってみるとかんたんにできましたので、Xserverでのバージョンアップ方法を次に説明します。

【Xserver】PHPのバージョンアップ方法

Xserverの管理画面にアクセスします。

▼サーバーパネルログインより、ログインします。

▼PHP Ver.切り替えをクリック

▼PHPのバージョンを選択します。今回は、（推奨）となっているPHP7.3.16にバージョンアップしておきました。

かんたんでしたね。

時間をおいてから計測しなおす

つづいて2つめの改善方法。

時間をおいてからPageSpeedInsightsで再度計測してみましょう。警告が解消されることがよくあります。

もちろん、一番負荷がかかるときに遅延しているとよくはないですけどね。

Googleの推奨するサーバーの初期応答時間（TTFB）は、200ミリ秒以下だそうです。

ここからあまりにかけ離れている場合は、次に説明するサーバーの引っ越しを検討してみてもいいかも。

サーバーの引っ越し

やっぱり根本から解決したい！という場合は、サーバーの引っ越しですね。

僕は、国内最大手のレンタルサーバーであるXserver（エックスサーバー）を利用しています。

今のところ不自由なく使えていますが、実は今、Conoha Wing（コノハ ウィング）というレンタルサーバーに注目しています。

ConoHa WINGとは？

ConoHa WING とは、2018年から提供しているレンタルサーバーのひとつで、特出すべきは「圧倒的なサーバーの処理速度」。

金額面についての特徴

• 1年契約で810円（2021年2月調べ）
• バックアップ復元無料

Xserverの場合は、もしものときのバックアップ復元に5,000円かかりますからね。

国内最大手のXserverと比較しても、遜色ないどころかむしろ優れているかも。

料金プランはたいていの人はベーシックプランで十分でしょう。

公式サイトにヒトデさんを筆頭に有名ブロガーさんのインタビューがありますので、ぜひ覗いてみてください。

＼国内最速レンタルサーバー／

ConoHa WINGの公式サイトはこちら

僕も2020年10月でXserverのレンタル契約が切れますので、ConoHa WINGに乗り換えるのを楽しみにしております。

▼（2020年12月追記）実際に乗り換えてみました！僕の所感付きで移行手順を紹介しております。

【最新版】エックスサーバーからConoHa WINGへの移行手順を解説

2020年10月13日

サーバーの初期応答時間を短縮（TTFB）の改善方法【PageSpeedInsights】まとめ

僕も気になっているConoHa WINGサーバーに乗り換えられた方がいらっしゃいましたら、ぜひ感想をお聞かせください^^

この記事が参考になりますと幸いです。

レンダリングを妨げるリソースの除外の改善方法をていねいに解説

2020年8月30日

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

2020年6月27日

そんな悩みが解決できる記事を書きました。

上図は合格してますが、こちらの項目のことですね。

さっそく解説していきます。

JavaScriptの最小化とは？

JavaScriptの最小化とは、「JavaScriptファイル内のコードを可能な限リ縮小して、ページの読み込み速度を向上させましょう」と言っています。

縮小ってなにするの？

コード内にある無駄な空白やコメントを、コードの内容が変わらない範囲で削除します。

縮小するとなぜ速度改善につながるの？

縮小によってファイルサイズが小さくなり、読み込み時間の短縮につながります。

JavaScriptの最小化 2つの改善方法を紹介

JavaScriptの最小化を行う2つの改善方法を紹介します。

1. Autoptimizeプラグインを活用 ※おすすめ！
2. フリーツールを使って最小化

順にみていきます。

Autoptimizeプラグインを活用

Autoptimizeプラグインを使えば、JavaScriptコードをかんたんに最小化できます。

当ブログでは毎度おなじみとなってきましたね。

JavaScriptオプション欄でJavaScriptコードを最適化設定します。
そのほかも、下図のような形でチェックしておくとよいでしょう。

このプラグインを使えば、JavaScriptの最小化の改善だけでなく、

• CSSの最小化
• オフスクリーン画像の遅延読み込み
• レンダリングを妨げるリソースの除外

などなど、PageSpeedInsightsで出てくるそのほかの項目も改善できますよ。

▼そのほかAutoptimizeプラグインの設定方法はこちらの記事が参考になります。

Autoptimizeプラグインの設定方法【注意点あり】

2020年7月30日

フリーツールを使って最小化

こちらはフリーツールを使って最小化する方法。

「JavaScript minify」と検索すれば、いくつか縮小できるツールが見つかるので、それを利用しましょう。

やり方はCSSの最小化の改善方法に記載しておりますので、気になる方はチャレンジしてみてください。

CSSの最小化の改善方法【PageSpeedInsights】

2020年6月16日

JavaScriptの最小化の改善方法【PageSpeedInsights】まとめ

JavaScriptの最小化の改善効果はCSS同様にそこまで見込めないかも知れません。

警告が出た際には試してみて頂ければと思います。

最後に、ブログのデザインがおかしくなっていないか表示の確認を必ず行ってくださいね！

以上、JavaScriptの最小化の改善方法についてでした。

この記事が参考になりますと幸いです。

そんな悩みが解決できる記事を書きました。

こちらの項目のことですね。

さっそく解説していきます。

CSSの最小化とは？

CSSの最小化とは、「CSSファイル内のコードを可能な限リ縮小して、ページの読み込み速度を向上させましょう」と言っています。

縮小ってなにするの？

コード内にある無駄な空白やコメントを、コードの内容が変わらない範囲で削除します。

縮小するとなぜ速度改善につながるの？

縮小によってファイルサイズが小さくなり、読み込み時間の短縮につながります。

CSSの最小化 2つの改善方法を紹介

CSSの最小化を行う2つの改善方法を紹介します。

1. Autoptimizeプラグインを活用 ※おすすめ！
2. フリーツールを使って最小化

順にみていきます。

Autoptimizeプラグインを活用

Autoptimizeプラグインを使えば、CSSコードをかんたんに最小化できます。

当ブログでは毎度おなじみとなってきましたね。

CSSオプション欄でCSSコードを最適化設定します。
そのほかも、下図のような形でチェックしておくとよいでしょう。

このプラグインを使えば、CSSの最小化の改善だけでなく、

• JavaScriptの最小化
• オフスクリーン画像の遅延読み込み
• レンダリングを妨げるリソースの除外

などなど、PageSpeedInsightsで出てくるそのほかの項目も改善できますよ。

そのほかAutoptimizeプラグインの設定方法はこちらが参考になります。

Autoptimizeプラグインの設定方法【注意点あり】

2020年7月30日

フリーツールを使って最小化

こちらはフリーツールを使って最小化する方法。

「CSS minify」と検索すれば、いくつか縮小できるツールが見つかるので、それを利用しましょう。

試しに、Minify – JavaScript and CSS minifierというサイトのツールを使って、style.cssをminify化してみましょう。

使い方はかんたんで、minify化したいCSSコードを貼り付けてminifyボタンをクリックするだけ。

僕のテーマ「スワロー」なら、「外観」→「カスタマイズ」→「追加CSS」にstyle.cssがあります。

▼これを先ほどのツールに貼り付けてminifyすると、余計な余白やコメントが取り除かれました！

このあとは、minifyしたコードを追加CSSにコピペすれば出来上がり。

かんたんですが、面倒ですよね。

僕は、Autoptimizeでやってもらうことにします。

CSSの最小化の改善方法【PageSpeedInsights】まとめ

CSSの最小化の改善効果はそこまで見込めないかも知れませんが、わりとかんたんなので警告が出ていない方も試してみて頂ければと思います。

最後に、ブログのデザインがおかしくなっていないか表示の確認を必ず行ってくださいね！

以上、CSSの最小化の改善方法についてでした。

この記事が参考になりますと幸いです。

そんな悩みが解決できる記事を書きました。

こちらの警告のことですね。

さっそく解説していきます。

キーリクエストのプリロードとは？

キーリクエストのプリロードとは、「ページを表示させるために必要な内容は先に読み込みましょう」というアドバイスになります。

このとき、最後に呼び出されて実行されるファイルは、ページを表示させるために必要な内容が含まれているのにも関わらず、呼び出されるのが遅いと速度遅延の要因となるというわけです。

【方針】pleload属性を使用しよう

PageSpeedInsightsのアドバイスを再度確認してみましょう。

「pre、load」。

つまり「先に、読み込め」と言うことですね。

警告の出ているファイルに対して、preload属性を付加して優先的に処理をしてあげることで、速度改善につながります。

キーリクエストのプリロードの改善方法2ステップ

キーリクエストのプリロードの改善方法は2ステップでできます。

1. キーリクエストのプリロードの警告が出ているURLをコピー
2. preload属性を追加したlinkタグをheadタグに追加

順に解説していきます。

ステップ１：キーリクエストのプリロードの警告が出ているURLをコピー

PageSpeedInsightsの改善できる項目にて、キーリクエストのプリロード警告の詳細を確認してください。

▼すると、下図のようにURLが現れますので、右クリックしてリンクのアドレスをコピーを選択します。

FontAwesomeとicomoon。
今回はフォント関連の読み込み順が遅くて警告が出ていたようです。

ステップ２：preload属性を追加したlinkタグをheadタグに追加

preload属性を追加したコードのテンプレはこちら。
#の部分に先ほどコピーしたURLを貼り付けます。

<link rel="preload" href="#" as="font" type="font/〇" crossorigin>

• href=”#”
  #の部分に先ほどコピーしたURLを貼り付けます。
• type=”font/〇”
  〇の部分にはリソースの拡張子を記述します。
• crossorigin
  別のサイトからフォント情報を読み込んだりする際に必要ですので、必ず記述します。

参考までに、今回の警告から完成したコードはこちら。

<link rel="preload" href="https://koaramarch.com/wp-content/themes/yswallow/library/icon/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin>
 <link rel="preload" href="https://koaramarch.com/wp-content/themes/yswallow/library/icon/icomoon.ttf?ffmnq8" as="font" type="font/ttf" crossorigin>

このコードをheadタグ内に追加します。

これで完成です。

キーリクエストのプリロードの改善方法をていねいに解説 まとめ

改善できているか一緒に確認してみましょう。

見事合格！

Chromeの検証ツールを利用すると、改善されたのがよく分かります。

▼改善前

読み込まれる順にリソースを表示すると、あとのほうで読み込まれていた今回対象のリソースが・・・

▼改善後

優先的に呼ばれるようになりましたね！
（この上にあるリソースも優先的に呼ばれるように設定されています）

ページの表示もおかしくなっていないか確認してみてくださいね。

以上、キーリクエストのプリロードの改善方法についてでした。

この記事が参考になりますと幸いです。

そんな悩みが解決できる記事を書きました。

オフスクリーン画像の遅延読み込みは、プラグインでかんたんに解決してしまうのがよいでしょう。

さっそく解説していきます。

オフスクリーン画像の遅延読み込みとは？

オフスクリーン画像の遅延読み込みとは、「スクロールしないと見えない領域の画像は後で読み込みましょう」というアドバイスになります。

ファーストビューを速く表示させよう

Webページは1ページのうち、画面スクロールしなくても見える領域とスクロールしないと見えない領域がありますよね。

Webページにアクセスしたときに、スクロールしないと見えない画像なんて、べつに後で読み込んでもいいわけです。

ところが、今回の警告であるオフスクリーン画像、つまりスクロールしないと見えない領域の画像を読み込んでいるせいで、肝心のファーストビューの範囲内にある表示が遅くなってしまっています。

オフスクリーン画像を遅延させることで、Webページをぱっと見で速く感じさせることもできるでしょう。

オフスクリーン画像の遅延読み込み 改善方法

オフスクリーン画像の遅延読み込みの改善は、画像遅延読み込み系プラグインでかんたんに解決してしまうのがよいでしょう。

よく紹介されている画像遅延読み込み系プラグイン

よく紹介されている画像遅延読み込み系プラグインはこちら。

• A3 Lazy Load
• BJ Lazy Load

確かに上記が鉄板かと。

ただ、タイトルに書いちゃってますが、当ブログでもよく紹介している「Autoptimizeプラグイン」でも実現できますよ。

Autoptimizeプラグインでできること

• CSSやJavaScriptコードを圧縮してくれる
• 画像を遅延読み込みしてくれる

やり方はAutoptimizeの設定で、下図赤枠のチェックを入れるだけ。

簡単ですね。

Autoptimizeプラグインの難点

Autoptimizeの難点をあげるなら、画像遅延読み込みに関する細かい設定ができないということ。

例えば、400px手前で読み込み開始！

などの設定は、A3 lazy loadではできますが、Autoptimizeではできないです。

このあたりは実際に表示を必ず確認してみて、

• レイアウトが崩れていないか（プラグインとの相性の確認）
• 体感的な表示速度に問題ないか
• スクロールしたときに違和感はないか

などを考慮してお好きなほうを導入してみてください。

ユーザーにとってストレスを感じるほど遅延読み込みしていたら本末転倒ですからね。

あと、両方採用する場合は、Autoptimizeの画像遅延読み込み設定は解除しておいてくださいね。

▼そのほかAutoptimizeプラグインの設定に関してはこちらが参考になります。

Autoptimizeプラグインの設定方法【注意点あり】

2020年7月30日

オフスクリーン画像の遅延読み込み まとめ

導入後に、PageSpeedInsightsにて警告が消えているか確認してみましょう。

無事合格していますね。

以上、オフスクリーン画像の遅延読み込みの改善方法でした。

WordPressテーマ「スワロー」の紹介

僕の愛用中のテーマ「スワロー」は、駆け出しブロガーの方におすすめのテーマ。

初期設定がほとんど不要で、書くことに集中できます。

僕のブログでもカスタマイズ方法を紹介していますので、参考にしてもらえたら嬉しいですね。

＼当ブログで使用中のテーマ／

WordPressテーマ「スワロー」公式サイトはこちら

レンダリングを妨げるリソースの除外の改善方法をていねいに解説

2020年8月30日

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

2020年6月27日

そんな悩みが解決できる記事を書きました。

上図の警告のことですね。

本記事でていねいに解説していきます。

※対策だけ知りたいというせっかちさんは、3章からご覧ください。

レンダリングを妨げるリソースの除外とは？

レンダリングを妨げるリソースの除外とは、「Webページの描画を妨げるソースコードの記述がありますよ」と言っています。

ファーストビューを速く表示させよう

Webページは1ページのうち、画面スクロールしなくても見える領域とスクロールしないと見えない領域がありますよね。

Webページにアクセスしたときに、今回問題となっているレンダリングを妨げるリソースがあるせいで、ファーストビューの範囲内にある表示が遅いと気になります。

逆に言えば、ファーストビューの範囲外の表示が遅くても気にはなりません。

なので、レンダリングの問題を解決すれば、Webページをぱっと見で速く感じさせることもできますよ。

【方針】非同期読み込みと遅延読み込みを行おう

そのため、CSSやJavaScriptファイルを非同期に、かつ遅延させて読み込むようにすると、早く表示することができます。

レンダリングを妨げるリソースの除外 4つの改善方法

1. JavaScriptの非同期読み込み
2. JavaScriptの遅延読み込み
3. CSSの非同期読み込み
4. ファーストビューのCSSのみ先に読み込み

順にていねいに解説していきます。

JavaScriptの非同期読み込み ➡ defer属性を付加

JavaScriptの非同期読み込みは、defer属性を付加すると実現できます。

実装はかんたん。コピペでいけます。

WordPressの管理画面より、「外観」 → 「テーマエディタ」を開きます。

functions.phpに以下のコードを貼り付けてください。
※どこでもいいですが、<?phpより下側に貼り付けてくださいね。

if(!(is_admin())){
	/* JS非同期読み込み */
	function replace_scripttag($tag){
		if(!preg_match('/b(defer|async)b/',$tag)){
			return str_replace("type='text/javascript'",'defer',$tag);
		}
		return $tag;
	}
	add_filter('script_loader_tag','replace_scripttag');
}

参考サイト：【コピペで解決】”レンダリングを妨げるリソースの除外”をプラグインなしで対応

うまくいったら、こんな感じでdefer属性が付加されます。

async属性について

defer属性のほかに、async属性というものがあります。

両者の違いをまとめると以下のとおり。

• defer属性・・・HTML内に定義したscript順に実行される
• async属性・・・HTML内に定義したscript順とは無関係（非同期）に実行される

async属性は実行順番を気にしない処理には有効です。

使い分けてもいいのですが、良く分からない場合はdefer属性を使っておきましょう。

JavaScriptの遅延読み込み ➡ bodyの最後（フッター）で読み込む

JavaScriptの遅延読み込みは、ヘッダーに書いてあるスクリプトをフッター（</body>タグ直前）に移動させることで実現できます。

こちらもfunctions.phpに以下のコードをコピペでいけます。

//レンダリングブロックしているJavaScriptの読み込みを遅らせる
function move_scripts_head_to_footer_ex(){
  //ヘッダーのスクリプトを取り除く
  remove_action('wp_head', 'wp_print_scripts');
  remove_action('wp_head', 'wp_print_head_scripts', 9);
  remove_action('wp_head', 'wp_enqueue_scripts', 1);

  //フッターにスクリプトを移動する
  add_action('wp_footer', 'wp_print_scripts', 5);
  add_action('wp_footer', 'wp_print_head_scripts', 5);
  add_action('wp_footer', 'wp_enqueue_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'move_scripts_head_to_footer_ex' );

参考サイト：WordPressヘッダーでレンダリングブロックしているJavascriptをフッターで読み込むカスタマイズ方法

うまくいったら、これまでヘッダーで定義されていたscript要素がfooterに移動しているはずです。

CSSの非同期読み込み ➡ preload属性で先読み非同期処理

CSSは、preload属性を付加することで先読み非同期処理が実現できます。

こちらは少し面倒と言いますか、難易度が高いです。
それに、実は今のところ僕も実装しておりません。

備忘録までにまとめておきますが、あとで紹介する「Autoptimizeプラグイン」でたいていは解決できますのでそちらをおすすめいたします。

CSSの非同期読み込み導入手順

1. loadCSS.jsをダウンロード
2. 指定のコードに貼り付け
3. headタグ内に指定のコードを挿入

ステップ１：loadCSS.jsをダウンロード

githubより loadCSS.jsをダウンロードします。
>>https://github.com/filamentgroup/loadCSS

ステップ２：指定のコードに貼り付け

以下のコードの5行目に、ダウンロードしたloadCSS.jsを貼り付けます。

<link rel="preload" href="#" as="style" onload="this.onload=null;this.rel='stylesheet'">
 <noscript><link rel="stylesheet" href="#"></noscript>
 <script>
 /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
 ここに縮小したloadCSS.jsを貼り付ける
 </script>

loadCSS.jsはサイズを縮小化（minify化）しておくほうが良いかも。

ステップ３：headタグ内に指定のコードを挿入

さきほどのコードをheadタグ内に貼り付けます。

最後に、“#”の部分に、レンダリングを妨げるリソースの除外で表示されたCSSファイルのパスをコピペしてください。

複数ファイル非同期読み込みにしたい場合はこれをコピペして、”#”部のパスを変更してください。

minify化したloadCSS.jsを貼りつけたコードはこちら

minify化したものを作成しておきました。
“#”の部分は適宜変更くださいね。

<link rel="preload" href="#" as="style" onload="this.onload=null;this.rel='stylesheet'">
 <noscript><link rel="stylesheet" href="#"></noscript>
 <script>
 /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
 !function(e){"use strict";var t=function(t,n,r,o){var i,a=e.document,d=a.createElement("link");if(n)i=n;else{var f=(a.body||a.getElementsByTagName("head")[0]).childNodes;i=f[f.length-1]}var l=a.styleSheets;if(o)for(var s in o)o.hasOwnProperty(s)&&d.setAttribute(s,o[s]);d.rel="stylesheet",d.href=t,d.media="only x",function e(t){if(a.body)return t();setTimeout(function(){e(t)})}(function(){i.parentNode.insertBefore(d,n?i:i.nextSibling)});var u=function(e){for(var t=d.href,n=l.length;n--;)if(l[n].href===t)return e();setTimeout(function(){u(e)})};function c(){d.addEventListener&&d.removeEventListener("load",c),d.media=r||"all"}return d.addEventListener&&d.addEventListener("load",c),d.onloadcssdefined=u,u(c),d};"undefined"!=typeof exports?exports.loadCSS=t:e.loadCSS=t}("undefined"!=typeof global?global:this);
 </script>

これでレンダリングを妨げるリソースの除外の詳細から、該当ファイルが削除されていると思います。

ファーストビューのCSSのみ先に読み込み

CSSを非同期で読み込むようにすると、ユーザーがページを表示した際に、CSSが全く適用されない状態の文字や画像がちらついてしまうことがあります。

これは、headタグ内にファーストビュー、つまり最初に見える領域のCSSのみ抽出して記述してあげることで対策できます。

CSSの抽出は、
「Critical Path CSS Generator」というサイトからできますが、サーバーからCSSファイルをダウンロードしたりする必要があり、こちらも難易度は高いです。
（僕も導入していません。）

使い方自体はかんたんで、自サイトのURLと該当のCSSを入力すれば抽出できます。

興味のある方はチャレンジしてみてください。

Autoptimizeプラグインでまるっと解決できます

CSSファイルは複数ファイルあって対応するのは大変かと思います。

なので、とりあえずAutoptimizeプラグインでまるっと解決しちゃうのがおすすめです。

このプラグインの効果は以下のとおり。

• CSSやJavaScriptコードを圧縮してくれる
• 画像を遅延読み込みしてくれる

僕の場合はこのプラグインを入れるだけで、PageSpeedInsightsのスコアが20以上上がり、レンダリングを妨げるリソースの除外の詳細項目からもほとんど消えました。

設定方法についてはこちらの記事を参考ください。

レンダリングを妨げるリソースの除外の改善方法をていねいに解説

2020年8月30日

レンダリングを妨げるリソースの除外の改善方法をていねいに解説 まとめ

僕がレンダリングを妨げるリソースの除外のためにやったことをまとめると、

1. Autoptimizeプラグインを導入
2. JavaScriptの非同期と遅延読み込み対応

以上となります。

導入前後でPageSpeedInsightsでスコアを確認するとよいでしょう。

最後に、速度改善は奥が深く、完璧を求めすぎるとドツボにハマります（僕のように）。

ブロガーなら記事執筆に時間を費やすべきかと思いますので、費やす時間と天秤にかけて対処してみてください。

この記事が参考になりますと幸いです。

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

2020年6月27日

PageSpeedInsightsで自サイトの表示速度を調べることができると聞きました。
使い方を教えてください！

そんな悩みが解決できる記事を書きました。

サイトの表示速度は、読者の離脱率や回遊率に影響するだけでなく、SEO対策の面でも重要な要素です。

本記事では、表示速度を計測することができるGoogle提供のツール「PageSpeedInsights 」の使い方から計測結果の見方までを解説します。

この記事を読んでいただけると、自サイトの表示速度について把握できるようになりますよ。

さっそく解説していきます。

PageSpeedInsightsの使い方2ステップ

PageSpeedInsightsの使い方は2ステップでできます。

• PageSpeedInsightsを起動
• 計測したいサイトのURLを入力して分析開始

すごくかんたんなのでサクッと紹介していきますね。

PageSpeedInsightsを起動

PageSpeedInsightsのサイトを開きます。

計測したいサイトのURLを入力して分析開始

試しに僕のサイトトップのURLを入力して分析ボタンをクリックしてみましょう。

分析が始まるので少し待ちます。
5～10秒程度かかります。

▼計測結果が出てきました。

計測して終わりにしては意味がないですからね。
次章で計測結果の見方を解説していきましょう。

PageSpeedInsights計測結果の見方

計測結果はモバイルとパソコン両者の結果が確認できます。
（やり直すと、結構スコアに変動ありますね。）

確認できる計測指標は以下のとおり。

• スコア
• フィールドデータ
• ラボデータ
• 改善できる項目
• 診断
• 合格した検査

順にみていきます。

スコア

スコアは総合評価のようなものですね。100点満点で表示されます。

• 90～100点：速い
• 50～89点：平均
• 0 ～49点：遅い

Googleさん割と辛口でして、僕は先ほどの結果より、66点でしたね。
（やり直すと、結構スコアが変わりますね）

ひどい結果が出てきても改善していけばいいので、ショックを受けないでくださいね！

フィールドデータ

Chromeユーザーからのデータを利用して、他サイトの実測値を比較できます。

▼表示された場合は、こんな感じで表示されます。

ラボデータ

「Lighthouse」というツールを使って、いくつかの指標で速度評価を行ってくれます。

改善できる項目

表示速度を向上させる可能性のある改善案が表示されます。

改善項目左の色は、以下のような意味です。

• 優先すべき改善項目：赤色
• その他改善したほうがいい項目：オレンジ色

改善できる項目をクリックすると、詳細内容が表示されます。

上図の結果は、既に対策を行ったので改善できる項目が少ないです。
無対策なら下図くらい出てくるかもしれません。

速度改善を行うなら、ここの詳細な改善案をみていくのがいいでしょう。

診断

アプリケーションのパフォーマンスに関する情報です。

改善項目左の色は、ここも同じく以下のような意味です。

• 優先すべき改善項目：赤色
• その他改善したほうがいい項目：オレンジ色

合格した検査

合格した検査項目。

パフォーマンスに問題ない項目はこちらに表示されます。

結局、速度改善を行うにはどこをみればいいの？

色々と指標があってひとつひとつ見ていくのは確かに大変ですよね。

手っ取り早く速度改善したいなら、「改善できる項目」の詳細を確認して、そこに書いてあることから取り組まれるのがいいでしょう。

また、速度改善について詳しくない方でも、プラグイン導入でかんたんに改善できるものも多くあります。

▼プラグイン導入でお手軽速度改善できる記事はこちら。

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

2020年6月27日

【最新版】PageSpeedInsightsの使い方と計測結果の見方を解説 まとめ

「なんか自分のサイトって重くない？」って思ったときは、ぜひPageSpeedInsightsを試してみてください。

表示速度の計測結果をもとに改善していきましょう。

PageSpeedInsights施策一覧

お手軽施策一覧

▼プラグインでお手軽に解決するならこちら！（おすすめです）

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

2020年6月27日