まずはサイトのページスピードを下記のサイトで確認しましょう。
- cssからcssをインポートする@importは使わない
- htmlからcssのインクルードは、<head>タグの中などhtmlの先頭近くに置く
- CSSファイルを1つのファイルにまとめる
- CSSを圧縮する
- CSSスプライトでまとめる
- htmlからJavaScriptのインクルードは、の直前に書く
- JSファイルを1つのファイルにまとめる
- 必要なスクリプトを非同期で読み込む ※
<script async>
オプションを使うことで非同期にJSを読み込める - 外部JSを読み込むscriptタグにはdeferかasync属性を付ける
- アイコン、ロゴは画像を使わずWebフォントを使う
- 大量に画像がある場合は遅延読み込みにする
- PNG画像やGIF画像はCSSスプライトで表示する
- PNG画像を圧縮する
- JPEG画像を圧縮する
- 小さいは画像はbase64形式で埋め込む
ページ下部にあるような画像は最初から読み込む必要がないので、「その表示領域(スクロール領域)に入ったら画像を表示する」という指定を行い、遅延読み込みにする。おすすめはjQueryのLazy Loadです。
画像をBase64に変換するツール(data URI scheme)-シングスブログ
- hmtl, css, JavaScriptなどのテキストデータはgzip圧縮転送しましょう
- JavaScriptやcssはhtmlの中にインラインで極力書かずに別ファイルにしてブラウザのキャッシュを効かせましょう
- ホスティング会社の高速化設定を使う ※エックスサーバーのmod_pagespeed、FastCGIなど
gzipで圧縮するファイルは画像以外の、HTML・CSS・JSなどのテキスト形式のファイルです。 ホスティング環境により対応できるサイトとそうでないサイトが変わるかと思います。
gZip通信かどうかを確認するサイトGIDZipTest
gzipをすべてのファイルに適用するには、サーバー側でモジュールを使用します。Apacheの場合は以下の記事を参考にしてください。 http://oxynotes.com/?p=6519
CSSやJS、画像などの内容が頻繁に変更されないファイルに関してはキャッシュを効かせることで、ダウンロードを省略でき、高速化することができます。 やり方としてはApacheのモジュールを使ったりすることで設定できます。
Cache-Control は、サーバキャッシュやリクエスト方法を定義する項目です。
<Files ~ ".(gif|jpe?g|png|ico|js|css|gz)$">
Header set Cache-Control "max-age=2592000"
</Files>
※2592000は30日なので、86400/日
下記の仕様でサンプルを作成してみました。
- デフォルトは30分
- HTML ファイルは1日
- gif, jpg, png 等の画像ファイルは7日
- CSS, JavaScript, PDF等は1ヶ月
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 30 minutes"
ExpiresByType text/html "access plus 1 days"
ExpiresByType image/jpg "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
</ifModule>
- https://syncer.jp/page-cache-setting
- http://love-guava.com/blog-htaccess-cache/
- http://www.02320.net/htaccess_cache_settings/
- http://www.webdesignleaves.com/wp/htmlcss/217/
wordpressの高速化についても基本は同じですね。
- http://style-easy.jp/archives/2049
- https://marubon.info/method-speed-up-display-of-web-site-with-wordpress-jquery-load-position-optimization-4330/
- https://dogmap.jp/2010/04/20/wordpress-htaccess/
- http://artroot.jp/article/201403221
- http://webkaru.net/wordpress/pagespeed-insights-browser-cache/
- http://pc98.skr.jp/weblog/weblog_20140129.htm
- http://d.hatena.ne.jp/kamiyan2/20130217
- http://oxynotes.com/?p=6024
- http://www.webdirectooor.com/websitespeedup/
- http://d.hatena.ne.jp/kamiyan2/20130217
- http://www.hp-stylelink.com/news/2014/02/20140220.php
- http://parashuto.com/rriver/development/page-speed-optimization
- http://blog.nest-online.jp/7149
- http://www.webdesignleaves.com/wp/htmlcss/217/
- http://www.webdesignleaves.com/wp/htmlcss/457/
- http://highfivecreate.com/blog/website/470.html