Default page-load performance is not great (it's not bad, but we want to be great!)

[NullVoxPopuli]

So, I have a number of posts on my home page, all with images,

and I'm using the latest version of everything (except ember / ember-data 3.28, because of the content issue) -- so if I have images below the fold, they shouldn't load. 🎉

But, on a page-speed-insights run:
Mobile:

Desktop:

Some notes about improvements it suggests:

• Desktop

  • Properly Size Images (costs 1.8s) -- it seems that it's loading all images at their original sizes, which I thought <ResponsiveImage /> was supposed to handle. I've opened an issue about image optimization (and LQIP) here: Can't configure low-quality-image-placeholder / lqip? #135
  • [RESOLVED] (keeping for posterity -- I've updated all my screenshots / perf remarks) Apparently my JS isn't minified? 🙃 I haven't disabled minification or anything in my ember-cli-build, visible here. So that's goofy. The build command uses the production env config. But oh my! this is on me, here:
    . So... let's see what fixing that does...
    • I've accidentally run in to this a few times -- and I know this is entirely my fault -- but, since this can happen to anyone, especially as they my hop around different static hosting providers, what are your thoughts on having a development-only footer or some sort of obvious indicator that a site has not been built with optimal settings?
  • Reduce unused JavaScript (costs 0.24s) -- I think the only way we can do better here is if switch to embroider and move the entire empress ecosystem to maximum static / embroider-optimized way of doing things -- thoughts on that? I've no idea how big of an effort that would be. I suppose I can try first with my site. :D

• Mobile

  • Same two as above, but bigger impact

  Something else that's sus:

Normally when I see a blank image here, I reach for the app-shell pattern (which I understand that fastboot / prember are a version of ~ ish), such as on https://emberclear.io and https://limber.glimdown.com -- maybe this is caused by blocking js/css. idk.
Page Speed Insights on emberclear as well as on Limber -- but this seems to vary from test to test -- So maybe the take away here is that we can either eeek out < 0.2s speed improvement by finding and eliminated render-blocking resources (such as css), or it's so fast it doesn't matter 🤔

Things I'm going to try (because I can try them wholly within my app):

• eliminate: gtag, because it's 41kb
• try out embroider + maximum strictness

[gnclmorais]

@NullVoxPopuli, maybe your blog would benefit from <img loading=lazy>!

[NullVoxPopuli]

probably!