Mediumでとある記事を高速にスクロールして読んでいたら、さりげなく画像を遅延読み込みしていることを知った。読み込み発火のタイミングがうまいのかあまり遅延読み込みの存在を感じさせないのもすごいと思ったが、プレースホルダー画像の実装方法が良さそうだった。単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダーとして表示しているだけだが、十分に機能していそうで目から鱗だった。
画像の遅延読み込みはなかなか曲者で、読み込むタイミングやプレースホルダーとしている画像が悪いと大きくユーザーにストレスを与える。プレースホルダーでよく使われるローディング画像は読み込み中のインジケーターではあるが、同時に何か遅いことをやっていますというネガティブな印象も与えてしまう。ユーザーはローディング画像を見るとスクロールを止めなくてはならないのかと感じることもあるだろう。
Mediumのぼやけた画像はローディング画像のような強い意味を持たないので、ユーザーは無視することができる。そういう点でも優れているが、クオリティなどを考えなくても良いので作りやすいという点も優れている。問題は画像ごとに作成される点だが、Mediumの構成(HTTPS + SPDY/3.1)では無視できそうだ。
@myakuraにFacebookでも同じ手法で体感速度の向上を狙っていることを教えてもらった。実際にはかなり複雑なことを考えた結果のようだ。どちらが先かはわからないが、想像以上にリーズナブルな手法ではありそうだ。
あまり遅延読み込みに良い思い出はないのだけど、必要な機会があったらこの手法を真似て実装したい。