62

I want to make my angular-cli application faster!

enter image description here

Right, so I have spent a number of days updating my NG2 application to work with angular-cli. At first it was quite a frustrating experience, however, I am really seeing the light and enjoying the development process. Clearly, hard work and thought have been put into the framework.

But my application is slow:

According to Pingdom, my application is faster than 21% of all other sites on the internet. To be fair, this is an out of the box ng build and I am sure I can speed this up significantly.

Play Online Poker

My final question is: How to radically reduce the size of an angular website?

As it stands, my application, was taking 7 seconds to load (if you live in New York) so I am sure most people will have moved on before it has had a chance to load.

Clearly, I need to embark on a journey to radically increase the speed of the application but I need your help! (because I don't know what I am doing :)

What is standard practice and where do I even start sorting this out?

PROGRESS:

As suggestions are made I will update them here.

1. @cyrix Suggested production ready build: ng build -prod

The Zip file dropped by over a a meg and the new stats from Pingdom are quite an improvement from the original stats:

enter image description here

2. Suggested image size reduction.

Some of the images were a bit bigger than they should have been so these have been reduced in size. Not a major improvement, however, the stats have elevated the site into the top 73% of sites with a slightly faster load time.

enter image description here

3. @yurzui suggested gzip compression, so I have enabled this. Apparently, it is working and total file sizes have been reduced by over half (609 bytes) however, this is not showing on Pingdom. I note that the grade has somewhat improved, though.

I used this site to check compression and this site showed me how to do it since Cpanel seemed not to work when enabled from the administration. This site also appears to be a good gzip compression resource.

enter image description here

4 @Yuruzi suggested implementing a browser cache. So I did it!

What's really interesting is the performance grade improvement, that rocks! Load time a little faster and the site is now in the top 74%. As suggested by Yuruzi I used this post for guidance.

enter image description here

5 Thanks to @wafflej0ck on the #angularjs channel. Appears I needed to improve GZip which I have done by changing to "AddOutputFilterByType DEFLATE *" type of compression as outlined here.

This appears to have supercharged the site:

enter image description here

6 It was suggested to use AOT so I have taken a page out of this post.

I went through most of the documentation, however, I was getting a world of errors and decided to leave this for a later date, hopefully when AOT is a little more stable.

enter image description here

I read on GitHub that the Angular-Cli comes with AOT pre-intalled and the above article is not relevant. I am not sure how true this is however I am running the following command when compiling the code: ng build --prod --aot

7. Tweaked the mod_expires.c in the htaccess file.

Performance grade has improved significantly to 98%, Load time is now under a second and the site is faster than 91% of websites tested.

The file currently looks like this:

ExpiresActive On ExpiresDefault "access plus 2 days" ExpiresByType image/x-icon "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType application/javascript "access plus 1 week" ExpiresByType application/x-javascript "access plus 1 week" ExpiresByType text/javascript "access plus 1 week" ExpiresByType text/html "access plus 600 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds"

enter image description here

At this point in time I can't help but think that I am now dealing with diminishing returns.

  1. Removed Unwanted fonts and unused images that were inclided in the css.

Load time has dropped and the site performance is now at 100%

enter image description here

  1. Slow DNS and SSL

I noticed that a good deal of load time was due to DNS and SSL. To fix this I signed up with a free CloudFlare account since they have nodes pretty much everywhere, this was bound to speed a few things up...

And indeed it has. Sadly, the New York host from PingDom has been removed, but the stats from Dallas look quite promising dropping load time to well under a second!

enter image description here

OTHER GOOD ARTICLES

This guy has a good article on optimizing angular sites as well

Improve this question
11
  • Hi .. do you have minified it? .. css and js and html? Commented Mar 3, 2017 at 16:05
  • First of all you application is not running in production mode. You should also use things like UglifyJS, AoT and CSSNano (try to use ng build --prod) Commented Mar 3, 2017 at 16:06
  • I agree it is not production mode take.ms/c49Rh You can take a look at the documentation github.com/angular/angular-cli/blob/master/docs/documentation/… ng serve --prod will also make use of uglifying and tree-shaking functionality Since beta28 --aot defaults to true in --prod Commented Mar 3, 2017 at 16:07
  • Wow, just running with the --prod flag took 4 seconds off the load time. Page size has been reduced to 1.3MB... incredible. Commented Mar 3, 2017 at 16:15
  • Then try to enable gzip compression Commented Mar 3, 2017 at 16:16

2 Answers 2

Reset to default
7

There are some things that let you increase speed your app, among others:

  1. Use lazy loading of modules every where possible (link)
  2. build a project with the production profile
  3. Use Ahead of Time (AOT) compiling (link).
  4. Using Angular-Universal let you move part of rendering of project to server-side

As of 2019: Ahead of Time (AOT) compiling is enabled by default when the ng build --prod option is given.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Struggling somewhat with AOT. Tried the link you suggested however this eventually broke the app. A post on github suggested compiling the code with the --aot flag: ng build --prod --aot Whats your suggestion on this or insights? tx
4

For those interested in the HTACCESS file I am using, here it is. This does force https which slows things down by about 100ms:

#REDIRECT ROUTES TO INDEX (fixes broken routes with angular) RewriteEngine on RewriteCond %{HTTP:X-Forwarded-Proto} !https RewriteCond %{HTTPS} off RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE] RewriteCond %{REQUEST_FILENAME} -s [OR] RewriteCond %{REQUEST_FILENAME} -l [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^.*$ - [NC,L] RewriteRule ^(.*) /index.html [NC,L] #ENABLE GZIP COMPRESSION TO IMPROVE PERFORMANCE AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript # SET EXPIRE HEADERS TO IMPROVE PERFORMANCE <ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 2 days" ExpiresByType image/x-icon "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType application/javascript "access plus 2 week" ExpiresByType application/x-javascript "access plus 2 week" ExpiresByType text/javascript "access plus 2 week" ExpiresByType text/html "access plus 600 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule> # END Expire headers # BEGIN Cache-Control Headers <ifModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header set Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header set Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header set Cache-Control "public" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header set Cache-Control "private, must-revalidate" </filesMatch> </ifModule> # END Cache-Control Headers
Improve this answer

1 Comment

you can put this code in .htaccess file at root of project where index.html exists.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.