addyosmani

Image Decoding in Blink / Chrome (true as of M62)

Blink decodes off the main thread for image elements and for CSS styles (an image as an element's background style, for example). Moving the decode to the compositor thread (or the compositor worker thread pool?) does free-up the main thread to work on other tasks. We call this deferred decoding. With deferred decoding, the decode work remains on the critical path for presenting a frame to the display, so it can still cause animation jank.

The HTMLImageElement.decode() API should help with the jank problem. Also deferred decoding does not work with SVG image resources. There are still cases where decoding images happens synchronously on the main thread: 2D canvas drawImage() and createPattern(), and WebGL texture uploads.

addyosmani

// https://hg.mozilla.org/mozilla-central/rev/2f9043292e63
// Used to detect minification for automatic pretty printing
const SAMPLE_SIZE = 30; // no of lines
const INDENT_COUNT_THRESHOLD = 20; // percentage

function isMinified (str) {
  let isMinified;
  let lineEndIndex = 0;
  let lineStartIndex = 0;
  let lines = 0;

addyosmani

Some quick thoughts on https://twitter.com/dan_abramov/status/884892244817346560. It's not ignorant at all to ask how browser vendors approach performance. On the V8 side we've discussed bytecode precompilation challenges a few times this year. Here's my recollection of where we stand on the idea:

JavaScript engines like V8 have to work on multiple architectures. Every version of V8 is different. The architectures we target are different. A precompiled bytecode solution would require a system (e.g the server or a CDN) to generate bytecode builds for every target architecture, every version of V8 supported and every version of the JavaScript libraries or bundles bytecode is being generated for. This is because we would need to make sure every user accessing a page using that bytecode can still get the final JS successfully executed.

Consider that if a cross-browser solution to this problem was desired, the above would need to be applied to JavaScriptCore, SpiderMonkey and Chakra as well. It would need to ca

addyosmani

http://www.corral.net/
http://www.arizonasportsfans.com/
http://www.oi.com.br/
http://www.likeable.com/
http://www.nysportsday.com/
http://www.tstllc.net/
http://www.statnews.com/
http://www.springmobile.com/
http://www.folhadeparnaiba.com.br/
http://www.bilibili.com/

addyosmani

• https://bundle.treebo.com: https://www.webpagetest.org/result/170507_T5_SZW/
• https://bundle-ssr.treebo.com: https://webpagetest.org/result/170507_SS_SZX/
• https://bundle-ssr-splitting.treebo.com: https://webpagetest.org/result/170507_QH_T7H/
• https://bundle-ssr-splitting-preload.treebo.com: https://webpagetest.org/result/170507_TV_YKR/
• https://bundle-ssr-splitting-preload-streaming.treebo.com: https://webpagetest.org/result/170507_0E_TGP/
• https://bundle-ssr-splitting-preload-streaming-critical.treebo.com: https://webpagetest.org/result/170507_E1_Y63/
• https://bundle-ssr-splitting-preload-streaming-critical-preact.treebo.com: https://webpagetest.org/result/170507_TT_TTW/

addyosmani

• https://www.zachleat.com/web/comprehensive-webfonts/
• https://calendar.perfplanet.com/2016/loading-web-fonts-asynchronously/
• https://www.bramstein.com/writing/web-font-loading-patterns.html
• https://developers.google.com/web/updates/2016/02/font-display
• https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization
• https://css-tricks.com/loading-web-fonts-with-the-web-font-loader/
• https://www.keycdn.com/blog/web-font-performance/
• https://prowebtype.com/delivering-web-fonts/

addyosmani

"We need Webpack presets" and "Webpack and its plugins are too hard to configure correctly" have been the number one cause of developer pain shared with me from large sites adopting Progressive Web Apps and optimising their load performance.

If I was building a Webpack preset pack for performance, I might use the following:

• Ensure you're using a production build of your framework: new webpack.DefinePlugin({ 'process.env': env })
• Minify your JS: webpack.optimize.UglifyJsPlugin
• Compress your resources (GZip): compression-webpack-plugin
• Split your vendor chunks: CommonsChunkPlugin

addyosmani

• React: https://github.com/insin/react-hn (PWA)
• VueJS 2.0: https://github.com/vuejs/vue-hackernews-2.0 (PWA)
• Angular 2.0: https://github.com/housseindjirdeh/angular2-hn (PWA)
• Ember: https://github.com/chancancode/hn-reader
• Preact: https://github.com/addyosmani/preact-hn (PWA)
• Inferno: https://github.com/infernojs/inferno-hn

addyosmani

1. Type chrome://flags into your browser
2. Scroll down to “Enable Developer Tools experiments” and click enable
3. Restart Chrome
4. Open up DevTools
5. Click on the gear icon — it’s typically on the top right or bottom right
6. Select experiments from the menu on the left
7. Hit shift 6 times to show hidden experiments
8. Enable 'V8 Runtime Call Stats on Timeline'

We are hoping to turn this feature on by default soon so the above steps are not needed.

addyosmani

google.com
facebook.com
youtube.com
baidu.com
amazon.com
yahoo.com
wikipedia.org
qq.com
twitter.com
google.co.in