画像最適化戦略 Lazy Loading 編 | blog.jxck.io
Intro 長らく議論されてきた <img> や <iframe> における Lazyload について、仕様と実装が動きを見せている。 ここでは、特に画像 <img> に注目し、 Lazyloading の議論の変遷を踏まえた上で現状を解説する。 画像最適化シリーズ第 5 回目のエントリである。 画像最適化戦略 PNG/JPEG 編 画像最適化戦略 Picture 編 画像最適化戦略 WebP 編 画像最適化戦略 SVG/Font 編 > 画像最適化戦略 Lazy Loading 編 Lazyloading 画像や iframe の埋め込みは、読み込むサイズも大きく、処理が同期であるため、レンダリングのボトルネックになりやすく、それらが多いページでは初期表示の遅延の原因となることが多くあった。 特に縦に長いページでは、最初にユーザが見えている領域 (Above the Fold) では表
Better HTTP/2 Prioritization for a Faster Web
HTTP/2 promised a much faster web and Cloudflare rolled out HTTP/2 access for all our customers long, long ago. But one feature of HTTP/2, Prioritization, didn’t live up to the hype. Not because it was fundamentally broken but because of the way browsers implemented it. Today Cloudflare is pushing out a change to HTTP/2 Prioritization that gives our servers control of prioritization decisions that
React v16 Performance Inspection - from scratch
React v16 がリリースされた。詳しい記事は以下のエントリを参考にすると良い。 facebook.github.io 安心と信頼の日本語版、koba04記事もあるので見てみて欲しい。 React v16 changes - blog.koba04.com さて、リリースされたので、実際に会社で作ってるSSRを実施するboilerplateに対して組み込んでみてどれだけ効果があるかを計測してみた。ただし、まだ React の renderToStream は実施していない。ひとまずアップグレードしただけでどれだけの効果があるかを見たかったので renderToStream の効果については今後計測予定。 2017/09/29 追記： renderToNodeStreamの結果を計測結果をまとめに追記した。 Response Benchmark Spec: Macbook Pro 13
Web クライアントサイドのパフォーマンスメトリクス — Speed Index、Paint Timing、TTI etc...
色々なパフォーマンス指標のこと 何かを評価するときには何らかの指標（メトリクス）を定めますが、何を指標として設定してどのように測るかというのは重要です。 いわゆる KPI もそうですが、扱っている商材やビジネスのステージ（フェーズ）によっても適切な指標は変わるかもしれません。色々な指標をよく理解して引き出しを広げておくことは、状況に合わせて適切な指標を選んで改善していく過程で役立ちます。 これまでのパフォーマンス指標 過去の Web パフォーマンス界隈はバックエンドから HTML ドキュメントを返却する際の所要時間や、Web ページロード時の各イベントの発火時間を計測する方法が多く見られました。 Backend Time Browser Event Based DOMContentLoaded Page load ( onload ) 近年は特に後者の、既定のイベント発火に依存していたクラ
Rendering: repaint, reflow/relayout, restyle
2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 17 This post is part of the 2009 performance advent calendar experiment. Stay tuned for the articles to come. UPDATE: Ukraine translation here. Nice 5 "R" words in the title, eh? Let's talk about rendering - a phase that comes in the Life of Page 2.0 after, and sometimes during, the waterfall of downloading components. So how does
フロントエンド速度改善をしようとして参考にしたもの - $shibayu36->blog;
最近フロントエンドの速度改善をほんの少しだけやって、いろんな資料を参考にしたので、今後また速度改善をする時に備えて、参考になった資料をまとめておく。今回パフォーマンス改善やった項目としてはExpiresヘッダ付ける、gzip圧縮かける、JSをbodyの一番下にとか基本的なことしかやらなかったので、そのあたりはこの記事ではまとめていません。 今回は「測定する」「ブラウザがどう表示しているか知る」「改善を検討する」の流れで調べていったのでその順にまとめる。 測定する 何はともあれ測定しないと何も始まらないので、まずは測定の仕方について調べた。 PageSpeed Insights( https://developers.google.com/speed/pagespeed/insights/ )と、webpagetest( http://www.webpagetest.org/ ) はとりあえ
シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ？」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ？？？」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
Reduce the size of the above-the-fold content | PageSpeed Insights | Google for Developers
Reduce the size of the above-the-fold content Stay organized with collections Save and categorize content based on your preferences. This rule triggers when PageSpeed Insights detects that additional network round trips are required to render the above the fold content of the page. Overview If the amount of data required exceeds the initial congestion window (typically 14.6kB compressed), it will
Inlining critical CSS for first-time visits
Inlining critical CSS for first-time visits March 10th, 2015 After listening to Scott rave on about how much of a perceived-performance benefit he got from inlining critical CSS on first load, I thought I’d give it a shot over at The Session. On the chance that this might be useful for others, I figured I’d document what I did. The idea here is that you can give a massive boost to the perceived pe
60fps on the mobile web — Flipboard Engineering
Flipboard launched during the dawn of the smartphone and tablet as a mobile-first experience, allowing us to rethink content layout principles from the web for a more elegant user experience on a variety of touchscreen form factors. Now we’re coming full circle and bringing Flipboard to the web. Much of what we do at Flipboard has value independent of what device it’s consumed on: curating the bes
Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study — Smashing Magazine
In this article, Addy Osmani will discuss how to improve the paint performance of your websites and Web apps. Luckily, a lot of great tools out there can help with that. Be sure to measure paint performance on both desktop and mobile, and if all goes well, your users will end up with snappier, more silky-smooth experiences, regardless of the device they’re using. Today we’ll discuss how to improve
iPhone Webアプリにおける13のJavaScript高速化アレコレ：マピオンラボ(Javascript)
こんちは、中村です。 先日マピオンラボよりリリースしたiPad用地図「マピオンタッチ デラックス」のコアとなるフリースクロール地図ライブラリの開発を担当させて頂きました。せっかくなのでターゲットブラウザをMobileSafariに設定し、比較的スペックがプアなiPhone3Gや3GSでも十分な速度で動作するようJavaScript部分の高速化をアレコレ調べてみたのでまとめてみます。一番低スペックなiPhone3Gで実際にどの程度早くなるかをタイマーで計測してみましたってのが本エントリーのミソです。 JavaScriptパフォーマンスチェック - Googleドキュメント 1. new Object より {}（Objectリテラル） オブジェクトを１万個生成するならばリテラルで記述することで約26ms高速化！ loop=10000; for(var i=0;i<loop;i++){}; /
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Speed and Performance Optimization
お前自分ちのページャUIが本当に速いと思ってんの？
https://jp.techcrunch.com/2011/07/28/20110728google-page-speed-service/