The article recommends 4 simple tips to load your webpage in faster manner based on Google Pre-* technology recommendations. These tips are based on suggestions by Google Engineer, Ilya Grigorik in his presentation that could be found on this page. Do note that most of these (such as pre-fetch, pre-resolve etc) are also part of their PageSpeed initiative.
While I was reading the presentation, it struck me as to check out on who is leading the internet browser share in the market. Following is the plot I could come up with data based on browser usage statistics. And, the winner is Google Chrome. Thus, I found it relevant enough to check out the recommendations and consider optimizing the webpages to load efficiently in Chrome and other browsers.
fig: Browsers Usage Statistics as on January 2014 (courtesy: w3schools)
Lets quickly understand how Google Chrome works?
Following diagram represents what goes on inside when we try and access a website from Chrome browser:
From above, it could be figured out that Chrome tries and performs 4 activities while it loads the webpage:
- Pre-resolve: Pre-resolve is all about reducing DNS lookup time by pre-resolving at the browser.
- Pre-connect
- Pre-fetch: Simple speaking, prefetching is loading a file before its needed. It’s fairly common on interactive sites for a user action to download additional data, such as feeds or images. If it’s possible to predict the next user action, then it may be possible to start the downloads before the user input is made. This is where prefetching helps a great deal.
- Pre-render
As in Chrome browsers, you must have noticed that while you are typing the search keywords, the search result page gets loaded. How does this happen?
What happens in the background is that browser pre-resolves the dns names, pre-connect and pre-renders the page.
What should developers do to enhance the web page loading speed further (especially in Chrome)?
Given the fact that Chrome is already optimized to load webpages in a faster manner, if only, developers do the following, it would only help Chrome (in form of hints) to take appropriate action and load the page faster. Following code snippets need to be included within <head></head> tag that would act as hints to the browsers.
- <link rel=”dns-prefetch” href=”Hostname to resolve”/>
- Pre-resolve: As defined above as part of pre-resolve, it makes it easier for browser to do dns-prefetch and resolve the names early enough. This feature is supported by most browsers in their latest versions. Check this page on pre-resolve to understand the concept in a better manner with some code samples.
- <link rel=”subresource” href=”URL to resources for current page”/>
- This helps the browser to start downloading important resources such as CSS, JS and images early. This feature is supported by just the Google Chrome. Check this page on flushing resources early to understand the concept in a better manner with some code samples.
- <link rel=”prefetch” href=”URL for assets such as image etc”/>
- Pre-fetch: It helps prefetch resources such as images/css and places the same in cache for later navigation. This technology is used not only for web apps but also for mobile apps. Recent Gmail app enhancement for iOS7 makes use of pre-fetch technology. Web apps such as Google Picassa, Google Instant Pages also make use of pre-fetch technology as the users behavior could be predicted in advance based on the navigation pattern. This feature is supported by most browsers in their latest versions. Check this page on pre-fetching to understand the concepts in a better manner with some code samples.
- <link rel=”prerender” href=”URL for next page”/>
- Pre-render: Pre-render (download) the next page (including all the assets) in background for future navigation. Consider the search patterns (this could be a vague example). Once you have search for some keywords in any search engine, it results the search result using page numbers. The common behavior for user is to access the next page if he is unable to find his data on first page. Thus, next page could be a candidate for prerender. This would result in downloading the next page and putting it in cache. Another example could be checkout page. Do make a note that pre-render feature should be used with lot of care as it is very resource heavy and could lead to band-width hogging and thus, end users’ frustration. As user goes to next page, he sees the loading of page with lightening speed. This feature is supported by most browsers in their latest versions.
[adsenseyu1]
I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on
Linkedin.
Check out my latest book titled as
First Principles Thinking: Building winning products using first principles thinking.
Latest posts by Ajitesh Kumar
(see all) Ajitesh KumarI have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.
