Review overall performances

[willdurand]

This blog is statically generated, hosted on s3 "website" with caching configured, and there is a nginx proxy in front, which has its own cache as well.

We don't have a lot of css and js, although some css is borrowed from addons-frontend and it isn't optimized.

I did some tests and there is no major issue on -dev/-stage. Once we have realistic content, we should do a quick perf audit to see if this project needs some tweaks.

@diox said we could look at the fonts. We can probably make sure we're using a fairly small font given that content is en-US only. Inter should provide such a font (latin?).

Optimizing the css coming from addons-frontend is already captured in a separate issue.

┆Issue is synchronized with this Jira Task

[diox]

We should be able to re-use our entire font logic from the frontend: use a subset + fallback with different unicode-range and proper ordering set, optionally preloading the subset if we feel displaying text as early as possible is worth it.

[diox]

Note: for the font strategy in particular, we would need to adjust the weights because of mozilla/addons#14160

[diox]

• https://www.webpagetest.org/result/210610_BiDcPA_c1f2e994e5d1085c7ebf14b1b4d4aa34/1/details/#waterfall_view_step1
• https://www.webpagetest.org/result/210610_BiDcZC_0cb9cb52e32afd2ebe59f786048c8676/2/details/#waterfall_view_step1

Main takeways:

• We are loading too many fonts and they are too big. As pointed out above we should re-use a similar strategy we used on the frontend.
• We should preconnect to https://mozamo.wpengine.com/ or, even better, find a way for it to be served by our CDN under an existing AMO CDN domain (leveraging HTTP/2)
• We should ensure user uploaded images are optimized

[willdurand]

Thanks!

We are loading too many fonts and they are too big. As pointed out above we should re-use a similar strategy we used on the frontend.

Could you help with that? The blog is en-US only so I suppose we could have a very optimized font? Should we recreate one for the blog or simply reuse the one we have on addons-frontend? Could you help here?

We should preconnect to mozamo.wpengine.com

With a link tag or a header?

or, even better, find a way for it to be served by our CDN under an existing AMO CDN domain (leveraging HTTP/2)

We could, potentially, but that will depend on the long-term strategy I believe.

One idea I had was to crawl the content we fetch on WP, download the assets, rewrite the URLs (we do this already for some) at build time, so that we can push everything to S3. OTOH that's a recipe for disaster so maybe we can come up with something else.

We should ensure user uploaded images are optimized

I thought WP would do it to be honest. If not, I think we'll have to tell Editorial about it.

[willdurand]

Could you help with that? The blog is en-US only so I suppose we could have a very optimized font? Should we recreate one for the blog or simply reuse the one we have on addons-frontend? Could you help here?

Fonts have been updated to fix #245, so we're good here now.

The two remaining items are:

1. preconnect to wpengine
2. optimize user-uploaded images

[willdurand]

preconnect to wpengine

If we implement mozilla/addons#9562, we won't need this.