改善方法！サイトの表示速度もユーザビリティに影響する
今回は、サイトの表示速度の確認方法、および表示速度の改善方法につきまして詳しく記載してみようと思います。
webサイト、なんとか作成はできた！もしくは、まだ作成中だけど、スマートフォンで確認すると表示が遅いなぁ～？などとサイト制作初心者では、よくある話だと思います。そこでサイトの表示速度について、表示速度の確認方法および改善方法につきまして、私の経験をふまえ記載してみようと思います。
という事で、それでは今回はッ、
- ・サイトの表示速度もユーザビリティ
- ・サイトのパフォーマンス、表示速度確認方法
- ・表示速度を改善させるためのポイント
上記について記載していこうと思います…。
サイトの表示速度もユーザビリティ
以前、ユーザビリティにつきましては詳しく記載いたしました。そこで、ユーザビリティというと、ページのデザイン、ユーザーインターフェイスに目が行きがちなことと思います。特にページ作成初心者のうちは、デザインに注目したり、アニメーションなど動きがあるものにページ作成の重点を置くことが多くなってくることと思います。
しかしながら、サイトの表示速度も非常に重要な要素で、Amazonではページの反応が0.1秒遅くなると売り上げが1％低下するという調査結果や、Googleではページの反応が0.5秒遅くなるとアクセスが20％低下するという調査結果が出ているようです。
また、一般的にページの表示速度が１秒遅くなることで、PVが11％、コンバージョンが7％、顧客満足度が16％低下するという調査結果もあるなど、Webページの表示速度が与える影響は非常に大きいといえることができ、ユーザビリティの観点からも表示速度を確認しながら、サイト作成をおこなうことをおすすめします。
サイトのパフォーマンス、表示速度確認方法
表示速度を改善させるための対策をとるには、実際のWebページの表示速度がどの程度なのかチェックする必要があります。
そこで、Googleが提供するサイトのパフォーマンス、表示速度をチェックするページがあるのでご紹介いたします。
Google Developers – PageSpeed Insights
こちらの使い方はとても簡単で、確認したいウェブページのURLを入力し、分析ボタンで確認をおこなうことができます。
また、解析後、改善できる項目など一覧で改善内容も表示してくれるので、提案された改善内容に沿って1つづつ改善をおこなっていけば、問題なく表示速度は改善されます。
しかしながら、一般的にサイト作成の参考書籍などで教えている内容と異なる場合があります。ページで使用されている画像などのリサイズなどであれば、下記で今回紹介いたしますが、比較的簡単に直すことができることと思います。しかしながら、ScriptやCSSになると、慣れていないうちは多少困惑することがあるかもしれない記述方法などを用いることになります。
また、もう一つチェック方法を記載してみます。
こちらはモバイルサイトの速度チェック専用で、ドメイン自体の表示速度改善のチェックになります。PageSpeed Insightsと多少ページ表記が異なりますが、基本的には速度改善をおこなうためのチェックツールになります。
個人的に私がページ表示速度の改善をおこなう場合は、PageSpeed Insightsでチェックを行い、PageSpeed Insightsの提案内容に沿って画像の圧縮やレンダリングブロックを回避するソースコードの書き換えなどを行います。また、下記でもう少し詳しくポイントを記載してみます。
表示速度を改善させるためのポイント
ページの表示速度は、ページ内で読み込まれている画像のサイズやJavaScript、CSSなどのファイルサイズを含めたWebページ自体の読み込みサイズ、さらにサーバーの反応速度や回線品質など、さまざまな要素が関連します。そういったことに考慮しながら表示速度を向上させる方法を私が実際に、クライアントワークでおこなった方法をポイントにまとめご紹介してみます。
まず初めは、CSSの切り分けにまります。詳しく記載いたしますと、1つにまとめたCSSファイル、共通スタイル・スマートフォン用・PC用スタイルのファーストビューにあたるスタイルのコードを、CSSファイルより分離させHTMLにstyle属性を用いて直接head内に圧縮したものを記述します。これを一般的にはクリティカルCSSと呼んだりします。
クリティカルCSSでHTML内にCSSコードを記述することで、ファーストビューを表示する際にレンダリングブロックを回避することができ、ページの表示スピード遅延の原因を排除することができます。
ブラウザのコンテンツの表示処理がブロックされる現象です。ブラウザがコンテンツを表示するためには基本的にHTMLの文字列を読みこむ必要があります。CSSやJavaScriptもHTML同様になります。ページ上部head要素内やbody要素内のファーストビューで表示される、コード自体の読みこむファイルが多くなればなるほど、ページの表示速度は遅くなってしまいます。
次に、CSSファイルとJavaScriptファイルの圧縮をおこないます。これはオンライン上にソースコードを張り付けてボタンを押すだけで不要な改行やコメントを削除してくれるツールが沢山存在します。また、CSS・JavaScrptを外部ファイル化し、CSSセレクタを単純化するなどして不要な記述を極力排除します。
JavaScript / Css 圧縮・軽量化ツールのご紹介！
JavaScriptやCSSの圧縮を行うには下記のツールが便利です。
使い方は、コードをコピペして「圧縮」ボタンを押すだけで、とても簡単なことと思います。
CSSはhead要素内、JavaScriptにおいてはページの表示後、すぐに動作する要素などがない場合は、body要素の終了タグ直前に記述するようにします。また、CSSスプライトなどを利用して画像の読み込み回数を極力少ない方向で調整します。
CSSスプライトは、サイトの読み込みを速くする目的で使われているCSSの技法です。具体的には、「サイト内の複数の画像をなるべく一枚の画像にまとめ、CSSで表示範囲を指定することによって表示させる」ことで画像の読み込みを減らし、サイトの読み込みが速くなるという仕組みです。
最後に、画像サイズの最適化を行いファイルサイズを減らします。
画像圧縮圧縮ツールのご紹介！
下記にご紹介するOptimizillaは、可能な限りの画像圧縮率かつ画質維持を実現。他のサービスやソフトウェアを凌ぐパフォーマンスです。
この他にも画像を圧縮するツールは無料で沢山ウェブ上に存在します。ご自身の好みに合ったツールをお選びいただき、日頃から適切な画像サイズを意識しながら、サイト制作を行うのが結果的に良いことと思います。
また、適切なサイズの画像につきましても、一度、読んでおくことをおすすめします。
ということで今回は、「改善方法！サイトの表示速度もユーザビリティに影響する」につきまして、ポイントをまとめ記載してみました。
サイト制作初心者の方ですと、なかなか表示速度まで気にすることは、少ないのではないかと思います。しかしながらユーザビリティの観点、もしくは、はっきりとは公表されておりませんが、多少なりともSEOにも影響が出てくるものではないかと、個人的には思っています。
また、始めのうちはPageSpeed Insightsのアドバイス通りに、コードの書き換え、画像の圧縮は、なかなか大変なものと思います。しかしながら、大変な思いをして作ったページが、表示が遅いためにユーザーに閲覧してもらえなくなってしまうのは、非常に残念というかもったいないことと思います。
多少の努力で改善できることろは、日々改善できるように私を含め心がけたい所ですね。
とりあえず、今回はここまで…。
ご相談・問合せ・お仕事のご依頼は↓コチラより…、それではまた次回…。
