ウェブサイトの制作は、表示時間なども考慮しないといけません。
ソースの読み込みや画像サイズ等、何を改善すればどれくらい表示速度が上がるのか、簡単にわかれば便利ですね。
でも、表示速度が遅いと何がいけないの？どれくらいの影響があるの？という根本的なところが意外に理解されていなかったりします。
今回は、表示速度がどういった影響を与えるかといった根本的なお話から、速度改善に使えるツール「PageSpeed Insights」のご紹介をします。
目次
ウェブサイトの表示速度は、サイト運用にどういった影響をもたらすの？
普段、自分が何かを検索し、上位にヒットしたサイトを見ようとした時に、そのサイトがなかなか表示されなければ、ブラウザで戻って別のサイトを開いたりしますよね？
まず大きく、当然ですがウェブサイトの表示速度が遅いと、ユーザーのアクセスを逃します。
気が長い人でも、別のページに移る度に待たされるとイライラしてしまったり、二度と閲覧しに来てくれないという事になります。
また、表示速度は検索順位にも影響してくることがGoogleから公式に発表されました。
以上より、
・セッション数(検索順位に関係する事で、アクセス自体に影響がある)
・ページビュー数(表示されない事でユーザーが離脱してしまう)
・リピート率(訪問者が二度と閲覧してくれない)
に大きく影響してきます。という事は、どんなジャンルだったとしても、サイトの存在価値自体が下がってしまうと言っても過言ではないかと思います。
ウェブサイトの表示速度を考慮して制作する事は、デザインやコンテンツを考慮するくらい大切な事のひとつですね。
改善するには何をすれば良いの？？
いざ改善しようと思った場合、どういうところから手をつければ良いか。
フロントエンドで言うと、大きく3つの項目が考えられます(サーバーサイドについてはまた別の機会にご紹介したいと思います)。
サーバーへの通信量を減らす
一番簡単なものとしては、サイトに使用している画像サイズの圧縮です。
最近はデジカメはもちろん携帯でも、写真の容量がかなり大きくなっています。
コレをそのままウェブサイトにアップしてしまえば、そのサイズの読み込みにやはり時間がかかってしまいます。
その他サイトに使っているアイコンやイメージなんかも見直せば結構圧縮できるものがあったりします。
画像の圧縮に便利なツールもあるので、まずは画像サイズについて改善してみるのが良いと思います。
次に、CSSやjavascriptファイルの圧縮です。
サイトを運用していると、どうしても不要なコードが増えたり、コメントが多くなったりしますが、ファイルのサイズが増えれば当然通信量が増えてしまいます。
制作の際にはやはりコメントや改行は必要だと思うので仕方ありませんが、実際にサーバーへアップロードするファイルは圧縮したファイルをアップロードするようにしましょう。
各ファイルの圧縮はGruntやgulpなどのタスクランナーやその他ツールがありますので、うまいこと利用しましょう♪
サーバーへの通信の回数を減らす
通信回数は、外部ファイル化されたCSS/javascriptファイル、読み込んでいる画像ファイルの数に依存します。
これも運用していると新たに読み込むファイルが増えたり、画像が多くなったりしてくると思いますが、CSSやjavascriptは制作時は複数あってもアップロードする際はなるべく1つにまとめる、画像は可能であればCSSスプライト(サイト内で使用する画像をなるべく1枚の画像にまとめる方法)を使う等して通信回数を減らすよう心掛けましょう。
レンダリングの速度を低下させない
これはHTMLファイル側の記述順序になりますが、内にjavascriptの読み込みを多く記述すると、そのスクリプトを読み込み終えて実行するまで表示処理が止まってしまいます。
なので、javascriptは最近ではの直前に書かれる事が推奨されています。
Googleアナリティクスのスクリプト等サイトの表示前に実行させたいスクリプト以外は、なるべく直前に記述するようにしましょう。
改善箇所を見つけるのに役立つサイト「PageSpeed Insights」
それでは、現在のサイトについてどこを改善すれば良いのかを検討する際にとても役立つ「PageSpeed Insights」のご紹介です。
Googleが提供するWEBサイトの表示速度読み込み計測サイトで、URLを入力するだけで、そのサイトのどの部分を改善すれば今よりどれくらい速度が改善されるかを診断・報告してくれます。
またそれぞれの項目について修正方法や具体的な箇所も提案してくれるので、とても便利です！
PC版、スマホ版両方別々にチェックしてくれるので、レスポンシブデザインでもユーザーエージェントやメディアクエリーでCSSレイアウトを変えているサイトでも、どちらもチェックできます。
とても役立つので、ぜひ一度ご利用ください♪
