Best practice for CSS links (RelPermalink, Permalink, or either)?

support
,
1

I ran into Getting Lighthouse 404 for CSS file that does exist in deploy preview - Support - Netlify Support Forums because I was using .Permalink for accessing CSS files in the head of my pages. I did that because I thought that was considered best practice.

Is that in fact the case (in which case I should file a bug / feature enhancement on the Netlify Lighthouse plugin to support the best practice), or is using .RelPermalink perfectly fine, and not a potentially problematic workround for the plugin issue?

The repo in question is: danielfdickinson/image-handling-mod-hugo-dfd: A Hugo module for handling images and image-related functionality for themes (github.com)

but I experience the same issue with other repos as well.

2

Either.

I only render absolute URLs for:

  • Data to be consumed by external services (sitemap, rss, meta elements, structured data)
  • Canonical and alternate URLs in head
1 Like
3

If I am not mistaken then .RelPermalink would be /path/to/the/page.html and .Permalink would be https://mydomain/path/to/the/page.html.

Pro .RelPermalink: out of “laziness”, let’s assume the website needs a cheap and quick move to another domain (customer forgot to pay for domain extension, or there are multiple (spam, bah) domains with the same content). You copy the public folder and are done. No need to deploy once per domain name (basehref would be / too).

My opinion: There is no “best practice” for this kind of stuff, just preference.

I would always use a relative permalink for elements that are on the same site (styles, images, etc.). I am not sure if that is easier on the browser or harder. In any case, it would be nanoseconds to calculate the proper URL.

Lastly: / is much shorter than https://myfancydomainname.com/ and might save some kB. Less page size, faster loading. Think of 100 images per page :wink: - the total sums up.

Also, again: That public folder you create with .RelPermalinks is probably running locally by just dropping the index.html into the browser.

1 Like
4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.