1

I'm using angular 2 CLI to build my project and it seem compressed, but when I test my webpage with https://developers.google.com/speed/pagespeed/insights I get score of 43/100 because I need to "turn compression active". I did included the following to my .htaccess:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

But I keep getting the "Enable compression" error in the pagespeed insight.

Compressing main.md5.bundle.js could save 1.2MiB (78% reduction).
Compressing could save 19.9KiB (82% reduction).

Also I need to:

Remove render-blocking JavaScript:

inline.js
/styles.md5.bundle.js
main.md5.bundle.js

Any ideas if this is an issue for all Angular 2 users or if there is a way to fix it?

TheUnreal
  • 23,434
  • 46
  • 157
  • 277
  • try these: use async pipes to load JS files.render css from root component by creating style element & inserting it in head. – Manish Sep 25 '16 at 17:29
  • Can you be more descriptibe on the CSS recommendation? Couldn't understand what did you mean by "render css from root component" – TheUnreal Sep 26 '16 at 12:18

2 Answers2

1

If you're using the CLI, you should be able to serve up the gzipped version using ng build with the prod flag (depending on how you serve it, you may need to update your node server or set compression active if you're using a CDN)

ng build --prod --aot
Vijay
  • 209
  • 4
  • 18
  • BTW, you should also be able to leverage AOT to get the file size down by adding the --aot flag (you may run into some errors...I certainly did with my reducers in the ngrx/ redux pattern implementation) – Vijay Feb 16 '17 at 00:40
  • Note in Angular 4 you don't need to add the --aot flag – Vijay Jun 20 '17 at 06:16
0

It's just a thought but i think it would work. break your css in to parts 1.) One contains minimal css required to render the loader/first render. 2.) Keep all other css here. now you can generate it dynamically 

  ngOnInit(){
    let link = document.createElement('link'),
        head = document.getElementsByTagName('head')[0];
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = "assets/css/style.css";
    head.appendChild(link);
  }

**or load asynchronously (http://keithclark.co.uk/articles/loading-css-without-blocking-render/)**
Manish
  • 2,092
  • 16
  • 18
  • About about the compression message? My main.js is minified and sizes 1.6MB, the pagespeed insight says "enable compression" while it's already enabled.. – TheUnreal Sep 26 '16 at 14:56
  • not sure about that,Probably your JS file is not minified properly. refer this link: http://stackoverflow.com/questions/21937190/why-is-google-pagespeed-insights-telling-me-to-minify-javascript-css-using-ra – Manish Sep 26 '16 at 16:09