阿部寛のサイトの爆速感をLQIP (Low Quality Image Placeholder) で更に高めていく

ちまたで[阿部寛のサイト](http://abehiroshi.la.coocan.jp/)が速いと話題になっている。

 - [dev.toと阿部寛のホームページどっちが速いですか？](http://kuxumarin.hatenablog.com/entry/2017/11/15/dev.to%E3%81%A8%E9%98%BF%E9%83%A8%E5%AF%9B%E3%81%AE%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%A9%E3%81%A3%E3%81%A1%E3%81%8C%E9%80%9F%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F)
 - [dev.toと阿部寛のホームページについてちゃんと計測させてくれ](https://qiita.com/naru0504/items/7d652681d698f6d88c4f)
 - [阿部寛のサイトを高速化する](https://qiita.com/Morix1500/items/0eac072a027d478a6b83)

ところで、体感的なWebサイトの速さを決める要因の一つとして、画像の読み込みがある。爆速の http://abehiroshi.la.coocan.jp/ でさえ、自分の環境だと画像の読み込みに `500ms` ほどかかっている。

![abe_before.gif](https://qiita-image-store.s3.amazonaws.com/0/6000/c7e051b0-828a-e740-6960-fc97d1232ffd.gif)
<p style="text-align: center; font-size: 0.8em; ">(http://abehiroshi.la.coocan.jp/ を開いてみた様子。画像が読み込まれるまで空白の領域ができている)</p>


これは、[阿部寛のサイトを高速化する](https://qiita.com/Morix1500/items/0eac072a027d478a6b83) にあるように、画像形式を工夫したり、CDNを使えばおおむね解決できるのだけど、とはいえどうしようもない部分もある（そもそもHTTPのラウンドトリップが遅いとか、何らかの事情でWebPが使えないとか）

ユーザ体験を良くするためにFacebookやMediumが採用している手法として [LQIP (Low Quality Image Placeholder)](https://www.guypo.com/introducing-lqip-low-quality-image-placeholders/)というものがある。これは画質の低い（ボケたかんじの）画像を先にplaceholderとして表示しておくことで、ユーザに画像が読み込み中であるということを明示的に伝えるやりかた。

![Screen Shot 2017-11-18 at 4.21.51 PM.png](https://qiita-image-store.s3.amazonaws.com/0/6000/cd99ca0c-1dc5-b7e4-7244-9f94bf014990.png)
<p style="text-align: center; font-size: 0.8em; ">(画像はhttps://github.com/technopagan/sqip より引用)</p>


今回は[sqip](https://github.com/technopagan/sqip)というライブラリを使ってみることにする。画像の鮮明度をパラメータで指定することもできるが、今回は特にこだわりがないので、

> sqip abe.jpg

のようにシンプルなコマンドをうつだけ。Base64形式の画像を含んだ `img` タグが生成されるので、これをそのままHTMLに埋め込めば良い。

```html
<img width="314" height="366" src="/Users/foo/abe.jpg" alt="Add descriptive alt text" style="background-size: cover; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMTQgMzY2Ij48ZmlsdGVyIGlkPSJiIj48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMiIgLz48L2ZpbHRlcj48cGF0aCBmaWxsPSIjYjhhYWExIiBkPSJNMCAwaDMxM3YzNjZIMHoiLz48ZyBmaWx0ZXI9InVybCgjYikiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC43IC43KSBzY2FsZSgxLjQyOTY5KSIgZmlsbC1vcGFjaXR5PSIuNSI+PGVsbGlwc2UgZmlsbD0iIzEyMWIzYyIgY3g9IjE3NSIgY3k9IjIyNCIgcng9IjQxIiByeT0iODEiLz48ZWxsaXBzZSBmaWxsPSIjMzkwMDAwIiByeD0iMSIgcnk9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0zOC4zOTI4NiA5Ljc1ODE0IC05LjUxMTU0IC0zNy40MjI2MyAxMTYuOCA0Mi44KSIvPjxlbGxpcHNlIGZpbGw9IiMxNzE5M2UiIHJ4PSIxIiByeT0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTguNzA2MjEgOTAuNDE3NSAtNDEuMTU4NDMgLTMuOTYzMSA0MS40IDIyMi4yKSIvPjxlbGxpcHNlIGZpbGw9IiNmZmYiIGN4PSIzMSIgY3k9IjM1IiByeD0iNDciIHJ5PSIxMDgiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMjIyIDE1NC41bC04Ny41LTI1LjFMMTc4LTIyLjVsODcuNSAyNS4xeiIvPjxlbGxpcHNlIGZpbGw9IiNmZmYiIHJ4PSIxIiByeT0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTYuNTM5MDYgLTU4LjI5NzA2IDI3Ljg1MzQzIC0zLjEyNDI2IDEwNy4zIDIwNC4zKSIvPjxlbGxpcHNlIGZpbGw9IiNkYzcwNDIiIGN4PSIxMTIiIGN5PSI4NiIgcng9IjMyIiByeT0iNjAiLz48ZWxsaXBzZSBjeD0iMTE2IiBjeT0iMjEiIHJ4PSIzMiIgcnk9IjE1Ii8+PC9nPjwvc3ZnPg==);">
```

このタグ自体がだいたい1.2KBとかなので、最初の読み込みを（少しだけ）重くして、体感的な読み込み速度を改善するという感じのトレードオフになる。

![abe_after.gif](https://qiita-image-store.s3.amazonaws.com/0/6000/c73b94b5-ae1f-0ca9-1772-7cfe3409753d.gif)