ラック
Home > ブログ > 記事 > 2016年6月 > gulpで画像圧縮とjs結合・圧縮してモバイルフレンドリーに

gulpで画像圧縮とjs結合・圧縮してモバイルフレンドリーに

カテゴリ: ホームページ, 開発環境

とあるサイトを「PageSpeed Insights」のテストにかけたら、「画像大きすぎるし数も多すぎて見れたものじゃないわ!」と怒られてちょっとへこみました…。

確かにシングルページの上、ページ内にギャラリーやアクセスマップがあるので仰っていることはご最もといいますか、ある程度想定していた内容でした。

しかしながら、色々高速化を図ったにも関わらずそこで点数が差っ引かれて真っ赤な感じだったのでこれはまずい、と思いました。

googleが去年4/21から「スマホに優しいサイトじゃないと、スマホで検索したときの順位を下げるよ」という風に検索のロジックを変更しました。

このように、モバイルフレンドリーであることがSEOの評価要素の1つであることは既に分かっていますので、放置するわけにも行きません。

ページの表示が遅いとコンテンツに到達する前に引き返してしまう可能性が高くなる、ということもありますし…。

 


ちなみに、モバイルフレンドリーは「スマホで快適にサイトが閲覧できる」ということで、

  1. コンテンツの見やすさ・読みやすさ
  2. リンクのタップのしやすさ
  3. サイトコンテンツを高速で表示させる

といったところが主に絡んでくるようです。

1番目と2番目はデザインの分野に該当しますが、3番目に関してはネットワーク・通信の知識・技術が必要になってきますね。

SEO対策としてもネットワーク通信の知識や技術が必要になってきている今日この頃…怖い怖い。

手法としては

  • サイトの容量を軽くする
    • 画像をリサイズや圧縮する
    • コードを短くする(XXX.min.cssやYYY.min.jsといった形)にする
  • HTTPのリクエスト回数を減らす
    • cssやjsを1つのファイルにまとめる
    • アイコンやちょっとした画像もcssスプライトして、枚数を減らす。アイコン画像はアイコンフォントを使用する
    • 小さなgif画像などはbase64エンコードでhtmlやcssファイルに直接埋め込む。ロゴなどのsvgもhtmlやcssに直接埋め込む
    • gzip圧縮を有効にする
  • ブラウザのキャッシュを利用するように、.htaccessやmetaタグを設定する(変更・修正の頻度が低いファイル)
  • プラグインはCDNを利用する

といったところが主に挙げられるでしょうか。

 


まずは指摘の通り画像を圧縮するしかあるまいな!ということで

この辺りを参考に画像圧縮に励んでみることにします。

サイズ自体も大きいので960pxまたは480px程度に落として、それからロスレス圧縮をかける方向で。

ついでに「cssやjsも圧縮・結合してね!」という指摘もされたのでそちらの対策も併せて行います。

この辺りを参考に。


> npm install gulp-imagemin --save-dev
> npm install gulp-uglify gulp-concat gulp-rename --save-dev

画像圧縮とjs圧縮・結合・リネームのプラグインをインストール。

※node.js、gulp本体、gulp-plumber、gulp-notify、gulp-connect-php、browser-sync、gulp-ruby-sass、ruby、sassがインストールされていることが前提。

これらについては以前のgulpの記事(その1その2)も参考。


var gulp = require("gulp");

//全般
var plumber = require('gulp-plumber'); //待機
var notify = require('gulp-notify'); //標準出力
//sass
var sass = require('gulp-ruby-sass'); //sass
//img
var imagemin = require('gulp-imagemin'); //画像圧縮
//js
var uglify = require("gulp-uglify"); //js圧縮
var concat = require("gulp-concat"); //ファイル結合
var rename = require('gulp-rename'); //ファイル名変更
//reload
var connect = require('gulp-connect-php'); //proxy(phpファイル更新時リロード用)
var browserSync = require('browser-sync'); //ブラウザリロード

//scssコンパイルタスク
gulp.task("sass", function() {
	var errorMessage = "Error: <%= error.message %>";
	var sassOptions = {
		style : 'compressed'
	} //★★★場合によってexpandedにしたり

	return sass(["./scss/index.scss"], sassOptions) //★★★配列に突っ込めば複数可
	.pipe(plumber({
		errorHandler: notify.onError( errorMessage )
	}))
	.pipe(gulp.dest("./css/"));
});

//watchタスク(Sassファイル変更時に実行するタスク)
gulp.task('sass-watch', ['sass'], function(){
	var watcher = gulp.watch('./scss/**/*.scss', ['sass']);
	watcher.on('change', function(event) {
		console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); //ログ出力
	});
});

//画像圧縮
gulp.task('imagemin', function(){
	gulp.src('./img/origin/**/*.+(jpg|jpeg|png|gif|svg)')
		.pipe(imagemin())
		.pipe(gulp.dest('./img/')); //★★★環境によりパス変更
});

//js圧縮&結合&リネーム
gulp.task('js.concat', function() {
	return gulp.src(['./js/origin/index.js'])
		.pipe(plumber())
		.pipe(concat('main.js'))
		.pipe(gulp.dest('./js/concat/')); //srcとdistを別ディレクトリにしないと、自動でタスクが走る度にconcatしたものも雪だるま式に追加されていく
});
gulp.task('js.uglify', ['js.concat'], function() { //第2引数に先に実行して欲しい js.concat を指定する
	return gulp.src('./js/concat/main.js')
		.pipe(plumber())
		.pipe(uglify({
			preserveComments: 'some' // ! から始まるコメントを残すオプションを追加
		}))
		.pipe(rename('./js/main.min.js'))  // 出力するファイル名を変更
		.pipe(gulp.dest('./'));
});
//上記2つをまとめておく
gulp.task('js', ['js.concat', 'js.uglify']);

//proxy経由
gulp.task('connect-sync', function() {
	connect.server({
		port:8001,
		base:'./',
		bin: 'D:/xampp/php/php.exe',
		ini: 'D:/xampp/php/php.ini' //★★★環境により要ファイルパス変更。Windowsの場合はこれがないと上手く動かないらしい
	}, function (){
		browserSync({
			proxy: 'localhost:8001'
		});
	});
});

//リロード
gulp.task('reload', function(){
	browserSync.reload();
});

//gulpのみでsass-watchとjsとimageminとconnect-syncを動かす
gulp.task('default', ['sass-watch', 'js', 'imagemin', 'connect-sync'], function() {
	gulp.watch("./**/*.html",["reload"]); //★★★ファイル種類によって足し引き
	gulp.watch("./**/*.php",["reload"]);
	gulp.watch("./**/css/*.css",["reload"]);
	gulp.watch("./**/js/*.js",["reload"]);
});

こんな感じのgulpfile.jsを作成して、gulpで一気にできるようにしました。

…さすがにこれだけの処理を一括で行うと時間がかかるようになってきました…とはいえ、一度起動してしまえばあとは楽なのでこれで。

場合によっては画像の圧縮を削ったり調整すれば良いですし。

 

これで60点台まで行ったので、及第点かなぁ、と思います。

タグ: css, javascript, 手順, Sass(Scss), gulp

 



関連する記事一覧