0%

Marketingウェブマーケティングブログ

Posted:2018.03.11

ウェブサイト表示高速化の施策で快適なサイト閲覧を目指す

この記事の目次

ウェブサイトの表示高速化が注目されるようになり、今回は改めてサイト高速化のためのアプローチを行なっていきたいと思います。当ウェブサイトもフロントエンドの方にこだわりすぎてしまい、なかなかサイト表示高速化に目を向けてきませんでしたが本格的に着手していきます。

 

前回記事「オンラインツールでウェブサイトのページ表示速度をチェック」ではウェブサイトの表示速度をチェックできるオンラインツールを紹介しました。今回はそれらのツールを使って提案された改善策を順番に見ていきたいと思います。

 

まずは、PageSpeed InsightsとMobile Website Speed Testing Toolなどのサイト表示スピードツールにて診断を行います。スコアと共に今回は次のような最適化のための改善提案をいただきました。

・ブラウザのキャッシュを活用する
・gzipでリソースを圧縮する
・サーバーの応答時間を短縮する
・レンダリングをブロックしている JavaScript/CSS を排除する
・画像の最適化

 

ちなみに下記の施策については既に対応済みだったので今回は省略しました。これらは全てgulpのタスクで処理しています。詳しくは過去記事「gulpをローカルにインストールしてプロジェクト内で使用する」にて紹介しています。

・CSSの圧縮(minify化)
・javascriptの圧縮(minify化)
・画像の圧縮

それでは改善提案に向けた具体的な施策を行なっていきます。

 

「ブラウザのキャッシュを活用する」への対応

apacheを使用している場合には、.htaccessファイルにキャッシュ時間の設定を行います。ただしあまり短いとスコア対象外となるので1週間くらいを設定します。必要なファイルタイプは全て指定しておきます。ただしグーグルアナリティクスを使用している場合には仕様上どうしてもクリアできないので諦めてください、、

【.htaccess】

<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 weeks"
  ExpiresByType text/html "access plus 1 weeks"
  ExpiresByType text/css "access plus 1 weeks"
  ExpiresByType text/javascript "access plus 1 weeks"
  ExpiresByType application/javascript "access plus 1 weeks"
  ExpiresByType application/x-javascript "access plus 1 weeks"
  ExpiresByType image/gif "access plus 1 weeks"
  ExpiresByType image/jpg "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 weeks"
  ExpiresByType font/woff "access plus 1 month"
  ExpiresByType application/font-woff "access plus 1 month"
  ExpiresByType application/x-font-woff "access plus 1 month"
</ifModule>

 

 

gzipでリソースを圧縮する

サイトデータをサーバー側でgzipという技術を使って圧縮させ、クライアント側に送信するようにすることで表示速度が速くなります。こちらも.htaccessファイルに指定することで適用できます。

【.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
  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>

 

gzipで圧縮されているかはブラウザのデベロッパーツールでhttpレスポンスヘッダーの「Content-Encoding」の値にgzipがあればOKです。

 

サーバーの応答時間を短縮する

サーバーからのレスポンスに時間がかかっている状態です。改善するにはいくつか方法はありますが、サーバーのスペックに依存することが大きいようです、、応答時間は0.2秒以内を目指します。主な改善案を下記にまとめておりますので参考にどうぞ。

 

1. サーバーのスペックを上げる

今使っているサーバーのスペックを上げ、軽快に動作する環境を整えていきます。メモリの数値なども確認するようにします。比較的安価なレンタルサーバーの場合はやはり難しいようです。

 

2. PHPのバージョンを上げる

現在はPHPのバージョンが7系が主流となっており、5系を使っている場合と比べて高速に動作するようになっています。5系を使っている場合には7系に切り替えることをオススメします。

 

3. WordPressで動作が重いプラグインを停止する

WordPressを使っている場合、各種プラグインを導入しているケースもあるかと思いますが、中にはページ速度に影響する動作が重くなるプラグインもあります。「P3(Plugin Performance Profiler)」といったプラグインの速度を計測できるプラグインもありますので、こういったツールを使って原因となっているプラグインを停止します。

 

レンダリングをブロックしている JavaScript/CSS を排除する

これはブラウザのページレンダリング(ページ描画)にjavascriptやCSSが読み込み速度に影響しているために指摘される項目です。ケースごとにいろんな対応方法がありますので、それぞれに適した施策を行なってきます。

 

1. async属性やdefer属性を指定したjavascriptの非同期読み込み

scriptタグにasync属性やdefer属性を付与することで、javascriptを非同期に読み込むことができます。こうすることでページのHTMLとは別に非同期でjavascriptファイルの読み込みが始まるのでその分速くなります。ただしasync属性では読み込み順がランダムになりますので、jQuery何かを使っているとエラーを起こす場合もあります。そんな時にはdefer属性を使うことで読み込み順が維持されるようになります。

<script async src="./sample-async.js">
<script defer src="./sample-defer.js">

 

2. javascriptはbody終了タグ直前に記述する

ページの上部から順に読み込まれていくので、headタグ内にjavascriptが記述されている場合にはファーストビューの描画される前に読み込まれることになります。そのためファーストビューの描画が遅くなります。javascriptの読み込みよりもページ描画を優先させるためにjavascriptはbody終了タグ直前に記述するようにします。

    <script src="./sample.js">
  </body>
</html>

 

3. headタグ内にCSSをインラインで記述する

先ほどと同じような感じでCSSが影響してファーストビューの描画が遅くなっている状態です。そのためファーストビューの描画に必要はCSSに関してはheadタグ内にCSSをインラインで記述する方法が推奨されているようです。ただしメンテナンスの観点から見るとあまり好ましくないのですが、、必要に応じて取り入れるのが良さそうです。

<head>
  // 〜省略
  <style>body { margin: 0 auto; width: 100%; height: auto; font-size: 16px; color: #333; …}</style>
</head>

 

 

画像の最適化

これは画像の圧縮以外でも、要素サイズに対して画像サイズが大きい場合にも指摘されるようです。ですので画像サイズはできるだけ要素の大きさに近いサイズにしておく必要があります。特にレスポンシブの場合には画像のサイズを大きめにしてCSSでサイズ調整していることも多いので見直してみるといいかもしれません。

 

これで施策前後の数値を見てみますと、それぞれの指標で数値が向上しているのが確認できます。ただし、ページ速度を意識しすぎてデザインやコンテンツが損なわれるようでは本末転倒ですので、あくまで意識する程度にとどめておいた方がいいかもしれませんね。当サイトではやはりページ内の情報やサイト設計上、完璧に施策を行うことは難しいと判断しました。

 

ウェブサイト表示高速化の施策で快適なサイト閲覧を目指す

 

いかがでしょうか、Googleもページ表示速度はSEOに影響してくると公式にアナウンスしているので、これらのスコアも重要視した方がいいかもしれませんね。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】