There were three pages with almost similar structure, a common navigation bar, a common right widget and a common footer (all summing upto 90% content of the page), with only few different descriptive lines(only 10% of the total content on the page) . The general requirements of the pages were:
-
All of them had to be assigned to different urls , title and meta tags
-
The pages had to be bookmarkable and their urls could be shared.
This may sound very simple, but…
The challenge was
Just 10% of the content is different and rest 90% is same. So creating three different pages was not a solution for us, because loading whole content again just for 10% of change is a very un-optimized way of doing it. This is the scenario where one wants to take benefit of our friend called AJAX.
Using Ajax we could:
-
Load only the required data (just 10% and avoid reloading 90% of the redundant data).
-
Comparatively much faster content loading.
-
Enhanced user experience.
-
Eliminate page reloads on switching between pages.
But there are certain issues with it:
-
Search engines are unable to crawl the content loaded through AJAX.
-
As the page address does not change, we cannot bookmark the AJAX-enabled pages.
-
The browser’s back button will not function as desired. It can never go back to content shown before the ajax call.
Here comes the big question…
Is there a way to keep the pages SEO compatible, bookmarkable, shareable and also enjoy the benefits of AJAX?
We wanted it to be done in a best possible way and finally our research drove us towards a solution called window.history.pushState()
It is a HTML5 history API used to manipulate browser’s history. It provides a way to make entries (states) to browser’s history and when user clicks the back button, it triggers the event to go to previous state in the browser history stack.
So in our case let’s see how it actually worked:
-
On clicking the links through which we had to navigate to the other page, we applied pushstate.
-
And with that we pushed urls into the browser history stack and also changed url in the address bar without actually refreshing the page. No url redirection.
-
The 10% content which was different on both the pages was fetched from the server through an ajax call.
-
Title tags were also changed accordingly.
It prevented us from reloading the whole page along with all its resources again for just few different lines. Hence, time taken in navigating from one page to another lowered down significantly. Around 60-70% faster than reloading the whole page.
And how can we forget about SEO! The other important benefit was, our pages are still SEO compatible.
Since, the url of the new page is actually shown in the address bar, it can be copied/pasted, shared and bookmarked.
Live demo can be seen on following urls:
Implementing Push State
-
The two important parts of the History API are the history.pushState function and the popstate event
-
PushState is to update the history and address bar in order to simulate moving to a new page
-
And if the user subsequently clicks the back button it will fire a popstate so you can simulate moving back again
The basic syntax for history.pushState is :
history.pushState({id:‘SOME ID’}, ”, ‘pageurl.html’);
The three parameters used in syntax are explained below:
-
The first is an object used as state to be associated with that particular history entry.
-
The second parameter is for the ‘title’ of the page, but is not currently implemented in any browser so can be left blank
-
The final parameter is the URL to be shown in the address bar.
-
Code Example:$(function() {$(“a”).click(function() {history.pushState({}, ”, $(this).attr(“href”));return false;});});
Browser Support:
-
Firefox, chrome, safari , Internet Explorer 10 and above.
The All-New Naukri iOS App (6.0)
One important point to note:-
Browser’s history length has limit of 50, so once history length reaches 50 then the push state functionality stops working according to expectations.
Solution:-
Test your functionality in another tab or restart your browser.
Length property for Internet Explorer and Opera starts at 0, while Firefox, Chrome, and Safari it starts at 1.