[保存版] PageSpeed InsightsでWebサイトを高速化するまでのすべて。0点→90点へ改善！

• Tweet

今日はGoogleが提供しているPageSpeed Insightsを使って、サイトの高速化・最適化を行うまでを紹介します。今回の、記事はめちゃ長いです。

表示スピードは訪問者離脱につながりますし、検索エンジンにも影響がある要素。早いにこしたことはありません。PageSpeed Insightsを使えば、あなたのサイトについてアクセススピードという点からみたチェックを行うことができます。

イリテクのサイトスピードは0点だった…

PageSpeed Insightsでは、PCとスマホでページのパフォーマンスを測定してくれます。85点以上いけばパフォーマンス高の評価。ちなみにGTmetrixも有名です。

…ちょっとこれはマズすぎるでしょう。ありえません。早速バリバリ改善していきましょう。

画像を最適化する

画像サイズが大きかったりするのもは適切なサイズに。JPGやPNGは圧縮しましょう。

有名で手軽なのはTinyPNG

まずは、かんたんで手軽なものから。こちらのサイトを開いて、画像を投げ込めば自動で画像を圧縮してくれるという優れたサイト。画像枚数が少ない場合は、ここで変換するといいですね。50%以上サイズを圧縮してくれる場合もあります。見た目の劣化は肉眼ではわからないくらい。

WordPressならEWWW Image Optimizerが絶対便利

EWWW Image Optimizerというプラグインがあります。これを使えば、WordPressに新規で画像をアップする際に、自動で圧縮してアップロードしてくれます。いちいち、圧縮した画像をアップしなくてもサーバー側でやってくれるというわけです。

39%も圧縮に成功しています。

もちろん既にアップ済みの画像についても、「メディア」を開いて一発変換もおこなうことができます。（数が多いとある程度時間はかかります）

詳しい設定や使い方は、以下の記事が詳しいので参考に。
参考）EWWW Image Optimizer の設定方法と使い方

WordPressのサムネイルサイズを調整

イリテクはWordPressで構築していますが、記事一覧のサムネイルがサイズの大きなものを読み込んでいました。これを表示サイズにあわせて小さいものに変更。

wp_get_attachment_image_src($attachment_id ,'medium');

mediumがサイズを指定するところ。thumbnail、post-thumbnail、small、medium、largeなどサイズが選べるのでこのあたりで調整を。

macで一気に画像圧縮

ローカルでフォルダに入っている画像をまとめて圧縮も可能です。OptiPNGという画像圧縮ライブラリを利用。macの場合は、パッケージ管理システムHomebrewでインストールできます。

Homebrewのインストールが終わったらoptipngをインストール。ターミナルを起動して「brew install optipng」とうつだけ。そして、cdで軽量化させたいディレクトリに移動します。下記コマンドでサブフォルダ内のものまで含めてまるっと軽量化が実行されます。

以下、サブフォルダ内まで含めてpngファイルをすべて最適化。

find . -name "*.png" | xargs optipng

こんな感じで次々に圧縮化されていく。

かなり処理が重ためなので、macのスペックが弱ければ、サブフォルダごとにやっていった方がいいです。

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

あまり変更がないものはブラウザにキャッシュさせると高速化できます。これはhtaccessにて設定可能。

.htaccessに以下を追記。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 15 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</ifModule>

apacheモジュールにmod_expiresがあれば適用される。それぞれタイプと有効期限を設定。これはサイトによってお好きなように。Googleによれば、Expires(有効期限)を1週間以上、最大で1年間先に設定した方がいいとのこと。

スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する

ページが表示される時に、複数の外部JavaScript/CSSファイルがあると次々に読み込みをかけるため、表示速度が遅くなります。これには、大きく2つ解決策があります。

asyncで非同期に読み込む

JavaScriptの外部ファイル読み込み時にタグにasyncをつけると非同期に読み込むようになります。ただ、Scriptによっては非同期にすると予期せぬ挙動になる場合もあるので注意。

<script async type="text/javascript" src="aaaa.js" async></script>

Bodyの下に配置

