How to speed up your AngularJS website to load under a second.
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
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
--dump-dom flag prints
chrome --headless --disable-gpu --dump-dom http://localhost:8080 > homepage.static.html