blog上野谷根千界隈でまったりと暮らしているWeb系フリーランスの雑記ブログです。Webやフリーランス、グルメなどについてもしゃもしゃ書いてます。Update:2019/10/31こんにちは、katori@xxbicotです。このたび遅まきながらタスクランナーデビューをしました。これまでGulpは何回かチャレンジしようとして、インストール方法やら設定ファイルやら調べたら(‘ω’)ウワアアアとなってしまって手をつけていませんでした。今回サイト表示の高速化のために使って見たところ、劇的な効果がありました。今回は導入したGulpのプラグインと、それによってどれだけサイト表示の高速化ができたかの結果をご紹介します。InsightsやLighthouse等のページ読み込み速度の測定ツールを使ったところ、「リクエスト数減らしてね」「画像やリソース(HTML、CSS、JavaScript)を圧縮してね」という改善ポイントが上がってきました。作業データをそのまま圧縮してしまうと、今後の修正点がでた時などの対応が少しわかりづらくなる。一括で諸々の圧縮や結合を行ったアップロード用データを生成・出力することはできないだろうか。思い調べてみると、Gulpがガツガツヒットしたので腹をくくって導入してみました。導入にあたり、こちらの記事を参考にさせていただきました。関する評判の良さそうプラグインをインストール。画像圧縮それぞれ処理をgulpfile.jsに記述し(処理の中身は割愛)、完成したサイトデータに対して実行しました。各種測定ツールで測ったGulp処理前と処理後のスコアを比較してみます。Insightsは、webページのコンテンツを解析し、ページの読み込み時間に関するパフォーマンスを測定、スコア化してくれるツールです。89/100TOPページとパーツ集ページ(Detail)それぞれ測定してみました。今回このツールが一番差が出たのですが、かなりスコアがアップ!レンダリングブロックしていた(と警告が出ていた)scriptファイルを結合・圧縮したのが一番大きな要因なようですね。モバイル版のスコアの上がり方が大きかったです。LighthouseLighthouseはwebサイトのパフォーマンスやアクセシビリティ等の品質を測定し、項目ごとにスコア化してくれるツールです。今回はPWAを除いた項目でチェックしました。Practices:81SEO:80表示の高速化は「Performance」項目に含まれます。こちらもちょっとだけ上がりました。ツールの[Audits]タブどちらからでも使用することができます。双方で結果が大分異なるんですよね。今回は拡張機能の方を使用しました。モバイル速度テスト(TestMySite)(おまけ)モバイル速度テストはモバイルサイトの読み込み速度を測定してくれるツールです。上記2つに比べると測定結果を簡易的に教えてくれます。́∀`*)感想Gulpは最初こそややこしさを感じていましたが、実際使ってみると使いやすくてびっくりしました。同じNode.js製タスクランナーのGruntよりも設定の記述はシンプルに書けるみたいですね。今回の処理は、調査検証諸々含めて2時間ほどで実装できました。用途でGulpを使いましたが、構築中に変更ファイルを監視させて都度コンパイル・リロードさせるということも可能ですし、文法チェックやSVGスプライトなんかのプラグインもたくさんあるのが魅力的です。(cssの文法チェック)ここらへんは調べている時に見かけたんですが、すぐにでも導入したいところ。自分で使いやすいセッティングを探してみようと思います。InsightsにてSP99点、PC98点をマークしました(゚∀゚)GTmetrixでもAスコアです。苦戦してた高速化対策がGulpであっという間にできてしまった。WORDPRESS(13)Profilekatori在宅フリーランスのWebデベロッパー(フロントエンドエンジニア、コーダー)です。東京の上野谷根千界隈でまったり仕事してます。