PageSpeed Insightsの結果をGoodに改善する(パソコン編)

当ウェブサイトの速度

ウェブサイトの速度は、Googleが提供するPageSpeed Insightsによりチェックすることができる。

当サイトの診断結果は「パソコン: Medium 62/100」、「モバイル: Medium 61/100」だった。

PageSpeed Insightsの診断結果

サイト高速化に関して、今まで何もしてこなかったので、これを期に測定結果を「Good 80/100」まで改善させてみる。

最適化のためのヒント

PageSpeed Insightsは、診断結果と併せて、最適化のためのヒントも与えてくれる。

最適化のためのヒン

これを参考に1つずつ対応する。

最適化対応

CSS を縮小する、JavaScript を縮小する

通信量を節約するために、CSSやJSなど圧縮できるものは圧縮しようぜ!ということ。

Autoptimize

WordPressプラグインの「Autoptimize」を利用して対応する。

以下のように必要なチェックを入れて変更を保存する。

Autoptimize

PageSpeed Insightsで再測定すると「パソコン: Medium 68/100」に改善された。

PageSpeed Insights

圧縮を有効にする

gzip や deflate を活用して通信量を節約しようぜ!ということ。

Apacheの「.htaccess」を更新する

ウェブサイトのディレクトリにあるApacheの「.htaccess」を更新する。

$ cd /var/www/html/[ディレクトリ名]
$ ls -a
.htaccess

以下のように、gzip や deflateによる圧縮を適用したいファイルの種類を「.htaccess」に追記する。

$ vim .htaccess
<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

#画像は圧縮しない GIF、JPEG、PNG、ICO
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ 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 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-woff
AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>

(ソースコード引用元:.htaccessファイルでgzip圧縮させてサイト表示速度を向上させる方法

PageSpeed Insightsで再々測定すると「パソコン: Medium 74/100」に改善された!お、おぉ。。

PageSpeed Insights

ブラウザのキャッシュを活用する

Apacheの「.htaccess」を更新する

これもApacheの「.htaccess」を更新することで対応。

以下を付記することで、ブラウザ側のキャッシュの有効期限を設定する。

$ vim .htaccess
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 2 days"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType text/css "access plus 1 days"
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/x-icon "access plus 1 weeks"
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 216000 seconds"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
</ifModule>

(ソースコード引用元:WordPressならブラウザキャッシュを設定してページ表示速度を高速化する方法

PageSpeed Insightsで再々々測定すると「パソコン: Medium 76/100」に改善された。

PageSpeed Insights

画像の圧縮

画像のフォーマットも最適化しようぜ!ということ。

EWWW Image Optimizer

プラグインの「EWWW Image Optimizer」を使って対応する。

インストール後、メディアのメニューの「一括最適化」より処理を実行。

これには少し時間がかかる。自分の場合700枚ほどの画像最適化に30分程度かかった。

EWWW Image Optimizer

PageSpeed Insightsで再々々々測定すると「パソコン: Good 81/100」に改善された!おおぉ!!

PageSpeed Insights

追加のキャッシュ対応

キャッシュの活用をもう少しやってみる。

WP Super Cache

プラグイン「WP Super Cache」を有効化。

PageSpeed Insightsで再々々々々測定すると「パソコン: Good 83/100」に改善された。

PageSpeed Insights

モバイルはさらなる改善が必要

以上の対応を行ってもモバイルは依然として「Medium 73/100」。

PageSpeed Insights

したがって、モバイル用の追加改善が必要であるが、詳細は別記事でまとめる。

所感

今回の改善により、実際の体感描画速度はだいぶ速くなった。

SEOとしても目に見える改善があれば嬉しいのだが、結果はいかに!?

Sources

兵庫県西宮市生まれのフリーランスRailsエンジニア。海外を拠点にデジタルノマド生活中。/ 前職・資格:公認会計士 / プログラミング言語:Ruby, JavaScript, HTML, CSS / 日本語・英語
コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です