Workshop: Getting up to speed

    shell command to see the network llayers

    set http connection to KeepAlive: On

    Can be in headers, html attributes, or dynamic JS

    ex <link rel="preload" href="http://cdn.com">

    • preload DNS, TCP, SSL & HTTP Request. (perfect for fonts) (current page)
    • prefetch DNS, TCP, SSL & HTTP Request. (to prefetch the next page) (next page)
    • dns-prefetch DNS only (current page)
    • DNS, TCP, SSL (can be combined with dns-prefetch)(current page)

    CSS is render-blocking to avoid FOUC.
    It is possible to add a media attribute (print, media queries) to the <link>.

    • 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 . 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 (the same as async but waits to execute until DOM is ready).

    Hidden Chrome dev tools experiment

    • perfect for analytics events like Mixpanel
    • auto
    • fallback
    • block
    • swap
    • optional

    Use rel="preload" and 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 &text=Hello

    Prefer woff2.
    Load: local(), woff2, or woff (in that order)

    • webpagetest