けっこう古めのWebサイトのパフォーマンス改善でやった事まわりの雑なメモです

環境

  • 画像はCloudfront→S3
  • サーバはEC2
  • Lambdaも一部仕様（最終的には使わなかった）

次世代フォーマットでの画像の配信

最初にLambdaで↑これを実装しましたが、思ったように点数が上がらなかったので

cwebpを使って、直接S3にwebp形式のファイルをアップロードしました

1
2
3
4
// cwebpの導入
$ sudo curl -o /usr/local/src/libwebp-1.0.2-linux-x86-64.tar.gz https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.0.2-linux-x86-64.tar.gz
$ sudo tar zxvf /usr/local/src/libwebp-1.0.2-linux-x86-64.tar.gz -C /usr/local/src/
$ sudo cp /usr/local/src/libwebp-1.0.2-linux-x86-64/bin/cwebp /usr/local/bin/cwebp

jpgとpngを再帰的に一括変換（※元ファイルと同じ階層に.webpファイルが出力されます）

1
2
$ find . -name "*.jpg" | xargs -IXXXX cwebp XXXX -o XXXX.webp
$ find . -name "*.png" | xargs -IXXXX cwebp XXXX -o XXXX.webp

js,cssの最小化

単純にWebpackで1ファイルにまとめました。jQueryを利用しているサイトだったので、jQueryをrequireしています

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// package.json（抜粋）
{
  "scripts": {
    "webpack-bundle": "./node_modules/.bin/webpack -p",
  },
  "devDependencies": {
    "css-loader": "^2.1.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^3.0.1",
    "node-sass": "^4.9.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  },
  "dependencies": {
    "jquery": "^1.11.3",
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');
var webpack = require('webpack');
var jquery = require('jquery');

module.exports = {
    entry: {
        "top": path.join(__dirname, "./webpack/top/entry.js"),
    },
    output: {
        path: __dirname + '/webroot/bundle',
        filename: "./[name]/bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({fallback:'style-loader',use:'css-loader'})
            },
            {
                test: /\.(jpg|gif|png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            },
        ]
    },
    resolve: {
        modules: ['./node_modules'],
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new ExtractTextPlugin("./[name]/bundle.css")
    ],
    performance: { hints: false },
    cache: true
};
1
2
// 圧縮
$ npm run webpack-bundle

キーリクエストのプリロード

Webpackでbundleしたcss,jsをrel=preloadに指定する

1
2
<link rel="preload" href="/bundle/top/bundle.css" as="style">
<link rel="preload" href="/bundle/top/bundle.js" as="script">

必須のドメインへの事前接続

Resource Hintで、あらかじめ接続するドメインなどを明記しておく

1
2
3
4
<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>
<link rel="prefetch" href="/bundle.js" as="script">
<link rel="prerender" href="//example.com/next-page.html">

オフスクリーン画像の遅延読み込み

いまのところ、lazysizesが一番導入も手軽で他のライブラリにも依存しないし、最適解な気がしました

ただし、近い将来、ブラウザ側でlazyloadに標準対応がされそうな雰囲気なので、実装されていればこっちのほうがいいかも

その他：Chromeでjs,cssのカバレッジを調べる

Chromeの開発者ツールで、[Console]→[メニュー]→[More tools]→[Coverage]で、読み込んではいるけど使われていないコード(Unused Bytes)などの調査ができる

参考サイト