creatersnest

スマートフォンサイトの表示速度を速くする小技まとめ


近年、スマホの普及によりスマホからwebサイトにアクセスするユーザーが増えました。
しかし、残念なことにスマホの回線はリッチで高性能なページを読み込むのが苦手です。
アクセスした際、表示が遅いとユーザーはストレスを感じ、サイトから離脱します。
さらにGoogleの検索順位も下がるデータがあり、スマホサイトの表示速度高速化は必須条件といえそうです。
ということで、高速化の方法をまとめてみました。

画像の容量を軽減する。

Tinypng
見た目は全く違いがないのですが、容量を減らすと高速化につながります。
画像圧縮サイトhttps://tinypng.com/などを使うと簡単に画像の容量を
軽減することができます。

また、画像のwidth,heightを指定することも大切です。

 

CSSスプライトを使用する

youtube_splite

http://dev.classmethod.jp/client-side/image-performance-tuning-04/

CSSスプライトとは、たくさんある画像をひとつにまとめてリクエストを減らし、
読み込み時間の短縮が期待されます。
何が何でも使えるというわけではなく、アイコンやメニューボタンのような類似画像に使いましょう。
YouTubeやGoogleなどでも使用されていますね。

 

不要なCSSを読み込まない。

共通しているCSSはまとめましょう。
ヘッダー部分をコピペして作っていると
使用していないCSSやjsがそのままになってしまっていることが多いので、
日頃から整理しながら書いていきましょう。

 

CSSは上、JSは下に書く。

CSSの方を上、JSは下にして書くようにしましょう。
jsは読み込みが正常にできないと次を読み込みません。
したがって、CSSを読み込めないのでいつまで経ってもコンテンツが表示されません。
読み込みを阻害するjsの前に、CSSを読み込ませることでファーストビューの表示はできます。

 

CSSをインライン化する。

スクリーンショット 2015-07-10 17.21.30

小さいコードは直接HTMLに<style>で書き込むことで
ブラウザはレンタリングを続けることができます。

しかし、膨大な量を書き込んでしまうとHTMLが重くなり、
かえって読み込み速度を遅くしてしまう可能性があります。

 

@importを使わない。

@importとは複数のCSSをひとつのCSSにまとめる記述です。
@importを使うと、外部ファイルを順番にダウンロードするため、時間がかかります。
HTMLを編集しなくてもCSSの追加ができるため@importは便利なのですが
表示速度の問題を考えるなら使わない方が良いといえます。

 

HTTPリクエストを減らす

HTTPリクエストとは、インターネット上でwebサーバーとクライアントが
相互に通信する仕組みのことです。
ファイルの数だけこのHTTPリクエストが発生するのでCSSやjsはまとめましょう。
jsは読み込みが実行されるまで、次の読み込みができなくなるため待ち時間ができます。

 

SNSはあとから読み込む。
sns

SNSボタンは読み込むのにかなりの時間を要します。
「とりあえずSNSボタンを置いておこう」という考えなら排除することをオススメします。

どうしても置きたい場合は「後読み」することを推奨いたします。

 

404エラーを出さない。

not_found

エラーは問題を解決しようとしてかなりのリソースを要します。

文法、jsのエラー、空タグを書くことなどに気をつけましょう。
HTMLのエラーチェックはhttp://validator.w3.org/にアクセスしURLを入力すると行うことができますので
利用してみましょう。

 

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

キャッシュとはデータを一時的に保存しておく機能。
2回目の読み込みの際に、1度読み込んだデータを利用するので読み込む量が少なくてすみます。
したがって、高速化のためにはキャッシュのロジックを組む必要があります。
「W3 Total Cache」というプラグインなどを使用する方法もあります。

 

さいごに

Amazonの調査では、ページの表示速度が0.1秒遅くなると
売り上げが1%低下することが明らかになっています。
さらにGoogleからは、ページの反応が0.5秒遅くなると
アクセス数が20%低下すると発表されています。

スマホの表示速度の問題は今後取り組むべき一番の課題といえそうです。
何をしたら良いのか分からない。。という方も
今回紹介した方法は誰でも簡単に実践できる方法ですので
是非お試しして頂きたいと思います。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


MOBB

株式会社MOBBと申します。多言語対応webサイト制作やメディア構築、DMP開発などを行っております。

Next ArticleVimでのコーディングがより快適になるおすすめプラグイン20選