みなさんこんにちは！個別指導塾コミット塾長、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を改善するのは結構厄介でした
ここを見てみると
静的コンテンツをサブドメインに置いてね、とのことだったので
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配信にしてみます。
管理画面や、記事更新でいろいろと不具合が出そうな気がしますね…
