Web Performance

2014年6月21日 著

先日、Seattleから成田に向け帰ってくる飛行機のなかで読み終えた一冊に、Five Simple Stepsの『Web Performance』があります。だいぶ前に買ったのを、Nexus 7のKindleに放り込んだまま放置していたのですが、やはりFive Simple Stepsはイイですね。英語ではあるけれどさくっと読み終えられる分量、しかし内容が極端に薄っぺらいなんてこともなく、要点はちゃんと押さえてある。残念ながら、picture要素とかsrcNあたりの記述が若干、既に陳腐化している傾向は感じたものの。全体は5つのパートから構成され、なぜパフォーマンスが重要か、基本を正しく学ぼう、画像の最適化、デバイスに対する最適化、スムースさの維持、みたいな感じ。以下、マーカーを引いたなかでも特に気になったところから：

as Steve Sounders demonstrated in 2006, “80-90% of the end-user response time is spent on the frontend”

2006年のお話として、応答時間の8〜9割がフロントエンド由来だと言うお話。これ、確か自分もセミナーで引き合いに出したりしてますけど、最近だとどうなんですかね。

When I'm optimising a site I tend to implement the server optimizations first: gzip, keep-alive and caching

手っ取り早くサイトの最適化を始めるならサーバー側の処理から、と。モジュール突っ込んだり設定を数行書いたりするだけで速くなるなら、やらない手はないですな。

Smashing Magazine found the level of sharing increased when they removed theirs!

パフォーマンスコストとして挙げられがちな存在の、「いいね」ボタンについて。取っ払ったほうがむしろ流入増えたよとかいう興味深いお話。しかし理由はよくわからない。

embedding images using data URIs needs to be carefully considered as CSS blocks rendering, whereas images to not

そいやデコードのコスト考えるとあまり筋が良くない的な話もあったけど、まぁ何事も過ぎたるは及ばざるがごとし程度に認識してれば良いかしら。

onerror="this.src=image.png;this.onerror=null"

onerror属性というのを学びました。文脈的にはSVGをimg要素でもって実装するあたり。

People with dyslexia might force all characters to be displayed in a font that's easier for them to read

失読症の人にとって、アイコンフォントが用を為さないケースがあるらしい。ユーザーCSS、本当に使われてるのかなぁ。

<img src=image_x1.jpg" srcset="image.svg 1x">

あーなるほどなるほど。そういう表示のさせ方も可能か、という例。

There are proposals to prevent images with a style of display:none being downloaded, but they are still in the early stages.

そんな提案がされていたとはつゆ知らず。感覚的には理解はできるけれど、もともとCSSで隠していた画像で、後からclass属性値の変更をフックに表示させたい場面なんかを想像するに、隠し画像であってもダウンロードしておくメリットが全く無いわけではないと思うけれど......もし表示の可能性が皆無ならそもそも削っとけよという話ではあるわけで。