solvit.io

Improve the loading of your website resources (images, web fonts, styles)

These solutions can be combined in the same web page.

Solution #1

Resolve the DNS names even before using them to load resources (the gain is minimal, because it just makes the DNS lookup a bit earlier than expected):

<!-- ... -->
<head>
    <!-- ... -->
    <link rel="dns-prefetch" href="http://example.org">
    <link rel="dns-prefetch" href="//google-analytics.com">
    <link rel="dns-prefetch" href="...">
</head>
<!-- ... -->
Solution #2

In addition to resolving the DNS names, preconnect sets up the network sockets to complete the TCP and TLS round-trips in advance:

<!-- ... -->
<head>
    <!-- ... -->
    <link rel="preconnect" href="http://example.org">
    <link rel="preconnect" href="//google-analytics.com">
    <link rel="preconnect" href="...">
</head>
<!-- ... -->
Solution #3

The prefetch option forces the browser to download the given resource (although browsers can ignore this petition):

<!-- ... -->
<head>
    <!-- ... -->
    <link rel="prefetch" href="http://example.org/image.png">
    <link rel="prefetch" href="https://fonts.googleapis.com/css?family=Open+Sans">
    <link rel="prefetch" href="...">
</head>
<!-- ... -->
Find more solutions about: , ,