Pak Jiddat - Innovative Software Services

Read: In the name of thy Lord Who createth, Createth man from a clot. Read: And thy Lord is the Most Bounteous, Who teacheth by the pen, Teacheth man that which he knew not. Nay, but verily man is rebellious That he thinketh himself independent!. Lo! unto thy Lord is the return. (Sura Alalaq 96:8)

Using Prefetch, Preload and Preconnect for speeding page load times

Created On: 19 Feb, 2018: 15:58:35 - Tags : html5 | css3 | javascript


Prefetch, Preload and Preconnect are mechanisms supported by modern web browsers that allow efficient loading of web resources.

Preload allows controlling how resources such as images, CSS and JavaScript files are loaded on the current page. For each resource that we want to preload, we have to use a link tag with rel="preload" attribute. The following examples show how to preload resources:

<!-- allows preloading an image -->
<link rel="preload" href="image.png">
<!-- allows preloading a font file -->
<link rel="preload" href="" as="font" crossorigin>
<!-- allows preloading css -->
<link rel="preload" href="" as="style">

The main benefit of the preload directive is that it allows important resources to be loaded earlier. For example if there is a stylesheet or image that is required for a page to display properly, then it can be preloaded by adding the relevant link tags in the head section of the document

Prefetch is similar to preload but allows efficient loading of resources that are likely to be accessed by the user, such as a next or previous link. A drawback of prefetch is that it can cause certain page metrics such as ad statistics, visitor count etc to be miscalculated. For example Google Chrome has been known to miscalculate web analytics stats. There are three types of prefetch directives:

  1. link-prefetch. It allows a link to be fetched in advance before it has been clicked by the user. The contents of the link are saved to the browser cache
  2. dns-prefetch. It allows the host name of the resource to be resolved in advance. It eliminates the dns resolution step when the resource is requested by the user
  3. pre-render. It allows a resource to be fetched and processed before being requested by the user. For example a link marked with the directive rel="prerender" will be fetched and processed by the browser. It should be used with caution as it can consume resources on mobile devices

preconnect. The preconnect directive allows establishing tcp connections for a resource before it is actually requested. For example tls negotiations, tcp handshake and dns resolutions.

Related Articles

  1. Adding event listeners using JavaScript
  2. Get current unix timestamp using Javascript
  3. Fetching html elements using CSS selectors with Javascript
  4. Fetching html elements using CSS class names
  5. Fetching parent node element of a HTML node
  6. Adding option to html selectbox using Javascript
  7. Changing CSS styles using Javascript
  8. Allowing Cross Origin Requests using htaccess
  9. NodeJs permission denied error
  10. Customizing Redmine layout
  11. Passing parameters to Jquery event handler function
  12. W3C.Data
  13. Making cross domain Ajax calls using JSONP
  14. Use of Preflight request in HTTP Cross Origin Resourse Sharing (CORS)
  15. Using cookies in Javascript
  16. Javascript JSON guide
  17. Convert javascript object to json string
  18. Javascript date object
  19. Get the time using JavaScript
  20. Using keydown event handler for detecting enter key press
  21. Get co-ordinates of element relative to document using Jquery
  22. Using clearTimeout and onmouseenter, onemouseleave events
  23. Replacing a string using Javascript replace function
  24. Base64 Encoding of utf-8 encoded string using Javascript
  25. Setting CSS styles using JQuery
  26. Replacing html element using replaceWith jquery function
  27. Iterate throught Javascript object properties
  28. Select contents on text field
  29. Adding drag and drop to list items
  30. W3C.CSS
  31. Html5 Validator error for article and section tags
  32. Making webpages work offline
  33. HTML5 basics
  34. Using ems instead of Pixels for Typography
  35. Responsive web design with html5 and css3
  36. CSS :hover Selector
  37. CSS Border Images
  38. Setting CSS style priority
  39. CSS 3 Tips and Tricks
  40. CSS 3 Basics
  41. What are CSS Grid Systems
  42. Using Fluid Images
  43. What is the difference between viewports and device width
  44. What are CSS Media Queries
  45. What is meant by Fluid layout
  46. What is the main benefit of CSS
  47. What is responsive design
  48. An important rule of Responsive Design - Placing content first
  49. Explains how to use CSS rules specific to Firefox
  50. Free font for Urdu language