AngularJS is one of the worlds most popular web frameworks. Started in 2010, the framework first introduced by Google has gone through many incarnations, each better than the previous one.
Based off the principle of Single Page Applications (SPAs), AngularJS has been a boon to developers, engineers and consumers alike. It allows rapid releases, has thousands of pre-built modules and more than 8% of websites run AngularJS.
Speed and ranking higher on Google are the core problems faced by all AngularJS websites.
SPAs are inherently slow, average page size being 2MB+ taking anywhere between 2.5 seconds to 3.5 seconds to load the page. In addition, only recently Google started indexing AngularJS pages, before that, it was all about using funky redirect rules in .htaccess.
Headless Chrome in Google is best alternative for stop-gap solutions such as PhantomJS, PreRender, BrowserStack and more.
All that is changing now. Google introduced the support for Headless Chrome in April 2017. The headless mode offers following benefits to developers and SEO marketers alike.
- Ability to generate screenshots and thereby do a quick glance on various user-agents, devices and orientations. Bye bye BrowserStack 👋.
- Ability to generate PDFs makes it possible to build reports. Bye bye PhantomJS and PdfMake 👋
- And here’s the best part of it: Ability to dump DOMs, the heart ❤️ of every HTML page.
Given below is a quick tutorial on how to generate HTML pages for your website. Once the pages are done, we will walk you through the process of adding redirect rules to .htaccess files.
Make sure you have the latest Chrome browser. Use an alias on Chrome, it’s easy to type commands
alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
Now let us print the DOM for the page we want to render and save it to a file
The --dump-dom flag prints document.body.innerHTML:
chrome --headless --disable-gpu --dump-dom http://localhost:8080 > homepage.static.htmlReplace localhost:8080 with your website URL. That’s it. The HTML page has now been generated, and now lets serve that page.. Assuming you are using Apache for serving the pages, add the following line to .htaccess
DirectoryIndex homepage.static.htmlThat’s it, easy peasy, your homepage no longer needs to load the entire AngularJS framework and should be zippy fast!
Do you have an AngularJS website that you want to load under a second?
Click here to contact us and get your website load under a second within 2-days!
