{"id":326,"date":"2020-10-03T17:27:00","date_gmt":"2020-10-03T17:27:00","guid":{"rendered":"https:\/\/webfives.com\/?p=326"},"modified":"2020-12-30T18:04:52","modified_gmt":"2020-12-30T18:04:52","slug":"what-is-the-fastest-way-to-make-my-angularjs-website-load-under-a-second","status":"publish","type":"post","link":"https:\/\/webfives.com\/what-is-the-fastest-way-to-make-my-angularjs-website-load-under-a-second\/","title":{"rendered":"What is the fastest way to make my AngularJS website load under a second?"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"\/uploads\/2018\/02\/AngularJS_logo.svg.png\" alt=\"AngularJS\"\/><figcaption>AngularJS &#8211; More than 25% of websites were built on AngularJS in 2017.<\/figcaption><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Speed and ranking higher on Google are the core problems faced by all AngularJS websites.<\/p><\/blockquote>\n\n\n\n<p>SPAs are inherently slow, average page size being 2MB+ taking anywhere between 2.5 seconds to 3.5 seconds to load the page.&nbsp; In addition, only recently Google started indexing AngularJS pages, before that, it was all about using funky <code>redirect rules in .htaccess<\/code>.&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Headless Chrome in Google is best alternative for stop-gap solutions such as PhantomJS, PreRender, BrowserStack and more.<\/p><\/blockquote>\n\n\n\n<p>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.<\/p>\n\n\n\n<ul><li>Ability to generate screenshots and thereby do a quick glance on various user-agents, devices and orientations. Bye bye BrowserStack&nbsp;\ud83d\udc4b.<\/li><li>Ability to generate PDFs makes it possible to build reports. Bye bye PhantomJS and PdfMake&nbsp;\ud83d\udc4b<\/li><li>And here&#8217;s the best part of it: Ability to dump DOMs, the heart&nbsp;\u2764\ufe0f of every HTML page.&nbsp;<\/li><\/ul>\n\n\n\n<p>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 <code>.htaccess<\/code>&nbsp;files.<\/p>\n\n\n\n<p>Make sure you have the latest Chrome browser. Use an alias on Chrome, it&#8217;s easy to type commands<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">alias chrome=\"\/Applications\/Google\\ Chrome.app\/Contents\/MacOS\/Google\\ Chrome\"<\/pre>\n\n\n\n<p>Now let us print the DOM for the page we want to render and save it to a file<\/p>\n\n\n\n<p>The&nbsp;<code>--dump-dom<\/code>&nbsp;flag prints&nbsp;<code>document.body.innerHTML<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>chrome --headless --disable-gpu --dump-dom http:\/\/localhost:8080 &gt; homepage.static.html<\/code><\/pre>\n\n\n\n<p>Replace localhost:8080 with your website URL. &nbsp; That&#8217;s it. The HTML page has now been generated, and now lets serve that page..&nbsp; Assuming you are using <code>Apache<\/code>&nbsp;for serving the pages, add the following line to <code>.htaccess<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DirectoryIndex homepage.static.html<\/code><\/pre>\n\n\n\n<p>That&#8217;s it, easy peasy, your homepage no longer needs to load the entire AngularJS framework and should be zippy fast! &nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>Do you have an AngularJS website that you want to load under a second?<\/strong><\/p><\/blockquote>\n\n\n\n<p><a href=\"http:\/\/contact-us\" title=\"contact-us\">Click here to contact us and get your website load under a second within 2-days!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&hellip;&nbsp;<a href=\"https:\/\/webfives.com\/what-is-the-fastest-way-to-make-my-angularjs-website-load-under-a-second\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">What is the fastest way to make my AngularJS website load under a second?<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_ti_tpc_template_sync":false,"_ti_tpc_template_id":""},"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/webfives.com\/wp-json\/wp\/v2\/posts\/326"}],"collection":[{"href":"https:\/\/webfives.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webfives.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webfives.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webfives.com\/wp-json\/wp\/v2\/comments?post=326"}],"version-history":[{"count":0,"href":"https:\/\/webfives.com\/wp-json\/wp\/v2\/posts\/326\/revisions"}],"wp:attachment":[{"href":"https:\/\/webfives.com\/wp-json\/wp\/v2\/media?parent=326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webfives.com\/wp-json\/wp\/v2\/categories?post=326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webfives.com\/wp-json\/wp\/v2\/tags?post=326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}