Not getting the same Lighthouse score

fredguth commented 2 years ago

I just cloned, built and previewed.

But I am not getting the same lighthouse scores: https://share.getcloudapp.com/wbuQr0bx Lighthouse suggests the css is not minified-gziped.

Am I forgetting anything?

prototypa commented 2 years ago

Hello @fredguth

Give me some context:

How are you doing the Lighthouse tests?
1. Localhost on dev
2. Localhost after build
3. On some hosting (vercel, netlify, github pages, cloudflare) after build.

Among other things, it sounds like the subfont package isn't running, so it doesn't optimize fonts. It also strikes me that the pages are being sent uncompressed, perhaps I have relied too much on the hosting I use (Vercel)

fredguth commented 2 years ago

ii) Localhost after build.

astro build 
astro preview

then open localhost:3000 in a new incognito window and check Lighthouse score.

====== Based on your answer, I decided to deploy at Vercel to check if it would improve the score: https://dora-site.vercel.app/. It didn't: https://share.getcloudapp.com/v1uQlxDr

I haven't changed anything in the code.

prototypa commented 2 years ago

Hello @fredguth

I saw a problem: Fonts are not being optimized. I suggest you use the commands:

npm run build
npm run preview

The issue is that in the npm run build I made some changes so that subfont would be executed later, which is the package that optimizes the fonts:

{
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build && subfont -ir --no-fallbacks --silent --root dist",
    "preview": "astro preview"
  }
}

In the case of the SEO score 93 that you get in LightHouse, it is because an icon (github) in the Footer has the href attribute with an empty value. That was a bug I need to fix.

https://github.com/onwidget/astrowind/blob/main/src/components/widgets/Footer.astro#L227

Put a link or "#" and you will have a perfect score.

fredguth commented 2 years ago

SEO: Ok! 👍 In Production: Ok! 👍 (I guess Vercel gzips the assets)

It just don't work in preview. But this is a minor problem. I will close.

❯ npm run build

> @onwidget/astrowind@0.2.0 build
> astro build && subfont -ir --no-fallbacks --root dist

02:29:01 PM [build] output target: static
02:29:01 PM [build] Collecting build info...
02:29:01 PM [build] Completed in 21ms.
02:29:01 PM [build] Building static entrypoints...
02:29:02 PM [build] Completed in 1.42s.

 generating static routes 
▶ src/pages/index.astro
  └─ /index.html (+1.52s)
λ src/pages/rss.xml.js
  └─ /rss.xml (+4ms)
▶ src/pages/404.astro
  └─ /404.html (+4ms)
▶ src/pages/[...tags]/[tag]/[...page].astro
  ├─ /tag/astro/index.html (+16ms)
  ├─ /tag/tailwind-css/index.html (+32ms)
  ├─ /tag/theme/index.html (+40ms)
  ├─ /tag/front-end/index.html (+50ms)
  ├─ /tag/tools/index.html (+58ms)
  ├─ /tag/resources/index.html (+64ms)
  ├─ /tag/markdown/index.html (+71ms)
  └─ /tag/blog/index.html (+77ms)
▶ src/pages/[...categories]/[category]/[...page].astro
  └─ /category/tutorials/index.html (+7ms)
▶ src/pages/[...blog]/[slug].astro
  ├─ /get-started-website-with-astro-tailwind-css/index.html (+9ms)
  ├─ /how-to-customize-astrowind-to-your-brand/index.html (+15ms)
  ├─ /useful-resources-to-create-websites/index.html (+22ms)
  ├─ /astrowind-template-in-depth/index.html (+30ms)
  └─ /markdown-elements-demo-post/index.html (+35ms)
▶ src/pages/[...blog]/[...page].astro
  └─ /blog/index.html (+10ms)
Completed in 1.78s.

@astrojs/sitemap: `sitemap-index.xml` is created.

 optimizing 6 images 
