ブログが重い?GTmetrixの項目を参考にブログの速度改善をしてみよう

SPONSORED LINK
GTmetrixを参考にブログ速度を改善 Blog

ども!釈迦SE尤稀(@ShakaSeYuki)です!

 

ブログを作ったものの、何故か読み込みが遅い。

そんな経験あるかと思います。

遅い原因を調べることができるサービスがあります。

GTmetrixとは

GTmetrixは自分のサイトのURLを入れるだけでどこに問題があるのかを自動的に解析

してくれるサービスです。

GTmetrix | Website Speed and Performance Optimization
GTmetrix is a free tool that analyzes your page's speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers actionable ...

この他にもgoogleが提供している

PageSpeed insights

もあります。

GTmetrixの使い方

使い方は簡単!

自分のURLいれて「Analyze」をクリックするだけ。

解析が終了するとこのようなページが表示されます。

ぼくのサイトのスコア

ぼくのサイトのスコア

トップページにgoogle adsenseなどの広告を載せていると、

広告のデータの影響受けて低くなることがあります。

(先程測ったらD判定になってました。)

 

今回みやちるさん(@Miyak_Okinawa)から依頼を受けたので、速度改善のお手伝いをすることにしました。

MIYACHIL SocialWoker | 日本初!福祉系YouTuberとして「面白い福祉」を創るために「福祉支援員みやちるの脳内」を発信中!
みやちるソーシャルワーカー(生活困窮者支援)が、福祉をもっと楽しくするためにアレコレ語るブログ。日本初の福祉系YouTuber。沖縄から発信中。

 

改善前がE判定。

改善前

ブログの改善前

 

改善後にC判定まで持っていけました!

改善後

改善後はEからCに

速度改善を試した項目

みやちるさんの速度遅い原因が、2点ほどありました。

サーバー側でのGzip圧縮処理とブラウザキャッシュの利用

サイドバーのyoutube埋込み動画(プラグインを使ってPCのみ表示)

まずはこの2点を解決しようと思い色々試行錯誤しました。

Gzip圧縮処理とブラウザキャッシュの利用

Gzip圧縮処理とは、ファイル容量を圧縮して転送速度を速くしましょうって機能です。

ブラウザキャッシュは、一定期間ブラウザの方に画像情報を

キャッシュさせることによって速く表示出来るようになります。

 

具体的にはWPテーマ「Cocoon」の.htaccessの高速化処理のものを引用しました。

# ETags(Configure entity tags) を無視する設定
<ifModule mod_headers.c>
    Header unset ETag
</ifModule>
FileETag None
# Enable Keep-Alive を設定
<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>
# MIME Type 追加
<IfModule mime_module>
    AddType text/cache-manifest .appcache
    AddType image/x-icon .ico
    AddType image/svg+xml .svg
    AddType application/x-font-ttf .ttf
    AddType application/x-font-woff .woff
    AddType application/x-font-woff2 .woff2
    AddType application/x-font-opentype .otf
    AddType application/vnd.ms-fontobject .eot
</IfModule>
# プロクシキャッシュの設定(画像とフォントをキャッシュ)
<IfModule mod_headers.c>
    <FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
    # プロキシサーバーが間違ったコンテンツを配布しないようにする
    Header append Vary Accept-Encoding env=!dont-vary
</IfModule>
# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
    ExpiresActive On
    # キャッシュ初期化(1秒に設定)
    ExpiresDefault "access plus 1 seconds"
    # MIME Type ごとの設定
    ExpiresByType text/css "access plus 1 weeks"
    ExpiresByType text/js "access plus 1 weeks"
    ExpiresByType text/javascript "access plus 1 weeks"
    ExpiresByType image/gif "access plus 1 weeks"
    ExpiresByType image/jpeg "access plus 1 weeks"
    ExpiresByType image/png "access plus 1 weeks"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType application/pdf "access plus 1 weeks"
    ExpiresByType application/javascript "access plus 1 weeks"
    ExpiresByType application/x-javascript "access plus 1 weeks"
    ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/x-font-woff2 "access plus 1 year"
    ExpiresByType application/x-font-opentype "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>
# Gzip圧縮の設定
<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE
    # 古いブラウザでは無効
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
    # 画像など圧縮済みのコンテンツは再圧縮しない
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/js
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>

 

上記の項目を.htaccessに入れるだけでgzip圧縮やキャッシュ設定など色々してくれます。

.htaccess設定するの怖い方はプラグインがあるのでそちらを使ってみましょう。

WP Fastest Cache
最もシンプルで速いWP キャッシュシステム

サイドバーの埋込み動画の除去

サイドバーに出ていた埋込み動画

サイドバーに出ていた埋込み動画

こんな感じで出ていました。プラグインで出していたのかな?

これも原因で遅くなっていた&スマホで見る人が多いので

サイドバーに出している意味あまりないと思ったので除去してもらいました。

まとめ

いかがだったでしょうか?

改善点は人それぞれだとは思いますが、

  • Gzip圧縮
  • ブラウザキャッシュの利用
  • 画像最適化

はしておいた方がいいかもしれませんね。

 

他にも様々なブログに関するお悩み解決をしています。

詳しくは迷える子羊達へのブログ説法の履歴(ポートフォリオ)

をご覧ください。

コメントお待ちしてます!