ノウハウをいつでも。ウェブマーケティングのポータルサイト

制作日誌

今すぐ実践すべし!サイト表示速度を上げるためにできること

このエントリーをはてなブックマークに追加
      
follow us in feedly
友だち追加数
サイトの高速化はかなり重要です。
特にWordPressを使っている場合はサイト表示速度が遅くなりがちですが、ユーザービリティー、SEOのためにも表示速度を上げる努力はしておきたいものです。

今回はサイト高速化のためのいろいろな手法をまとめました。ぜひ実践してみてください。







画像


圧縮する

画像を圧縮してファイルサイズを減らすことは、大量に使っている場合に大きな効果があります。以下2つの画像圧縮Webサービスがおすすめです。2つとも無料です。

  • JPEGmini
    JPG形式の画像を高品質なままで圧縮できます。圧縮したい画像をドラッグ&ドロップするだけですごく簡単です。
  • TinyPNG
    PNG形式の画像を高品質なままで圧縮できます。こちらも圧縮したい画像をドラッグ&ドロップだけです。20枚まで一括圧縮できるのがうれしいです。

サイズ指定する

imgタグにはwidth、heightは必ず指定しましょう。width、heightプロパティを指定するだけで、サイト全体で9〜12%も早く表示されると言われています。



実寸サイズで使う

画像はあらかじめ実寸サイズにリサイズしたものを使いましょう。画像を拡大・縮小させるためにwidth、heightプロパティで制御すると、ブラウザに負担がかかります。



後回し読み込みする

通常サイトは、画像の読み込みが完了してから表示されます。これをページを表示してから画像を読み込むようにすれば、それだけで表示速度を大きく改善することができきます。

reading.jpg

それを実現するのが「Lazy Load」というjQueryプラグインです。モダンブラウザはもちろんのこと、IE8以上から動くことができます。



CSS/js


圧縮する

CSS/jsファイルのムダなコメントや改行、余分なスペースを取るだけで大きな容量が減らせます。以下はそのために使えるWebサービスです。


CSSスプライトを使う

CSSスプライトはページ内で扱う画像を1枚のファイルにまとめ、一度にまとめて読み込むことにより、HTTPリクエストの回数を減らして高速化を図る手法です。


不要なCSS/jsを読み込まない

ヘッダー部分をテンプレート化している場合でも、 ページによって必要ないCSS/jsファイルは読み込まないようにしましょう。回線が細いスマホなどでは、1つのファイルだけでも表示速度に大きな差があります。



CSS/jsはまとめて書く

基本ルールとしてheadタグ内では、CSSは上、jsは下にまとめて記述します。CSS・jsの順番がこのようにバラバラだと、読み込みに大幅なロスが発生してしまします。



CSSセレクターを最適化する

規模の大きいサイトで膨大なCSSを作る際や、フルスクラッチでCSSを書く場合などに効果的です。以下のサイトで復習しておきましょう。

意外と知らない!?CSSセレクタ20個のおさらい



キャッシュ利用


プラグイン

WordPressならばキャッシュ系のプラグインが多く揃っています。中でもおすすめは「W3 Total Cache」というプラグインです。設定方法が簡単で、他のプラグインとの相性も良く使いやすいです。


CDNサービス

CDNサービスとは、キャッシュを複数のサーバーで分け、ユーザーがページにアクセスした時は、そのユーザーにとって最も物理的な距離が近いサーバーが応答するという仕組みです。これを使うことで、アクセスによる負荷を広く分散することが可能です。



さいごに






サイト高速化のためにできることは上記のようにたくさんあります。1つ1つの効果は小さいですが、チリも積もれば山となります。ぜひできることから始めていきましょう!

© MAKEPO

 
このエントリーをはてなブックマークに追加
   
follow us in feedly
友だち追加数

著者情報

ノビタ

のび太

Web制作会社「NOBITA」の社長をやっております、のび太と申します。大学卒業後、お金を貯めカナダに留学。バンクーバーのビジネス学校で好きな人に出会ってしまったため、日本に帰らず現地企業に就職。未経験ながらWeb制作、メディア運営、ライター業などの仕事に奮闘する。帰国後、フリーランスのWebデザイナーとして独立し、2014年5月、自身の会社を設立。「伸びていくWebサイトをお届けする!」がモットー。 ブログ:がんばれ!のび太!

他の参加者を見る

のび太

関連記事

マーケティングノウハウ足りてますか?

MAKEPOのメルマガ…購読してみませんか?
直近のピックアップ記事のほか、セミナー・ツール活用情報など不定期でお伝えしています。「サイトにアクセスするのは面倒だ!」「電車の中でざっくり読みたい」という方は是非ご登録ください。 リアルタイムで情報取得をしたい方は、RSSまたは公式Twitterをフォローしてご覧ください!

通勤中の情報収集に!

メルマガ登録

いますぐ新着情報を知るなら

LINE@で友だちに追加!