ども!ゆうき(@ShakaSeYuki)です!
ブログを作ったものの、何故か読み込みが遅い。
そんな経験あるかと思います。
遅い原因を調べることができるサービスがあります。
GTmetrixとは
GTmetrixは自分のサイトのURLを入れるだけでどこに問題があるのかを自動的に解析
してくれるサービスです。

この他にもgoogleが提供している
もあります。
GTmetrixの使い方
使い方は簡単!
自分のURLいれて「Analyze」をクリックするだけ。
解析が終了するとこのようなページが表示されます。

ぼくのサイトのスコア
トップページにgoogle adsenseなどの広告を載せていると、
広告のデータの影響受けて低くなることがあります。
今回みやちるさん(@Miyak_Okinawa)から依頼を受けたので、速度改善のお手伝いをすることにしました。
改善前が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設定するの怖い方はプラグインがあるのでそちらを使ってみましょう。

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

サイドバーに出ていた埋込み動画
こんな感じで出ていました。プラグインで出していたのかな?
これも原因で遅くなっていた&スマホで見る人が多いので
サイドバーに出している意味あまりないと思ったので除去してもらいました。
まとめ
いかがだったでしょうか?
改善点は人それぞれだとは思いますが、
- Gzip圧縮
- ブラウザキャッシュの利用
- 画像最適化
はしておいた方がいいかもしれませんね。
他にも様々なブログに関するお悩み解決をしています。
をご覧ください。
コメントお待ちしてます!