4 ms·
If you're using Firefox or a Chrome Beta, then you can view the `rel=preconnect` resource hint in use on my site https://www.lfgss.com/ https://www.lfgss.com/
by buro9 11y ago
If you're using Firefox or a Chrome Beta, then you can view the `rel=preconnect` resource hint in use on my site https://www.lfgss.com/ https://www.lfgss.com/
You'll see it as a HTTP header:
link:<//cdnjs.cloudflare.com>; rel=preconnect, <//www.google-analytics.com>; rel=preconnect, <https://login.persona.org>; rel=preconnect, <https://static.login.persona.org>; rel=preconnect, <//fonts.googleapis.com>; rel=preconnect, <https://fonts.gstatic.com>; rel=preconnect; crossorigin
It made a significant difference to Google Fonts speed as well as Persona.
I'd definitely recommend using resource hints in your base HTML template or server controller, for the assets that you know every page will access. This is the low hanging fruit... making this super specific for each page likely won't fit into your CMS easily.
- SimeVidas 11y agoBut what if the browser already has all the page’s subresources in the network cache? Wouldn’t the preconnects then be a waste?
- buro9 11y agoThe browser can make sense of this, the browser can also make sense of not doing a DNS prefetch if it already has one in-flight for the preconnect, etc. The gains are such that it is better to add the hints than not.