webサイト高速化!簡単にできるページ速度の向上のためのあれこれ

webサイトを高速化させる

モバイルファーストと言われている今の時代ページがいかに早く表示されるかはかなり重要になっています。
ページの読み込みが遅いと離脱率もかなり高くなってしまうので、高速化できる部分は高速化しておこう。

それでは高速化するいくつかの方法を紹介します。

 

 

画像圧縮・最適化

・TinyPNG
これは定番ですね。画像圧縮。
webサイトで重くなる一番の原因ではないでしょうか。
これは画像編集速度でももちろん圧縮できますが、圧縮するためのツールが存在します。
なかでも有名なのはこちらの「TinyPNG」!
このツールで一発で圧縮できます。
また圧縮して容量が減りますが、圧縮されてもほぼ画質の劣化がないのも特徴です。

 

・lazyload
画像を読み込み遅延させるライブラリ。
重い画像はあとから読み込ませて早くしようぜっていうやつです。
「lazyload」がかなり有名ですが、他にもいろいろ存在します。
「lazyload」はjQueryを使用するのでどうしてもライブラリ的に重めですが、他のjQueryなしのものもあるので試してみよう。
(ブラウザ対応状況が変わってくるので確認必須)

 

 

キャッシュ利用

.htaccessに設定する。
キャッシュする期間等を入力することで、設定できます。

 

 

HTML

・imgタグの幅(width)、縦(height)を指定する。
HTML上に幅(width)、縦(height)を記述しておくことで画像をダウンロードする前にレイアウトの計算がされるため速度改善に繋がります。

 

 

CSS

・CSSで@importを使用しない。
@importで記述するとその中のCSSを一つずつロードするため遅くなります。

 

 

javaScript

・非同期処理させる。
物によってはできないものもあるので確認が必要。

 

 

 

詳細やその他高速化のための改善方法は執筆中です。

コメント