Progressive jpegs: a new best practice
Bandwidth-wise, images are hogs. They are the largest average web site payload (62%), and they are most often the content bottleneck. When images arrive, they come tripping onto the page, pushing other elements around and triggering a clumsy repaint. They come “chop chop chop chop chop downâ€� or you get nothing until suddenly “boom!â€� out of nowhere there it is. We all know what I’m talking abou
Latency: The New Web Performance Bottleneck - igvita.com
By Ilya Grigorik on July 19, 2012 If we want a faster browsing experience then reducing the round trip time (RTT) should be near the top of our list. Or, as Mike Belshe put it: more bandwidth doesn't matter (much). Now, let's be clear, higher bandwidth is never a bad thing, especially for use cases that require bulk transfer of data: video streaming, large downloads, and so on. However, when it co
Creating Page Load Waterfalls for Older Mobile Devices
Like most people involved in web performance I spend hours looking at page load waterfalls, each one tells it's own story and the patterns hint at where the issues are. With tools like Mobitest, WebPageTest, remote debugging in Chrome and Safari I can get a good level of detail for modern mobile browsers but I often want to test on older devices where the dev tools support isn't as good or more co
なぜ QUIC や SPDY が生まれたのか ? - Block Rockin’ Codes
Intro Google が SPDY の開発を始めたのは 2009 年で、 2012 年に HTTP2.0 のドラフトとして採用されたあたりからちょっと話題になりました。 翌 2 月には新たなプロトコル QUIC の存在が Chromium のソースからリークしたのですが、しばらくは音沙汰なく。 6 月に入ってやっと Google から公式アナウンスとドキュメント類が出ました。 去年から今年にかけて立て続けに出てくる新しいプロトコルの話。 なぜ今 Web のプロトコルが見直されるのか？ 何が問題で、なぜ Google はそれらを作り変えるのか？ SPDY や QUIC は Google の独自プロトコルだけど、それは本当にただの独自プロトコルで終わらせていいのか？ 20% ルールで作ってみた Play プロジェクトでしかないのか？ こうした新しい動きには、かならず「それまで」と「今」を踏
スマートフォンサイトの読み込み速度を改善するために
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
How To Create High-Performance Mobile Websites — Smashing Magazine
In this article, we’ll demonstrate methods to identify how people interact with a website differently on mobile devices, and the design decisions that can be made based on this understanding. Our objective is not only to improve Web performance but to increase the client’s return on investment. The following techniques center on the two unique characteristics of mobile phones: small batteries and
loadspeed.js timings : onload, DomContentLoaded or something else?
Are loadspeed.js timings correct ? because i have different results between loaspeed.js and developpor toolbar in Chrome. var page = require('webpage').create(), system = require('system'), t, address; page.viewportSize = { width: 1024, height: 768 }; if (system.args.length === 1) { console.log('Usage: loadspeed.js <some URL>'); phantom.exit(1); } else { t = Date.now(); address = system.args[1]; p
Make the Web Faster | Google for Developers
オンラインのツールで PageSpeed スコアを取得し、PageSpeed 候補を使用してウェブサイトの表示速度を上げることができます。
wesleyhales.com: Web Performance Testing With PhantomJS
HTTP requests, heavy/unminified resources, and UI thread blocking should be on the mind of every front-end developer. These are just a few issues that can cause serious bottlenecks in page load times. Having a faster load time equals better search engine rankings, higher conversion rates, and an overall reduction in bandwidth costs. I recently took on the task of coming up with an accurate way to
プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス | ゆっくりと…
本ブログでは、サイトの高速化に直結する「JavaScript 非同期読み込み」の話題を多数取り上げてきました。タイトルに釣られてこの記事を見てくれている方なら Google Analytics の非同期コードスニペット はご存知でしょうし、規模の大きいサイトやアプリ用に RequireJS などのフレームワークを使っている方もいるでしょう。 GA も RequireJS も、動的に生成したスクリプト要素を DOM に埋め込む「DOM 挿入法」が用いられています。さらに遡れば、Steve Souders が 2009年4月の記事 ノン・ブロッキングなスクリプト読み込み で、6つの手法に分類しています。 果たしてこれらの方法は、サイトの高速化にとってベストなのでしょうか？ 答えは2012年12月の海外記事にありました。そこで本エントリーでは、日本ではほとんど取り上げられていない Frame i
Optimize CSS Delivery | PageSpeed Insights | Google for Developers
Optimize CSS Delivery Stay organized with collections Save and categorize content based on your preferences. This rule triggers when PageSpeed Insights detects that a page includes render blocking external stylesheets, which delay the time to first render. Overview Before the browser can render content it must process all the style and layout information for the current page. As a result, the brow
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
Measuring performance of the user experience
TL;DR: WebPagetest will now expose any User Timing marks that a page records so you can use the same custom events for your synthetic test measurement as well as your Real User Measurement (and you can use WebPagetest to validate your RUM measurement points). Before kicking off an optimization effort it is important to have good measurements in place. If you haven't already read Steve Souders' bl
Jank Free: Let's Make the Web Silky Smooth!
What is Jank? Modern browsers try to refresh the content on screen in sync with a device's refresh rate. For most devices today, the screen will refresh 60 times a second, or 60Hz. If there is some motion on screen (such as scrolling, transitions, or animations) a browser should create 60 frames per second to match the refresh rate. Jank is any stuttering, juddering or just plain halting that user
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSSConfUS 2013] Nat Duca & Tom Wiltzius: Jank Busters - Chrome Rendering Performance![[CSSConfUS 2013] Nat Duca & Tom Wiltzius: Jank Busters - Chrome Rendering Performance](https://cdn-ak-scissors.b.st-hatena.com/image/square/adfe0778646c27c1703842051b355a9a7fc3c661/height=288;version=1;width=512/https%3A%2F%2Fi.ytimg.com%2Fvi%2Fx0VR3lUOpdc%2Fhqdefault.jpg)
Waterfall Antipatterns
https://gist.github.com/wangyang0123/2475509
Why Mobile Web Is Slow? - Codename One
Notes from Velocity 2013: What people are saying about user experience, RUM, and mobile performance - Web Performance Today
Rigor | Splunk