ブログや情報サイトをやっていて必ずぶち当たるのがページの高速化。しかし高速化と言っても何から手を付けてよいのやら…とりあえずPageSpeed Insightsを見たら40/100とか言われた！みたいな人にぜひ読んでいただきたい記事です。
なぜページ表示の高速化が必要なのか
ページ表示を高速化することは大きく2つの意味があります。1つ目はユーザビリティ。いつまで経っても表示されないウェブページをあなたは見る気になりますか？人間は3秒以上ロードに時間がかかると離脱してしまうと言われています。
2つ目はSEO。Googleはページの高速表示を検索結果ページの表示順に使用するとしています。つまり、速いページほど上に上がるということです。ただし、これには裏があって、表示順の判断基準の一つにしているだけで、絶対的な必要条件ではないということです。
全く同じ情報が掲載されたページがあって、片方が5秒、片方が1秒で表示できるとしたら速い方が上になるという程度のもの。つまり、高速化に心血を注ぐぐらいなら記事書いてた方がいいよってぐらいの話です。大事なことですが、スコアを100にする必要は全くありません。見た感じうわ遅！ってぐらいじゃなければ大丈夫です。スコア100は本当に大変です。
しかし、もちろん遅いよりは速い方がいいに決まってますよね。この記事ではいかにWordPressサイトを高速化するかを取り上げたいと思います。
まずは表示速度を計測してみよう
PageSpeed Insightsを開きます。URL入力欄に自分のサイトのURLを入れてください。しばらくすると点数が表示されます。よく点数の良し悪しで一喜一憂している記事を見かけますが全く意味がないので忘れてください。点数よりも項目別に問題のあるところを潰さないといけないのです。
項目を一個一個見ていきましょう。なお、改善できる項目は人によって違ってくるのでご注意ください。このサイトはモバイルで86/100、PCで96/100を取っています。このPageSpeed Insightsの結果をわかりにくくしているのが、何をやったらその項目が早くなるかよくわからないことです。この記事では対策するべき箇所別に監査項目を並べ直します。
WordPressテーマファイルを編集すると上がるもの
レンダリングを妨げるリソースの除外
JSやCSSをインラインにしたらいいよという項目で、正直めっちゃ大変です。やらなくていい気が。
使用していないCSSの遅延読み込み
重要でないCSSはasync属性を付けて読み込むとスコアが上がります。
ウェブフォント読み込み中のテキスト表示
ウェブフォントを利用する際には先にテキストを表示するように設定する。※ただし、アフィリエイトや情報サイトではウェブフォントの必要性は低いです。きれいに見えるからという安易な理由でウェブフォントを導入すべきではありません。
メインスレッド処理の最小化
気にしなくていいです。対応は難しいです。
CSS/JavaScriptの最小化
CSSやJavaScriptの改行を消してサイズを小さくします。これは対応できるのでやってみましょう。このようなサービスで実施できます。FTPでCSSファイルなどをダウンロードして上記のサービスで圧縮し、FTPで上書きします。
過大なDOMサイズの回避
気にしなくていいです。
JavaScriptの実行にかかる時間
これも気にしなくていいです。
レンタルサーバの設定で上がるもの
サーバ応答時間の短縮（TTFB）
これは本当に超重要です。TTFBが1000ms（1秒）を超えてくるとページが真っ白な時間が長くなってユーザビリティもSEO的にもよろしくありません。解決策は3つ。速いレンタルサーバを借りる、キャッシュプラグインを利用すること、いらないプラグインを整理することです。キャッシュは気軽に導入できますので、WP Super Cacheなどを入れて試してみましょう。巷ではチューニングどうこうと言われていたりもしますが、レンタルサーバで使っている分には設定などのチューニングの余地はほぼありません。WordPressの設定でもどうこうできる問題でもありません。また、TTFBが大きくなる原因として、重すぎるテーマと重すぎる（多すぎる）プラグインがあります。当サイトではCocoonを使っています。高機能で非常に優れたプラグインですが、一部のレンタルサーバで使うにはちょっと重すぎます。さくらのレンタルサーバ、ConoHaWING、エックスサーバーではサクサク動きました。速いと言われているレンタルサーバーなら比較的安心して利用できます。
実際、Cocoonを入れるだけでパフォーマンスが50％ぐらい下がることもあります。さらに便利だからといってプラグインをあれこれ入れるとこれもどんどん重くなっていきます。
Jetpackというプラグインがありますが、入れるだけでこれも3割ぐらいパフォーマンスが悪くなります。しかし、こういったパフォーマンス悪化問題はキャッシュプラグインでたいていの場合解消できます。プラグインを減らすかキャッシュを使うか選ぶとしたら、変に頑張るよりもキャッシュを使ったほうが手っ取り早いです。レンタルサーバーでCocoonを使っている人はキャッシュプラグインを設定するか、速いと評判のサーバーを使うのが良いでしょう。
静的なアセットとキャッシュポリシーの適切な設定
ブラウザキャッシュなども適切に設定しましょうという話ですが、あまりブラウザキャッシュさせるのもよろしくないのでそこまで重要ではないです。W3 Total Cacheのブラウザキャッシュ設定が使えます。
テキスト圧縮の有効化
.htaccessを使えれば簡単に設定できますので、（レンタルサーバ名）＋GZIP圧縮などで検索してみましょう。エックスサーバーやConoHaWingなどでは管理画面で設定できます。
ファイルの設定など
次世代画像フォーマットの採用
WebPなどの高圧縮画像を利用することですが、既存ファイルをダウンロードして変換してアップロードし直し、記事内のリンクを貼り替える必要があるのでけっこう大変です。そこまで重要ではないです。
適切な画像サイズ
これは超重要です。サムネイルサイズにものすごい大きな画像を使っていたり、とにかく高解像度の画像を使っていたりしてページ容量が暴騰しているサイトをよく見かけます。Imsanityなどのプラグインでアップロード時にリサイズをかけるのもいいでしょう。アップロード時に横幅1600以下ぐらいにしておくとよいです。
過大なネットワークペイロードの回避
ページの総容量を大きくしすぎるなと言う話ですが、ページ容量を食うのがほぼ画像なので、画像をいかに圧縮するかにかかっています。↑のプラグインで調整したり、今上がっている画像を一括ダウンロードして、バッチで変換して上げ直すのもありかもしれません。大変ですが、ページ容量が大きすぎるのは本当に大きな問題なので対処したほうが良いでしょう。
オフスクリーン画像の遅延読み込み
Lazy Loadできるプラグインを入れることで対応できます。
アニメーションコンテンツでの動画フォーマットの使用
GIFアニメはアニメーションファイルとして適切ではありません。MP4などを使うようにしましょう。
さて、Google PageSpeed Insightsについてご紹介してきました。繰り返しますが、絶対に100点にする必要はありませんし、スコアを上げることに心血を注いで記事執筆を疎かにする必要もありません。ただし、基本的な部分を押さえて遅すぎる部分は改善するという気持ちで見ていくと良いでしょう。
