#10 Resource Hints: Preload, Preconnect, Prerender.
#performancematters #fastweb #jvmtech #jvmperformanceseries

#10 Resource Hints: Preload, Preconnect, Prerender.

Thomas Feldhaus Thomas Feldhaus

Thomas Feldhaus

Published May 11, 2020
+ Follow

In the page based web there was for a long time no possibility to actively control the loading process as a developer - with the Resource Hints comes a simple possibility to actively control the loading process.  

Preload

Preload is a new web standard for loading resources for the current page, these can be script, style, image, font and document types. 

<link rel="preload" href="carloschi.woff2" as="font" type="font/woff2" crossorigin> 

For CORS reasons, the attribute crossorigin must also be set for fonts. No general recommendation can be made with preload, but any resource that blocks rendering during tests should be preloaded with preload.  

Prerender

Prerender not only loads the document, but starts the entire rendering process of the page in the background. Ideal e.g. for landing pages with a clear CTR. 

<link rel="prerender" href="https://www.jvm.com/en/"> 

Preconnect

Preconnect does not yet trigger a loading event, but starts the DNS lookups, TLS negotiations the TCP handshakes. So it is helpful to have a domain for a later API's call "warm up", this can reduce the latency up to 500ms. 

<link href="https://www.jvm.com" rel="preconnect" crossorigin>

Tomorrow follows: #11 JavaScript Performance


To view or add a comment, sign in

More articles by Thomas Feldhaus

  • The speed of use
    May 29, 2020

    The speed of use

    At the previous article "The perception of performance" we found out a lot about the human perception of time and speed…

    1 Comment
  • #19 The perception of performance
    May 27, 2020

    #19 The perception of performance

    Do milliseconds and kilobytes make the difference? In the previous articles on performance we have heard a lot about…

  • #18 Building a web performance culture.
    May 26, 2020

    #18 Building a web performance culture.

    Web Performance is not a product feature that can be easily switched on and off, ideally the entire organization…

  • #17 AMP, Performance built-in.
    May 20, 2020

    #17 AMP, Performance built-in.

    For 16 episodes we have now bombarded you with tips, tricks and ideas how you can improve the speed of your web app…

  • #16 Webassembly
    May 19, 2020

    #16 Webassembly

    WebAssembly or short Wasm is a huge deal as it is enabling deployment of lower level language code on the web for…

  • #15 Image & Video Formats
    May 18, 2020

    #15 Image & Video Formats

    In the first years, the Web was a text-based wasteland with only a few image oases available solely through links. This…

    1 Comment
  • #14 PWA/Service Worker
    May 15, 2020

    #14 PWA/Service Worker

    When thinking about performance, web technologies always had a reputation of being slow and sluggish, especially on…

  • #13 Web Performance Timing APIs
    May 14, 2020

    #13 Web Performance Timing APIs

    If you are into web performance you surely stumbled upon very detailed numbers. No matter whether you measure…

  • 12 Javascript defer or async?
    May 13, 2020

    12 Javascript defer or async?

    When adding interactivity to our web pages we heavily rely on JavaScript. But adding JavaScript comes with a price.

  • #11 JavaScript Performance
    May 12, 2020

    #11 JavaScript Performance

    Nowadays, web applications are heavily interactive and make use of lots of JavaScript. May they be scripts we wrote for…

See all articles

Explore content categories