๐Have you ever seen this rel attribute in link tags with the value of preload??๐ค๐ค
Wondering how it works and why is it used ??
Let me explain this concept in simple words in this thread ๐งต
Wondering how it works and why is it used ??
Let me explain this concept in simple words in this thread ๐งต
โก๏ธ How does it work?
=> Resources loaded via <link rel="preload"> are stored locally in the browser, and are effectively inert until theyโre referenced in the DOM, JavaScript, or CSS.
=> Resources loaded via <link rel="preload"> are stored locally in the browser, and are effectively inert until theyโre referenced in the DOM, JavaScript, or CSS.
=> The "as" attribute used in <link> element, is to give the browser more context about the destination of the preloading request being made.
=> This additional information ensures that the browser will set appropriate request headers and requests higher priority.
=> This additional information ensures that the browser will set appropriate request headers and requests higher priority.
โก๏ธ What is the benefit of pre-load?
=> The browser can set the right resource priority, hence will load accordingly, and will not delay more important resources, nor tag along behind less important resources.
=> The browser can set the right resource priority, hence will load accordingly, and will not delay more important resources, nor tag along behind less important resources.
=> The browser can make sure that the request is subject to the right Content-Security-Policy directives, and doesnโt go out to the server if it shouldnโt.
=> The browser can send the appropriate Accept headers based on the resource type. (e.g. advertise support for โimage/webpโ when fetching images)
=> The browser knows the resource type, thus determines if resource could be reused for future requests that need the same resource.
=> The browser knows the resource type, thus determines if resource could be reused for future requests that need the same resource.
=> Thus, ultimately it is helpful in improving website performance.
โก๏ธ Now the question arises, how will you know what should be preloaded?
Please find the thread below to know the answer๐๐๐
โก๏ธ Now the question arises, how will you know what should be preloaded?
Please find the thread below to know the answer๐๐๐
That's a wrap!!!!!๐
I hope you learned something new today ๐
Stay tuned and keep practicing๐
I hope you learned something new today ๐
Stay tuned and keep practicing๐
Thanks for reading this thread till the end ๐
๐ Bookmark this thread for the future
๐ Retweet the first tweet
๐ Follow @PriteshKiri for more daily web development tips and tricks
#codewithcoffee #codewithcoffeeindia
๐ Bookmark this thread for the future
๐ Retweet the first tweet
๐ Follow @PriteshKiri for more daily web development tips and tricks
#codewithcoffee #codewithcoffeeindia
Loading suggestions...