Building responsively allows us to create flexible user interfaces that support the widest possible audience with a single front-end codebase. But in embracing the ever-increasing contexts in which our sites are used, performance and accessibility must remain our highest priorities; we must continually question each code addition, and improve our delivery and application techniques to ensure they’re best serving users’ needs.
This talk will explore the challenges of creating fast and broadly-accessible websites and offer approaches that dramatically improve performance, usability, access, and sustainability.
21. “when it comes to your web browsing experience,
it turns out that latency, not bandwidth, is
likely the constraining factor today.
Ilya Grigorik
https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
35. “
Identify and “inline” the CSS necessary for
rendering the above-the-fold content
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
49. <style>
<% include "critical.css" %>
</style>
<script>
<% include "initial.js" %>
</script>
Critical JS, inlined
...
</head>
<head>
...
50. Which JavaScript is “critical?”
• Ideally, none!
• functions for loading additional assets
• Feature tests? Important polyfills?
• Conditional logic for loading files
51. function loadCSS( href ){
var ss = window.document.createElement( "link" );
var ref = window.document.getElementsByTagName( "script" )[ 0 ];
ss.rel = "stylesheet";
ss.href = href;
ss.media = "only x";
ref.parentNode.insertBefore( ss, ref );
setTimeout( function(){
ss.media = "all";
} );
}
loadCSS( “/path/to/all.css” );
!
An async CSS loader for non-critical CSS
52. function preloadSupport(){
var link = document.createElement('link');
link.rel = 'PRELOAD';
return link.rel == 'preload';
}
Detecting rel=preload support
68. Optimizations Made:
• Extract and Inline “Critical” CSS
• Load full CSS asynchronously
• Load scripts asynchronously (ads too!)
• Load fonts asynchronously
• Style fallback fonts to match custom font sizes
• Use font loading APIs to swap-in custom fonts once
loaded (allow fallback text to show first)
73. “if you have ever inlined a resource
(CSS, JS, or an image), you've been
"simulating" server push
Ilya Grigorik
https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/
74. HTTP/2 means no more:
• Inlining CSS, JS, or images
• Concatenating CSS & JavaScript files
• Domain Sharding
• Image sprites