HTML
htaccess

読み込み速度を30分で改善(レンダリング・キャッシュ設定・画像圧縮)

サイト読み込み速度の重要性

サイトの読み込み速度が遅いことで離脱率が上がったり、その結果CVRが下がったり
直接成果に関わり非常に重要です。
紹介する作業を行うことですぐに改善できる内容もあるので気になる方は取り入れることをお勧めします。

サイト読み込み速度のチェック方法

サイトの読み込み速度はGoogleの無料ツールを使って改善できます。

▼サイトの読み込み速度は下記のツールからチェックできます。
https://developers.google.com/speed/pagespeed/insights/?hl=ja

下記は参考例です。
スクリーンショット 2017-07-25 10.49.13.png

画像の圧縮でサイト読み込み速度改善

ほとんどの場合、サイトで読み込んでいる画像が原因です。
下記は画像圧縮する方法です。

コマンドで画像圧縮する場合

下記のコマンドで画像を圧縮できます。
手順はHomebrewというmacOS用のパッケージマネージャーをインストールし、jpg画像/png画像圧縮用のプログラムをインストールします。
下記は手順と使い方の概要です。
このコマンドを実行すると圧縮された画像が上書きされますのでご注意ください。

Homebrew
#Homebrewのインストール
$/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
JPG画像圧縮方法
#インストール
$brew install jpegoptim
#画像ファイルがある位置に移動
$cd ~/documents/test/
#メタ情報を削除して圧縮
$jpegoptim –strip-all *.jpg
#品質90%でメタ情報を削除して圧縮
$jpegoptim –strip-all –max=90 *.jpg
PNG画像圧縮方法
#インストール
$brew install pngquant
#画像ファイルがある位置に移動
$cd ~/documents/test/
#256色で圧縮
$pngquant –ext .png –force 256 *.png

Wordpressのプラグインで画像圧縮する場合

EWWW Image Optimizerというプラグインを利用して画像圧縮することができます。

▼プラグインダウンロード
https://downloads.wordpress.org/plugin/ewww-image-optimizer.3.5.1.zip

Webサイトを利用して画像圧縮する場合

Webサイトに画像アップロードすることで画像を圧縮できます。

▼画像圧縮サイト
https://tinypng.com/

キャッシュ設定でサイト読み込み速度改善

htaccessに下記を記述することで、読み込み速度を改善することができます。

.htaccess
ExpiresActive On
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType text/css "access plus 10 days"
ExpiresByType text/js "access plus 216000 seconds"
ExpiresByType text/javascript "access plus 10 days"
ExpiresByType application/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 10 days"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"

JSファイルの読み込み位置を変更してサイト読み込み速度改善

head内のJSファイルの読み込み位置を

内から直前に移動することで
読み込み速度が改善されます。

まとめ

上記の内容を試したところ、下記のように改善されました。
慣れると30分もかからずできると思います。
スクリーンショット 2017-07-25 11.25.33.png

今回は紹介できませんでしたが、画像圧縮よ読み込みファイルを最適化するgulpなどのタスクランナーやnpmなどのwebpackツールの重要性が理解できました。
次回はgulpなどのタスクランナーやnpmなどのwebpackツールを利用したサイトの運用方法についてご紹介いたします。