Webサイト高速化

Webサイトの高速化で実施した作業のまとめ

 

このブログをレスポンシブWeb対応にしたまでは良かったものの、スマホの表示速度が余りにも遅かったため高速化のために色々してみました。
作業メモを含めてまとめてみます。


Webサイト読み込み速度についての現状分析・効果測定ツール


主に読み込み速度の分析・高速化の効果測定には以下の2サイトを中心に実施しました。


PageSpeed Insights
URLを入力するとスマホとPC版の改善点を列挙してくれます。
PageSpeed Insights


GTmetrix
読込完了速度やトータルページサイズなど測定してくれます。またA~Fランクでページの全体評価をしてくれます。
GTmetrix   Website Speed and Performance Optimization



1.【画像系】何はともあれ画像を圧縮する


一番手っ取り早いのは画像の圧縮なので下記のサイト・ツールを利用し、テンプレートやwordpressでアップロードしたサムネイル画像などを再調整しました。

1.PNGの圧縮
TinyPNG
20個のPNGを一括で圧縮してくれる無料オンラインサービス
「Drop your .png files here!」にファイルをドラッグアンドドロップすると圧縮してくれます。約50%の圧縮に成功
TinyPNG - Compress PNG images while preserving transparency


2.JPEGの圧縮
Caesium
PNG、JPEGに対応し、サブフォルダなど一括で圧縮してくれるフリーソフト。
80%程度で圧縮しました。
Caesium   Image Compressor

Caesiumの設定

「設定」→「一般」
Caesium設定その1
  • 「フォルダを開いた時にサブフォルダもスキャンする」チェックを入れる


「設定」→「圧縮」
Caesiumの設定1
  • 「圧縮後もEXIF情報を保持する」チェックを外す
  • 「オリジナルの日付情報を保持する」チェックを外す
  • 「出力サイズがオリジナルを超える場合はスキップ」にチェックを入れる

メイン画面
Caesiumの設定2
  • 「品質」を「80」に設定
  • 「形式」を「入力」に設定
  • 「構造を保持」にチェックを入れる
  • 「入力と同じフォルダ」にチェックを入れる


3.GIFの廃止
GIFは圧縮に制限があるのでPNGファイルに再保存し、PNGとして再圧縮した。


2.【サーバー系】gZip圧縮通信・キャッシュの設定(Apacheの設定、.htaccessの追記)


次にサーバーサイドの調整を行いました。これはホスティング環境により対応できるサイトとそうでないサイトが変わるかと思います。

gZip圧縮の設定


gZip通信かどうかを確認するサイト
GIDZipTest

GIDZipTest  Web Page Compression  Deflate   Gzip  Test   GIDNetwork
「Web page compressed?」の項目が「Yes」となっていれば対応済



1.Apacheで「mod_deflate.so」「mod_filter.so」モジュールを読込
「/etc/httpd/conf/httpd.conf」で「mod_deflate.so」と「mod_filter.so」が読み込まれているか確認。
LoadModule deflate_module modules/mod_deflate.so
LoadModule filter_module modules/mod_filter.so

2.「.htaccess」にgzip圧縮で通信するファイルの種類を記述
#gzip圧縮
<IfModule mod_deflate.c>
# Insert filters
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml

# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>


ブラウザキャッシュの設定


キャッシュの確認
最初に紹介したGoogle PageSpeed Insightsで確認できます。


1.Apacheで「mod_expires.so」モジュールを読込
「/etc/httpd/conf/httpd.conf」で「mod_expires.so」が読み込まれているか確認。
LoadModule deflate_module modules/mod_expires.so


2.「.htaccess」にキャッシュを行うファイルの種類と有効期限を設定
※基本キャッシュは1日、PNG,JPEG,GIF,CSS,JS,FLASHは1ヶ月に設定
#ブラウザキャッシュ
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType application/x-shockwave-flash "access plus 1 months"
ExpiresDefault "access plus 1 days"
</IfModule>


3.JSやCSSなどを更新した時に更新ファイルを読み込ますためにHTMLの読込に引数を設定
(引数を含めて同じファイルとして認識するので引数を変更すると別ファイルとして読み込みを行う)
<link rel="stylesheet" href="/css/styles.css?ver=20131127">
<script type="text/javascript" src="/js/function.js?ver=20131127"></script>


3.【コード系】HTML,CSS,JSファイルの圧縮


圧縮した方が良いファイルの確認
最初に紹介したGoogle PageSpeed Insightsで確認できます。


1.CSS,JSファイルの圧縮
Online YUI Compressor
Online YUI Compressor
複数ファイルをまとめて圧縮も可能です。


2.HTMLファイルの圧縮
Compress HTML
Compress HTML
headerタグ以下を圧縮(上記サイトで「Don’t compress HTML head of document」にチェックを入れる)


実施結果


GTmetrixで測定した結果
改善前:読込速度:9~6ms、ページトータルサイズ:841kb
改善後:読込速度:6~4ms(約2,3秒の高速化)、ページトータルサイズ:591kb(約250kbの圧縮)


今後の課題・調査内容


今後の課題です。効果の高そうな順に並べてみました。(あくまで推測)

  1. 高性能・高圧縮の画像圧縮ツールの調査
  2. 広告・SNSボタンの読込タイミングの調整(体感速度の改善)
  3. レスポンシブWebの廃止
  4. MovableTypeの採用
  5. CMSのチューニング(jQueryなどの重複ファイル読込廃止など)、プラグインの使用を極力控える
  6. 非同期通信の使用頻度を控える
  7. CSS,JSのインライン化(PHPなどで記述し、インクルードする)

 
 
Category
Webディレクション
設計・技術
Tag(s)
 

コメントを残す




Trackback URL