02:29:07 PM [build] Waiting for the @astrojs/image integration...
Completed in 10.14s.

02:29:14 PM [build] 17 page(s) built in 13.37s
02:29:14 PM [build] Complete!
No input files specified, defaulting to file:///Users/fredguth/Code/Dora/site/dist/**/*.html
 ✔ 0.002 secs: logEvents
 ✔ 1.083 secs: loadAssets
 ✔ 2.302 secs: populate
 ✔ 0.047 secs: checkIncompatibleTypes
 ✔ 0.007 secs: applySourceMaps
 ✔ 0.025 secs: populate
 ✔ 0.098 secs: populate
 ℹ INFO: Missing glyph fallback detected.
         When your primary webfont doesn't contain the glyphs you use, browsers that don't support unicode-range will load your fallback fonts, which will be a potential waste of bandwidth.
         These glyphs are used on your site, but they don't exist in the font you applied to them:
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/astrowind-template-in-depth/index.html:46:3
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/blog/index.html:46:3
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/category/tutorials/index.html:46:3
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/get-started-website-with-astro-tailwind-css/index.html:46:3
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/how-to-customize-astrowind-to-your-brand/index.html:46:3
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/index.html:46:3
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/markdown-elements-demo-post/index.html:46:3
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/tag/astro/index.html:46:3
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/tag/blog/index.html:46:3
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/tag/front-end/index.html:46:3
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/tag/markdown/index.html:46:3
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/tag/resources/index.html:46:3
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/tag/tailwind-css/index.html:46:3
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/tag/theme/index.html:46:3
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/tag/tools/index.html:46:3
         - \u{1f680} (🚀) in font-family 'IBM Plex Sans' (700/normal) at dist/useful-resources-to-create-websites/index.html:46:3
 ✔ 0.008 secs: serializeSourceMaps
 ✔ 0.008 secs: writeAssetsToDisc
dist/404.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (26 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (23 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (12 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/astrowind-template-in-depth/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (29 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (53 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (22 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/blog/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (36 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (50 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (22 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/category/tutorials/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (29 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (48 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (22 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/get-started-website-with-astro-tailwind-css/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (30 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (55 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (22 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/how-to-customize-astrowind-to-your-brand/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (32 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (54 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (22 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (62 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (57 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (33 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/markdown-elements-demo-post/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (44 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (59 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (42 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/tag/astro/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (33 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (48 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (22 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/tag/blog/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (27 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (45 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (22 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/tag/front-end/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (29 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (49 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (22 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/tag/markdown/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (27 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (45 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (22 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/tag/resources/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (27 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (46 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (22 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/tag/tailwind-css/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (31 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (48 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (22 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/tag/theme/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (29 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (46 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (22 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/tag/tools/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (27 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (46 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (22 on this page), 170 kB (ttf) => 5.44 kB (woff2)
dist/useful-resources-to-create-websites/index.html: 1 font (3 variants) in use, 508 kB total. Created subsets: 23 kB total
  IBM Plex Sans:
    700 : 67/845 codepoints used (28 on this page), 169 kB (ttf) => 8.34 kB (woff2)
    400 : 72/845 codepoints used (55 on this page), 169 kB (ttf) => 9.22 kB (woff2)
    500 : 50/845 codepoints used (22 on this page), 170 kB (ttf) => 5.44 kB (woff2)
HTML/SVG/JS/CSS size increase: 31.8 kB
Total savings: 8.21 MB
Output written to file:///Users/fredguth/Code/Dora/site/dist/

As you can see, it is running subfont. But it in preview, the score is almost 100, but still 99: https://share.getcloudapp.com/RBuZ79lg

prototypa commented 2 years ago

Thanks @fredguth for bringing this to the table. I am going to review what alternatives exist to minimize and compress the pages with little cost and also evaluate if it is feasible or if it is better to leave that work to the hosting.

onwidget / astrowind

Not getting the same Lighthouse score #19