PHP+SQLのアプリケーションのほとんどに言えることではありますが、WordPressは手軽で便利で大抵のサーバーで使える反面、普通のレンタルサーバーなんかだとどうしても実行速度が遅く重いサイトになりがちです。
私は仕事でWordPressで構築したサイトをいくつか運営していまして、今はそれぞれKUSANAGIなどの高速なサーバー環境に移転させていますが、移転前はスペックも良くなく自由も効きにくいサーバーにありましたのでWordPressの実行速度もなかなかひどいものでした。
一応共用ではなく専用サーバーだったのですが、殆ど共用と変わらない程度で収益にも影響が出るレベルだったのですが、レンタルサーバーでも可能なくらいの範囲の手法でなんとか許せるくらいの速度に改善できたので幾つかここで紹介しとこうと思います。
というわけでroot権限なし、プラグインとhtaccessあたりでどうにかできる範囲です。
ちなみにおおまかなサイトの速度情報はPageSpeed InsightsやWebPagetestあたりでチェックできます。
PageSpeed Inshightsのスコアが黄色(65点)以上くらいでギリ合格、赤は落第、要改善です。
もちろん緑(85点)を目指すに越したことはないのですが、この辺りになると実速度の他に配信ルールなんかの見直しが必要なのでひとまず黄色に収まる位を目指すということで。
ちなみにこのサイトは70点強くらいです。まだまだ感がかなりありますがサーバーはそれなりに高速なのでひとまずこんなもんで落ち着けてます。
画像を圧縮、最適化する
サイトの転送量で大部分を占めるのは画像等のメディアファイルです。
ですのでコイツらを軽くしてあげればサイト全体の転送量は劇的に減ることになります。
ポイントとしては2つ、画像の大きさ(解像度)と圧縮率です。
イラストを載せる等の場合は解像度はある程度取りたいと思うので仕方ないですが、記事中にちょっとした写真やスクリーンショット何かを挿入するのであればそう大きな画像でなくても良いはずです。
サイトのレイアウトにもよりますが、iPhone6のビューポートが横375ですのでretinaに対応することを考えたとして倍の750から800台程度までのサイズになるように、トリミングや拡縮した上で記事に配置するようにします。
WordPressは設定したサイズにリサイズしたものを生成してくれる機能があるのでそれでサイズを合わせるのも良いかと思います。
次に画像の圧縮です。
新しくアップする画像は作成の際に適度に圧縮すれば良いのですが、過去の記事とメディアがある場合は面倒なのでプラグインを使うとよろしいです。
プラグインはEWWW Image Optimizerを使います。
このプラグインを使うとメディアライブラリ内の画像ファイルを一括でロスレス圧縮することができます。
PNGの画像をJPEGに変換などもできますので入れておくと何かと便利な奴です。
使い方は簡単で、インストールしたらダッシュボードのメディア>Bluk Optimizeを選択。
Start optimizingをクリックするとメディアライブラリ内の全ての画像が圧縮されます。
数が多いと結構時間と負荷がかかりますのでそこだけ注意を。
また、画像が格納されているwp-content/uploads以下に対してサーバーが書き込み権限がないと実行できませんのでエラーが出た場合はパーミッションを変更してあげてください。
画像を遅延読み込みする
1ページ内に画像が複数ある場合、ファーストビューにある画像を優先して読み込んで、下の方にあるものはスクロールした際非同期に読み込んだほうが効率的です。
そのような動作をやりたい場合jQueryプラグインのLazy Load系のものを使うのが一般的ですが、記事内やウィジェットの画像に自動的にLazy Loadを適用してくれるWordPressプラグインがあるのでそれを使うとラクです。
今使っているSimplicityテーマにはデフォルトでLazy Loadが組み込まれていますので必要ありませんが、それ以外のテーマの場合はa3 Lazy Loadを使う事が多いです。
インストールしてプラグインを有効化すれば基本的な遅延読み込みは有効になりますのでそこまで設定は必要ありません。
一応3点、
Theme Loader Functionでサイトのヘッダーでスクリプトを読み込むかフッターで読み込むかを選択できます、が基本的にフッターの方が良いと思います。
Effect & Styleの項目で読み込み時にフェードインするかぐるぐる画像を表示するか、読み込むまでの色をどうするか設定できますがこれはお好みで。
Thresholdは画像の何px手前までスクロールした時読み込むかです。0でもいいのですが、スクロールして画面に入ってからロードが完了するまでに少しタイムラグができてしまいますので、200pxくらいに設定するのをおすすめします。
意外と長くなってしまったので続きは次回
