How to compress and optimise an Angular2 application

Question

I want to make my angular-cli application faster!

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.

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:

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.

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.

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.

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:

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.

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"

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

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

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

9. 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!

OTHER GOOD ARTICLES

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

Solution 1

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.

Solution 2

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