HTML5 Rocks

HTML5 Rocks

HTML5 Características

Rendimiento

Modern browsers can deliver sites and applications that rival the performance of native and across loads of device types and screens. This performance does not come for free, however, and as developers we need to use a variety of techniques and technologies to get the most out of the browser. Performance is a critical part of user experience, it's a constant theme across all aspects of your development and product.

Novedades

Performance Is a Feature

Modern web applications are complex bunches of interrelated code paths and resource requirements, which in order to deliver the best user experience, must all work in harmony. To make sense of this dependency graph, we find it helpful to view web application performance from three pillars: Network, Compute, and Render. Each pillar has their own nuances, solutions and interdependencies with each other. Great performing Web Applications will ace all three to deliver the best user experience possible.

Network Performance

High performance networking is a keystone of every performance strategy - after all, if the browser is blocked on the network, waiting for the resources to arrive, then there is not much else we can do or optimize! Fast page load times, and optimized delivery of resources, translate to higher user engagement, increased conversions, and lower bounce rates.

Key Issues

  • Every millisecond counts 1000 ms delay == 7% loss in conversions
  • Unnecessary networks roundtrips Blocking resources delay the rendering of the page, causing unnecessary delays and wait times for the user.
  • Minimize payload size Compress images, minify your CSS, JS and HTML
  • Eliminate blocking resources
  • Eliminate unnecessary redirects
  • Optimize server response times that are >100ms
  • Automate performance best practices
  • You can hand-optimize your site (that’s cool!), or, consider PageSpeed optimization Such as mod_pagespeed (apache), ngx_pagespeed (nginx), or PageSpeed Service. And even use webpagetest.org/compare to run a side-by-side test!

Herramientas

  • Install PageSpeed Insights extension: it’s a performance linter for your site.
  • DevTools + remote debugging allows you to get real-world latency, cache, etc, performance from your mobile (and desktop) device.

Material de lectura adicional

Compute Performance

Runtime performance is just as important to user perception as load times, so keeping users who’ve already loaded your site happy is just as important as acquiring new users. Most performance issues that come from the compute layer stem from Javascript computation; which gives you a few key things to focus on: algorithmic complexity, Memory usage patterns, and unoptimized code.

Key Issues

  • Memory Churn Kills Performance! Churn causes GCs, which eat away at your frame-time.
  • Manipulate strings as little as possible. String manipulation often has side-effects and leak memory without you knowing.
  • JavaScript VMs like lots of small functions They can inline and fast-compute them.
  • Be on the lookout for any code which may be un-optimized Unoptimized code can cause a slew of problems, including memory issues, and slower code paths.

Herramientas

Material de lectura adicional

Render Performance

How quickly data becomes pixels on the screen is critical to your app’s success. Users notice when the frame rate drops; it reduces engagement and costs you happy users. Whenever users scroll or interact with your site or application you want to give the browser the least amount of work possible to update the pixels on the screen. When dealing with rendering performance we’re looking to reduce both the size and complexity of painting operations.

Key Issues

  • Destroy all jank - target 60fps!
  • Check your layout costs
    • How much time is being spent calculating the positions and dimensions of your elements?
    • Are you invalidating more of the tree than you anticipated? Check the scope of your layout operations.
    • Are you causing layouts to happen multiple times within a single piece of JavaScript?
  • Check your style recalculations Are you changing more styles than you anticipated? Check the scope of your style changes and keep them to a minimum!
  • Minimize the paint areas You want small paint areas; If you're seeing loads of fullscreen paints, there may be a problem.
  • Check the paint complexity How expensive is it to paint your elements? Check the styles and watch out for "semi-expensive" styles applied to many elements.
  • Reduce un-needed image resizes Decoding and resizing images can be very expensive. Even one large image operation can cause you to miss your target frame rate.

Herramientas

  • Chrome DevTools timeline is your first port of call; Fire up frame mode and check scrolling and interactions!
  • Capture a frame with Chrome tracing. You are looking for more detail regarding image decodes, resizes and PaintContents calls.

Material de lectura adicional

Getting Social