Improving PageSpeed (and SEO?)

[lightyearsaway]

Google's PageSpeed Insights gives DofusLab a pretty shitty score ranging from 18-25/100. The initial load of the page could definitely be optimized, but right now I'm not sure about the ways we can do that. Some notes:

• This is the output of next build; improving the bundle size would surely improve load times. (Run with export ANALYZE=true to see what parts of code take up a lot of space.

  
  Page                                                                     Size     First Load
  ┌ λ /                                                                    27.9 kB      487 kB
  ├   /_app                                                                19.6 kB      229 kB
  ├ λ /_error                                                              1.37 kB      231 kB
  ├ λ /build/[customSetId]/[equippedItemId]                                2.65 kB      437 kB
  ├ λ /equip/[itemSlotId]                                                  2.98 kB      445 kB
  ├ λ /my-builds                                                           617 B        403 kB
  ├ λ /reset-password                                                      3.5 kB       435 kB
  └ λ /verify-email                                                        1.73 kB      433 kB

• shared by all 229 kB ├ static/pages/_app.js 19.6 kB ├ chunks/c2088ceef3a0fa739432d3a0e8692ff43f8ce835.6223c5.js 124 kB ├ chunks/c2088ceef3a0fa739432d3a0e8692ff43f8ce835_CSS.37da1e.js 64 B ├ chunks/commons.443d33.js 18.8 kB ├ chunks/framework.324ed2.js 45.7 kB ├ chunks/styles.1ea930.js 113 B ├ runtime/main.d2c685.js 5.37 kB ├ runtime/webpack.4b444d.js 746 B ├ css/c2088ceef3a0fa739432d3a0e8692ff43f8ce835_CSS.2035e774.chunk.css 4.91 kB └ css/styles.f2adc4a1.chunk.css 9.81 kB

• Google PageSpeed suggests switching our PNGs we use for items to "next-gen" formats, such as JPEG 2000, JPEG XR, and WebP. We're also probably loading larger images than we need.
• We are using @artsy/fresnel to render both mobile and desktop versions on the server; I'm not sure about the performance implications here.

Also, DofusLab does not even show up on the first page of Google results (the first result for me is our reddit post, the third is this repo, and the sixth is our now-deleted JOL ad that lasted less than a few hours). Could our poor PageSpeed rating be part of the reason?

[blueocto]

Hey @lightyearsaway - yes page speed is considered one of the main ranking factors now for SEO. However, if you're serving your website using something like React, I've heard they fall over on SEO because there is no HTML there when crawled? Running Google Lighthouse audit, gives you perhaps some ideas where to improve (See screenshots)

[blueocto]

I'd be happy to help improve this, if I can find the time to setup your whole project on my machine (^_^メ)

[lightyearsaway]

However, if you're serving your website using something like React, I've heard they fall over on SEO because there is no HTML there when crawled?

We're using Next.js, so all of the content is rendered on the server first and then served as HTML, so I don't think that would be the issue. I recently setup a Google Search Console account to try to learn more about this. Any help would be greatly appreciated 😃

[blueocto]

Cant say I know enough about Next.js to help on that aspect, although this article seem's to go into detail about GSC here

Perhaps running lighthouse as an npm package or cli tool, might help capture those Performance outputs.