Workshop: Getting up to speed
traceroute to see the network llayers
set http connection to KeepAlive: On
Can be in headers, html attributes, or dynamic JS
<link rel="preload" href="http://cdn.com">
These are more useful for dynamically injected assets or assets below the fold of the page.
preloadDNS, TCP, SSL & HTTP Request. (perfect for fonts) (current page)
prefetchDNS, TCP, SSL & HTTP Request. (to prefetch the next page) (next page)
dns-prefetchDNS only (current page)
preconnectDNS, TCP, SSL (can be combined with
CSS is render-blocking to avoid FOUC.
It is possible to add a media attribute (print, media queries) to the
Critical Path CSS Render
- load critical css inlined and minimized in the (determine it programatically critical-path-css-tools by Addy Osmani) aim for < 14kb so it transfers on the first trip in the HTTP request.
- load the rest of the css dynamically with JS loadCSS. Set a cookie to flag that the css is already loaded.
JS is parsing blocking.
<script> has the attribute
async (downloads JS without parting) and
defer (the same as async but waits to execute until DOM is ready).
- Fires that piece of code when the browser is idle.
- perfect for analytics events like Mixpanel
font-display to tell the browser how to treat your font loading.
crossorigin + https://fontfaceobserver.com
- has all the weights baked into one file
You can select the subset of the font that you need. Discard glyphs that you dont use like accents for other languages.
Subsetting can be done in the href as a query string param for example
Prefer woff2. Load: local(), woff2, or woff (in that order)
You can use
@font-face to load specific subset of unicode ranges.
- cloudinary web speed test