https://i.stack.imgur.com/Rq9Y2.jpg We have recently developed a cutting-edge application using Angular 6, hosted on an Apache 2.4 server.
To ensure our website is properly crawled by search engines, we set up a local "prerender" instance. Initially, we tried Angular Universal but faced compatibility issues with libraries, prompting us to switch to the prerender solution.
After implementing Google Analytics tracking code and collecting data for a few days, we decided to run the Google PageSpeed Insights tool.
Our PageSpeed Insights score revealed:
https://i.stack.imgur.com/s0qDI.png https://i.stack.imgur.com/cZuvz.png
The Optimization Suggestions provided by PageSpeed Insights are as follows:
- Reduce server response time: Google indicates that the page takes approximately 3 seconds to load, with most of the delay attributed to prerendering. Caching the prerendered page seems like a straightforward solution, but we welcome any additional recommendations.
- Enable compression: Google notes that style files (*.css) are not compressed. How can we activate compression? Perhaps a filter on Apache could help, but we are open to suggestions on configuring this effectively.
- Eliminate render-blocking JavaScript and CSS in above-the-fold content: The report highlights that certain .css and font resources cause rendering delays. Improving this aspect is challenging – do you have any insights?
- Leverage browser caching: According to the report, image files (.png, .svg, etc.) are cacheable but lack expiration dates. Introducing a filter on Apache may resolve this issue, but we worry about potential challenges when releasing new versions of our Angular application. Any advice on configuring this optimally?
We also analyzed site speed using , yielding the following result:
https://i.stack.imgur.com/NNd25.png The recommended optimizations include:
- Specify a Vary: Accept-Encoding header: Configuring Apache to incorporate the Header Vary: Accept-Encoding in responses should address this recommendation. Are there potential drawbacks associated with this header, particularly during new Angular application releases?
- Combine external JavaScript: While some JavaScript files pertain to external tracking tools, three scripts (main.xxx.js, polyfills.xxx.js, runtime.xxx.js) originate from our Angular application. How can we consolidate these into a single file?