Preload tags causing troubles - warning in console + google cannot crawl page anymore

[seppegadeyne]

Describe the bug
The new feature from 0.28.9, the added preload tag is returning a warning in the console and breaks Google from crawling the website succesfully.

Logs
Warnings in console: https://bit.ly/30o5JG5
Google error loading files: https://bit.ly/2GnziAg
Console warnings google: https://bit.ly/36nHNWQ
Staging: Sapper 0.28.9: https://straffesites-nieuwbouwinspanje-r8ntu3td8.vercel.app/
Live: Sapper 0.28.8: https://nieuwbouwinspanje.com/

To Reproduce
Upgrade to Sapper 0.28.9.

Expected behavior
The client library is loading async those index bundles. Only preloading the client file should be enough; there should not be preload tags for those other files.

Information about your Sapper Installation:

System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Memory: 696.18 MB / 15.50 GB
Container: Yes
Shell: 5.0.17 - /bin/bash

Binaries:
Node: 10.19.0 - /usr/bin/node
npm: 6.14.8 - /usr/local/bin/npm

Browsers:
Chrome: dev

npmPackages:
rollup: ^2.3.5 => 2.28.2
sapper: 0.28.8 => 0.28.8 (working version --> 0.28.9 breaking)
svelte: ^3.25.0 => 3.29.0

• Browser:
  Google Chrome Version 87.0.4270.0 (Official Build) dev (64-bit)
  Firefox 82.0b5 (64-bits)

• Hosting environment:
  Vercel (exported)

Severity
It is severe, Google is not able to crawl the page succesfully.

[benmccann]

The issue here looks to be the crossorigin="use-credentials" that was added in #1539. You could test removing that to see if it fixes the issue

There should indeed be preload tags. By preloading assets relevant for the page we improve page speed. The reason the assets aren't used by the page appears to be because the crossorigin attribute is incorrect

I can't understand a lot of what's in the posted screenshots because they are in another language (Dutch?). I would be extremely surprised if this warning stopped Google from crawling the page. But I do think that the improvements for page speed are not taking affect and if we fix this issue it may give a slight boost to Google ranking due to improved page speed

[seppegadeyne]

Hi, that could indeed solve the issue. I found where to modify the source. This is for me the first time, how do I do this? Modify the file, in a fork and then I test, if all is working I still need to do a request or you guys take care of the rest?

I will also test Google crawling... Language of the screenshots is idd dutch. In the screenshot from Google live preview the styles where not loaded.

[benmccann]

Yep, modify in a fork, test, and then send a pull request if it works.

@riccardolardi suggested the crossorigin setting was necessary in #919 (comment). This isn't an area I've had a lot of time to dig into. I think we should understand why you guys seem to need different settings.

[riccardolardi]

@seppegadeyne I tested your provided staging URL and cannot reproduce the warnings you mention using MacOS Chrome Version 85.0.4183.121 (Official Build) (64-bit). Also my own page (riccardolardi.com, sapper export 0.28.9, also hosted on Vercel) is crawled just fine by Google (tested using Google Search Console). Did you already fix this?

[seppegadeyne]

@benmccann according to MDN documentation a crossorigin attribute in the preload tag is only needed for cross-origin recources and font files which need to have crossorigin or crossorigin="anonymous".

[seppegadeyne]

@riccardolardi your website is also returning those console warnings. Google Chrome Version 87.0.4270.0 (Official Build) dev (64-bit) and FireFox 82.0b5 (64-bits) on Ubuntu.

[seppegadeyne]

Found a solution rel="preload" is not suited for modules, so using rel="modulepreload" is working fine in this setup with the credentials attribute as it is. Have been testing it and I don't get any console warnings anymore.

Read more about it at Google's developers pages.

I'll try to do a pull request.

[riccardolardi]

@seppegadeyne nice! 👍 I have the fork still set up and ready to do do again a fixing pull request, just let me know

[benmccann]

Oh yeah. Absolutely it should be rel="modulepreload". I thought it was. I guess I missed that in the original code review. Thanks for debugging and finding

[seppegadeyne]

Thanks and you are welcome. It was exciting to contribute and do a pull request for the first time :-) - No idea if I did that pull request right...?

[riccardolardi]

I‘m sorry that was my bad using preload instead of modulepreload. Thanks @seppegadeyne for pointing out and the fixing PR

[benmccann]

Fixed in #1578. Thanks!

[Conduitry]

This should be fixed in 0.28.10.