最初のファーストビューに外部読込ファイルをおかないということ。例えばの上に配置するだけ。

圧縮を有効にする

圧縮を有効にする設定をすれば、サーバーから圧縮したデータをブラウザに渡して展開します。やりとりするデータ量が減るため、高速化が期待できます。Apacheだと、mod_deflateモジュールを使用して圧縮を有効にすることができます。

<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</ifModule>

JavaScriptを縮小する

読み込むファイルとデータ量が少なければ表示も早くなります。そこで、まず使っていないScriptを無効化するのはもちろんのこと、ファイルをまとめられるものはまとめましょう。その分、外部読込のファイル数が減り、通信数も減ります。これはCSSにもいえます。

また、コード量の少ないJavaScript/CSSはインライン化して、外部ファイルではなくHTML内に直接記述することで外部読み込み数を減らして表示を早くすることにつながるので、こちらも場合によって検討を。

コードを縮小する

PageSpeed Insightsでサイトをチェックすると、Googleが親切にも縮小したコードを作成してくれます。これらをダウンロードして使うものあり。その際、もともとのファイルは残しておきましょう。今後、変更があった時はオリジナルを変更して、反映させる際に縮小させて使います。

CSS MinifyというWebサービスを使えば、CSSを貼り付けるだけで縮小したCSSを作成してくれます。これを使ってもOK。

WordPressの不要なmetaタグ等を排除

WordPressをそのまま使うと、必要のないタグがヘッダにたくさん入ります。不要なものは少しでも減らして軽く。これは、各テーマ内のfunctions.phpに記述することでフックをかけて、設定することができます。

remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'feed_links', 2);
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'wlwmanifest_link' );
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'index_rel_link' );
remove_action('wp_head', 'rest_output_link_wp_head');
remove_action('wp_head', 'wp_oembed_add_discovery_links');
remove_action('wp_head', 'wp_oembed_add_host_js');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');
remove_action('wp_head', 'wp_shortlink_wp_head');
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('wp_print_styles', 'print_emoji_styles' );
remove_action('admin_print_styles', 'print_emoji_styles');

各設定の意味など、詳しくは以下を参考に。ずいぶんすっきりします。Googleで調べると、いろいろでますので、必要に応じて不要なタグを消していきましょう。
参考）ヘッダに書き出されるmeta情報の削除方法と意味

各プラグインをインストールすると、プラグインによってはwp_head出力時に外部CSSの読込を行うものがあります。その時は、あらかじめそのCSSをコピペで一つにまとめ、各プラグインにより外部CSS読込は行わないようにします。

//各プラグインCSSを削除
function my_dequeue_styles() {
    wp_dequeue_style( 'yarppWidgetCss' ); //不用CSSを削除
    wp_dequeue_style( 'toc-screen' );
    wp_dequeue_style( 'wp-pagenavi' );
    wp_dequeue_style( 'amazonjs' );
    wp_dequeue_style( 'amazonjs-custom' );
    wp_dequeue_style( 'syntaxhighlighteranchor' );
}
add_action( 'wp_print_styles', 'my_dequeue_styles' );

参考）WordPressでプラグインから出力されるjQueryライブラリやCSSを整理する

そして結果は90点に！

結果は90点に！頑張った！

どうしてもfacebookやtwitterなど、外部系のプラグインを使うと評価が下がってしまいます。あと、GoogleAnalyticsとかAdsenseとかね。ただ、これはこちらでどうしようもありません。あくまでも評価点は目安なので、自分のサイトでできるところまで最適化して表示スピードをあげましょう。

イリテクでは、PageSpeed Insightsを使ったサイト改善のお手伝いも行っておりますので、お気軽にお問い合わせください。

• Tweet

PROFILE

プロフィール

入江 慎吾
サービスで世界をよりよくするために挑戦中。個をエンパワーメントするプロダクトをつくっています。個人開発コミュニティ「入江開発室」を運営（約300名） / MENTAなど20個以上のプロダクトを開発。
（詳しいプロフィール）

PRODUCT

イリテクで開発したプロダクト