当サイトでパフォーマンスチューニングを行いました。
結果、PageSpeed Insightsの点数が99点となりました。
アナリティクスを入れると１点減点されるので、実質的には満点です。
今回は、99点を獲得するために行った施策を紹介します。
ちなみに、使っているサーバーはさくらインターネットです。他にも速いサーバーはありますが、さくらでも十分でも頑張れば速くできます。
もしかしたら今後エックスサーバーとかに移行する可能性もあります。
一般向けの施策
まずは手軽に行える、高速化から紹介します。
画像の圧縮・サイズ
ページの速度が遅くなる原因は、画像が重いことがほとんどです。
WordPressには「Compress JPEG & PNG images」という自動で画像圧縮をしてくれるプラグインがあり、こちらをインストールしました。
他のプラグインに比べても圧縮率が高いのでおすすめです。
過去にアップした画像も、一括で圧縮できて非常に便利です。
圧縮というのは、画像にある不要なデータを削除したり、必要以上の色を抑えることです。
加えて、画像サイズはコンテンツの幅に合わせて、不必要に大きなサイズにならないようにしています。
ブラウザキャッシュの活用
Webサイトを表示するとき、サーバーから画像やCSS、JavaScriptのファイルがダウンロードされます。
ダウンロードには時間がかかるので、ブラウザに保存させることでリクエスト数を減らすことができます。
「.htaccess」ファイルに、以下のコードを追加します。
<IfModule mod_deflate.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/svg+xml "access plus 1 months"
ExpiresByType image/x-icon "access plus 6 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
</IfModule>これでブラウザキャッシュが利用できます。
PHP7系を使う
PHP5系と比較すると、PHP7系は2倍の処理速度になるそうです。体感でも分かるくらい、かなり違います。
最近サーバーを契約したなら、デフォルトでPHP7系になっていると思いますが、数年前に契約した人はPHP5系になっている可能性があります。
変更するとテーマやプラグインが動かなくなる可能性もあるので、注意しましょう。更新がたまっている場合は、更新してから実施してください。
上級者向け
ここからは上級者向けで、WordPressサイトを自作している人に関係してくる内容です。
jQueryを読み込まない
WordPressでは、jQueryが自動で読み込まれます。jQueryの読み込みには時間がかかるので、不要なら読み込まないようにしましょう。
当サイトでもjQueryは使っておらず、すべて素のJavaScriptを使用しています。
jQueryを読み込まないようにするには、以下のコードを、header.phpの上に記述してください。
<?php wp_deregister_script('jquery'); ?>functions.phpに記述すると、管理画面に影響が出てしまうので、header.phpが良いみたいです。
jQueryがないと、プラグインに影響が出る可能性もあるので、できる限りプラグインは入れないようにしましょう。
CSSとJavaScriptは結合・圧縮する
CSSやJavaScriptのファイルが複数ある場合、一つのファイルにまとめましょう。
無駄なスペースや改行は、削除した方が軽くなります。圧縮を行ってください。
私は、Gulpを使って結合と圧縮を自動化しています。
必要なパッケージとgulpfile.jsのコードは後述します。
CSSとJavaScriptをインライン化する
CSSとJavaScriptを圧縮したら、CSSはhead要素に、JavaScriptはbody要素の最後にインライン化しています。
つまり、別ファイルではなくHTML内に直接記述させるのです。
CSSとJavaScriptの結合、圧縮、インライン化に必要なパッケージは、以下のものを使っています。
- gulp-pleeease（CSSのベンダープレフィックスの付与、圧縮）
- gulp-concat（JavaScriptファイルを結合）
- gulp-uglify（JavaScriptの圧縮）
- gulp-file-include（CSSとJavaScriptのインライン化）
- gulp-replace（「@charset “UTF-8”;」の削除）
@importを使えば、パッケージはなくてもCSSの結合ができます。
gulpfile.js
Gulpで結合と圧縮、インライン化する方法を紹介します。
フォルダ構成は以下のような感じです。
phpフォルダには、CSSとJavaScript以外のソースを入れておきます。
CSSとJavaScriptは別フォルダで管理します。
以下は、Sass（SCSS）を圧縮して、インライン化するタスク。browserSyncを使っている前提です。
// sassコンパイルタスク
gulp.task('sass', function(){
gulp.src('./src/sass/style.scss')
.pipe(plumber())
.pipe(pleeease({
sass: {includePaths: ['src/sass']},
autoprefixer: {"browsers": ["last 2 versions"]},
minifier: true, //圧縮
mqpacker: true, //メディアクエリをまとめる
out: 'style.min.css'
}))
.pipe(replace(/@charset "UTF-8";/g, ''))
.pipe(gulp.dest('./temp/css/')) // いったんtempフォルダに（理由は後述）
.pipe(browserSync.reload({
stream: true
}));
});以下はJavaScriptの結合・圧縮、インライン化。
// JavaScriptの結合・圧縮
gulp.task('js',function(){
return gulp.src('./src/js/*.js')
.pipe(plumber())
.pipe(concat('script.min.js')) // concatで結合したファイル名を指定。
.pipe(uglify()) // uglifyで圧縮
.pipe(gulp.dest('./temp/js/')) // いったんtempフォルダに（理由は後述）
});
んで、header.phpのheadの中に、以下の記述をします。
<style>@@include('temp/css/style.min.css')</style>そして、footer.php
<script>@@include('temp/js/script.min.js')</script>tempフォルダは、ここで読み込ませるために作成しています。
そして、インライン化するためのタスクをgulpfile.jsに記述します。
gulp.task('include', function() {
gulp.src("./src/php/*.php")
.pipe(include({
prefix: '@@',
basepath: './'
}))
.pipe(gulp.dest('wp/wp-content/themes/tech_dig'));
});header.phpとfooter.php以外のファイルはコピーします。
gulp.task('copy', function() {
return gulp.src(
['src/php/*.php', 'src/php/**/*','!src/php/header.php','!src/php/footer.php'],
{base: 'src/php/'}
)
.pipe(gulp.dest('wp/wp-content/themes/tech_dig'));
});こんな感じです。あとはWatchさせておけば、自動でやってくれます。
その他
以上のことを実施していれば、PageSpeed Insightsで高得点を獲得することができます。
その他、当サイトでは実施していませんが、サイト高速化の方法はまだまだあります。
CDN
コンテンツをサーバーから読み込むのではなく、CDNサーバーにキャッシュして、そこから読み込むことで高速化できます。
ただ、CDNは費用がかかります。無料のCloudflareもありますが、たまに落ちるという噂を聞きます。
十分高速化できたので、CDNを使うほどではないかなと思います。
上のパフォーマンスチューニングを実施してもまだ遅いのなら、CDNの利用も検討してみて下さい。
キャッシュプラグイン
WP Fastest CacheやWP Super Cacheなどのキャッシュプラグインは有名で、使っている人も多いです。
しかし、これらのプラグインはトラブルも多く、できれば使いたくないと思っています。
キャッシュプラグインなしでも十分高速化できたので、入れていません。
高速サーバー
サーバーのスペックは、サイトの速度にかなり影響を与えます。
当サイトでは現状さくらインターネットを使っていますが、エックスサーバーやMixhostとかにすればもっと速くなるでしょう。
サーバーの強化は、今後視野にいれたいですね。
まとめ
訪れたユーザーがイライラしないためにも、できる限りサイトは最適化させておくべきです。
Googleも「サイトの速度をランキング要因にしている」と発表しています。SEO的にもサイトの速度は重要なのです。
とはいえ、結構面倒ですけどね…。
ここには書いていませんが、PHPやJavaScriptのコードも書き方によって速度が異なります。その辺りも詳しく記事にしたいですね。
