foundation + WordPressのサイトを簡単に高速化する方法

Google PageSpeed Insightsのイメージです foundation

foundation v6.4.2+WordPress v4.8.1のサイトを簡単な方法で高速化してみます。

私自身、これまでサイトの高速化にはあまり真面目に取り組んだことがありません。foundationとWordPressでシンプルなサイトを作っているのだから、必要ないと思い込んでいました。

ところがです。「PageSpeed Insights」というGoogleの測定サイトで計測してみてビックリ。

PageSpeed Insights

思いの外、スコアがよくありません。
Google PageSpeed Insightsの計測結果1イメージですGoogle PageSpeed Insightsの改善前計測結果2イメージです

あまりに心外だったので、、ちょっと気合を入れて見直しました。ただ、あまり時間をかけたくなかったので、思いつく範囲で簡単にできるところを試してみました。

1. header内のfoundation.cssへのリンクを、圧縮されたfoundation.min.cssに書き換えます。ファイル自体はフォルダ内にありますので、ファイル名の変更のみでOKです。

更新したファイルをサーバーにアップロードします。

2. bodyタグを閉じる手前、ページ下部のfoundation.jsへのリンクを、圧縮されたfoundation.mini.jsに書き換えます。こちらもファイル自体はフォルダ内にありますので、ファイル名の変更のみでOKです。

更新したファイルをサーバーにアップロードします。

3. 同じくページ下部のscriptを非同期で読み込むように書き換えます。ページ下部のコードで、srcの前にasyncと書き込みます。

更新したファイルをサーバーにアップロードします。

4. 「PageSpeed Insights」の画面の下のほうに、「このページ向けに最適化された画像、JavaScript、CSSリソースをダウンロードできます。」とあります。リンクをクリックすると圧縮されたファイルがダウンロードされます。

このページ向けに最適化された画像、JavaScript、CSSリソースをダウンロードできます。

測定結果によって、ダウンロードされるファイルが異なります。

5. cssフォルダがあれば、foundation.css以外のファイルを、サーバーにアップロードされているcssファイルと置き換えます。

6. jsフォルダがあれば。foundation.js以外のファイルを、サーバーにアップロードされているjsファイルと置き換えます。

それぞれ、サイズが半分ほどになると思います。

7. 画像があれば、必要に応じて、サーバーにアップロードされているファイルと置き換えます。

「PageSpeed Insights」で、再度計測してみます。

Google PageSpeed Insightsの改善後計測結果1イメージです

ここまででも十分ですが、もう一手間かけてみます。

8. 「WP Fastest Cache」というキャッシュのプラグインを導入します。

WP Fastest Cacheイメージです

追加して、「設定」タブすべてにチェックを入れれば準備OKです。

9. 三たび「PageSpeed Insights」で、再度計測してみます。

Google PageSpeed Insightsのさらに改善後計測結果1イメージですGoogle PageSpeed Insightsのさらに改善後計測結果2イメージです

期待以上に改善しました。得点も最初の2倍、パソコンは満点近くまでスコアが伸びました。

コードをちょっと書き換えて、ファイルを置換して、プラグインを入れるだけで、ここまで改善します。

このサイトは、文字だけのブログに近い校正で、まだページ数も多くありません。そういう事情があるもののやはり、foundation+WordPressという土台が良いからこそ、という気がします。

ここで注意です。

圧縮したファイルに置き換えることで、すでに設置してあるスクリプト等が正常に動作しなくなる場合があります。自己の責任においてお試しください。

なお、サイトの内容によっては、結果もことなってきますのでご了承ください。ちなみに、実験したサイトは、前の記事の手順で作ったサイトです。

foundationを使ったWordPressのテーマ作成手順

コメント