自社サイトを高速化してみた（nginx + wordpress on gtmetrix）

みなさんこんにちは！個別指導塾コミット塾長、AWESOME開発担当の船津です

プラグインがたくさん入ってなんだか重たくなってきたような気がしたのでサイトの高速化に取り組んでみました。
計測はhttps://gtmetrix.comで行いました

改善してみましょう

それぞれの項目について改善方法を検討してみましょう

Optimize images,Minify HTML,Minify CSS,Minify JavaScript

ファイルの最適化ですね。
html, css ,jsファイルはgulp等自動化ツールでひとまとめにしておきましょう。
バラバラのままだとhttpリクエスト数が増加するのでスコア低下に繋がります。

ブログページの画像などはいちいち最適化すると手間がかかるので良いのですが、トップページの画像くらいはgulp, grunt,その他webサービスを使って最適化しておきましょう。

Defer parsing of JavaScript

webページは普通、Javascript、css、htmlなどが全て読み込まれてから描画されます。元々そこまで大きくなりようのないhtmlはともかく、ファイルの大きいcss,jsファイルはページの描画を遅らせがちです。そこでjavascript,cssを非同期で読み込むAsync JS and CSSをインストールしましょう。
これだけでかなりスコア上昇が期待できると思います。

Enable gzip compression

テキスト等をgzipで圧縮して配信します。
弊社ではこんな感じにしてます

/etc/nginx/nginx.conf

gzip on;
gzip_http_version 1.0;
gzip_vary on;
gzip_comp_level 6;
gzip_types

text/plain
text/xml
text/css
text/javascript
image/svg+xml
application/xhtml+xml
application/xml
application/x-font-ttf
application/rss+xml
application/atom_xml
application/javascript
application/x-javascript
application/x-httpd-php
application/json;

Leverage browser caching

キャッシュの有効期限を設定します。

nginxの設定ファイルに以下を追記

location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|)$ {
expires 1M;
}

Use cookie-free domains

Use cookie-free domainsを改善するのは結構厄介でした
ここを見てみると
静的コンテンツをサブドメインに置いてね、とのことだったので
wp-config.phpに以下を追記します

define("COOKIE_DOMAIN", "awe-some.net");
define("WP_CONTENT_URL", "https://cf.awe-some.net/wp-content");

CloudFrontにコンテンツを置く方法は以下のサイトを参考にしてください。

WordPressサイトをCloudFrontで配信する
今回はwordpress全体をCloudFront配信にはしません。
一部コンテンツのみ呼び出します。

これでUse cookie-free domainsのスコアは上がったのですが、結果として少し遅くなって全体のスコアは下がってしまいました。

CloudFrontのgzip機能を使えばもう少し早くなるのかな？
とも思いましたが、そこまでスコアアップは望めなさそうだったのでやめました。

wp-content以下をCloudFrontからの配信にすれば、管理画面での不具合なんかを回避しつつ早くできるかな？と思いましたが、そんなに簡単では無さそうですね。

最終的にこんな結果になりました

Yslowの判定基準でCDNからの配信が大きく影響するので、普通にサーバーからコンテンツを配信する場合はこれくらいが限界ですね

おしまい

みなさんも頑張ってサイトの表示スピードを上げてみてくださいね。
次回はwordpress全体をcloudfront配信にしてみます。

管理画面や、記事更新でいろいろと不具合が出そうな気がしますね…