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

2017年9月18日

foundation

foundation, WordPress, WP Fastest Cache, 圧縮, 高速化

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

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

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

PageSpeed Insights

思いの外、スコアがよくありません。

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

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

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

<link rel="stylesheet" href="/wp-content/themes/theme_name/css/foundation.min.css">

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

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

<script src="/wp-content/themes/かtheme_name/js/vendor/foundation.min.js"></script>

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

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

<script async src="/wp-content/themes/theme_name/js/vendor/jquery.js"></script>
<script async src="/wp-content/themes/theme_name/js/vendor/what-input.js"></script>
<script async src="/wp-content/themes/theme_name/js/vendor/foundation.min.js"></script>
<script async src="/wp-content/themes/theme_name/js/app.js"></script>

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