Gulpを使ってサイト表示を高速化しよう！

こんにちは、しばです。
このたび遅まきながらタスクランナーデビューをしました。
これまでGulpは何回かチャレンジしようとして、インストール方法やら設定ファイルやら調べたら(‘ω’)ウワアアアとなってしまって手をつけていませんでした。

しかし今回サイト表示の高速化のために使って見たところ、劇的な効果がありました。

今回は導入したGulpのプラグインと、それによってどれだけサイト表示の高速化ができたかの結果をご紹介します。

Gulpでやってみたこと

Gulpを使うことになった経緯ですが、制作した静的サイトデータにPageSpeed InsightsやLighthouse等のページ読み込み速度の測定ツールを使ったところ、「リクエスト数減らしてね」「画像やリソース（HTML、CSS、JavaScript）を圧縮してね」という改善ポイントが上がってきました。

作業データをそのまま圧縮してしまうと、今後の修正点がでた時などの対応が少しわかりづらくなる。。
一括で諸々の圧縮や結合を行ったアップロード用データを生成・出力することはできないだろうか。

と思い調べてみると、Gulpがガツガツヒットしたので腹をくくって導入してみました。導入にあたり、こちらの記事を参考にさせていただきました。

• gulp導入でWeb開発環境の自動化　便利なgulp.jsの導入方法
• gulpで画像圧縮とjs結合・圧縮してモバイルフレンドリーに

そして、「圧縮」「結合」に関する評判の良さそうプラグインをインストール。

全体

• gulp-plumber (エラーで処理が停止することを防止)
• gulp-notify (デスクトップ通知。主にエラーで利用)

scssコンパイル・プレフィクス付与・圧縮

• gulp-sass (sassをcssへコンパイル)
• gulp-autoprefixer (cssに必要なプレフィックスを付与)
• gulp-sourcemaps (マップファイルを生成)
• gulp-clean-css (cssを圧縮)

js圧縮・結合

• gulp-uglify (jsを圧縮)
• gulp-concat (ファイル結合)
• gulp-rename (ファイル名変更)

画像圧縮

• gulp-imagemin 画像圧縮

それぞれ処理をgulpfile.jsに記述し(処理の中身は割愛)、完成したサイトデータに対して実行しました。

結果

各種測定ツールで測ったGulp処理前と処理後のスコアを比較してみます。

PageSpeed Insights

PageSpeed Insightsは、webページのコンテンツを解析し、ページの読み込み時間に関するパフォーマンスを測定、スコア化してくれるツールです。

TOPページとパーツ集ページ(Detail)それぞれ測定してみました。今回このツールが一番差が出たのですが、かなりスコアがアップ！

レンダリングブロックしていた(と警告が出ていた)scriptファイルを結合・圧縮したのが一番大きな要因なようですね。特にモバイル版のスコアの上がり方が大きかったです。

Lighthouse

Lighthouseはwebサイトのパフォーマンスやアクセシビリティ等の品質を測定し、項目ごとにスコア化してくれるツールです。今回はPWAを除いた項目でチェックしました。

表示の高速化は「Performance」項目に含まれます。こちらもちょっとだけ上がりました。

蛇足ですが、LighthouseはChrome拡張機能と、デベロッパー ツールの[Audits]タブどちらからでも使用することができます。ただなぜか双方で結果が大分異なるんですよね。。
今回は拡張機能の方を使用しました。

モバイル速度テスト(TestMySite)(おまけ)

モバイル速度テストはモバイルサイトの読み込み速度を測定してくれるツールです。上記2つに比べると測定結果を簡易的に教えてくれます。

PageSpeed InsightsのSPでスコアが大きくあがったのと同じ様に、こちらも改善が見られた模様(´∀｀*)

感想

Gulpは最初こそややこしさを感じていましたが、実際使ってみると使いやすくてびっくりしました。
同じNode.js製タスクランナーのGruntよりも設定の記述はシンプルに書けるみたいですね。今回の処理は、調査検証諸々含めて2時間ほどで実装できました。

今回はサイト構築後の高速表示化・軽量化の用途でGulpを使いましたが、構築中に変更ファイルを監視させて都度コンパイル・リロードさせるということも可能ですし、文法チェックやSVGスプライトなんかのプラグインもたくさんあるのが魅力的です。

• gulp-svgstore (複数のSVGファイルを1つのSVGファイルに結合)
• gulp-jshint (JavaScriptの文法チェック)
• gulp-csslint (cssの文法チェック)

ここらへんは調べている時に見かけたんですが、すぐにでも導入したいところ。
自分で使いやすいセッティングを探してみようと思います。

以上、Gulpを使った高速表示化についてでした！

追記：2018/6/18
この後Gulpでhtml圧縮(gulp-htmlmin)、.htaccess等でgzip圧縮、ブラウザキャッシュの有効期限設定の3点を対応したところ、PageSpeed InsightsにてSP99点、PC98点をマークしました(ﾟ∀ﾟ)
GTmetrixでもAスコアです。
わりと苦戦してた高速化対策がGulpであっという間にできてしまった。。＼(^o^)／