Webapp: Pagespeed improvements - Githubissues

desec-io / desec-stack

Backbone of the deSEC Free Secure DNS Hosting Service

https://desec.io/

MIT License

393 stars 50 forks source link

Webapp: Pagespeed improvements #631

Closed Rotzbua closed 2 years ago

Rotzbua commented 2 years ago

The pagespeed of the webpage (webapp) could be improved.

Problem

Currently the reported First Contentful Paint for mobile devices is 10.2 s which is very high.

https://pagespeed.web.dev/report?url=https%3A%2F%2Fdesec.io%2F&form_factor=mobile

Suggestions by report

Eliminate render-blocking resources
Enable text compression
Reduce unused CSS
Ensure text remains visible during webfont load

Comments and possible solutions

Eliminate render-blocking resources:

enabling text compression also solves this problem
no explicit solution recommendable

Enable text compression:

can be enabled in the nginx config
current nginx supports gzip and brotli (better gzip for modern browsers)
just for for static content, not for API because of security problem BREACH
biggest impact: halves the loading time

Reduce unused CSS:

~90kb by PR #630

Ensure text remains visible during webfont load:

no action required, because for font can not be improved
for font roboto improvement was done in #626

Current pagespeed reports

grafik grafik

peterthomassen commented 2 years ago

We made a few improvements, in particular adding compression for all static files (unfortunately, the previous deployment only had it enabled for text/html due to nginx config defaults), better webpack chunking, and also client-side caching (doesn't matter on first visit). Metrics from above (which I could reproduce now are):

We have not deployed #630 yet because I'm still torn between whether a tiny wait is a good trade-off for font flickering. So far for the moment.