webサイトを高速化させる
モバイルファーストと言われている今の時代ページがいかに早く表示されるかはかなり重要になっています。
ページの読み込みが遅いと離脱率もかなり高くなってしまうので、高速化できる部分は高速化しておこう。
それでは高速化するいくつかの方法を紹介します。
画像圧縮・最適化
・TinyPNG
これは定番ですね。画像圧縮。
webサイトで重くなる一番の原因ではないでしょうか。
これは画像編集速度でももちろん圧縮できますが、圧縮するためのツールが存在します。
なかでも有名なのはこちらの「TinyPNG」!
このツールで一発で圧縮できます。
また圧縮して容量が減りますが、圧縮されてもほぼ画質の劣化がないのも特徴です。
・lazyload
画像を読み込み遅延させるライブラリ。
重い画像はあとから読み込ませて早くしようぜっていうやつです。
「lazyload」がかなり有名ですが、他にもいろいろ存在します。
「lazyload」はjQueryを使用するのでどうしてもライブラリ的に重めですが、他のjQueryなしのものもあるので試してみよう。
(ブラウザ対応状況が変わってくるので確認必須)
キャッシュ利用
.htaccessに設定する。
キャッシュする期間等を入力することで、設定できます。
HTML
・imgタグの幅(width)、縦(height)を指定する。
HTML上に幅(width)、縦(height)を記述しておくことで画像をダウンロードする前にレイアウトの計算がされるため速度改善に繋がります。
CSS
・CSSで@importを使用しない。
@importで記述するとその中のCSSを一つずつロードするため遅くなります。
javaScript
・非同期処理させる。
物によってはできないものもあるので確認が必要。
詳細やその他高速化のための改善方法は執筆中です。