Search code examples
cssseoservice-workergoogle-search

CSS missing in the eyes of Google

When I load the website in a browser, it shows up correctly. However, when testing it with search.google.com it shows up without style sheets (and thereby not passing the test to be suitable for mobile devices). I assume it is because of the service worker I am using. However, I don't know that the problem is with it?

Below is the full code of the service worker in place:

const
    _           = {
        domain: 'https://matchflix.ch/',
        name: 'matchflix'
    },
    cachable    = [_.domain, 'https://fonts.googleapis.com/', 'https://ajax.googleapis.com/'],
    log         = 'ServiceWorker 1.1'
;

self.addEventListener('fetch', event => {
    if(event.request.method !== 'GET')
        return;

    if(!event.request.referrer.startsWith(_.domain))
        return;

    if(!cachable.some(url => event.request.url.startsWith(url)))
        return;

    function versionedURL(request){
        switch(request.destination){
            case 'image':
            case 'script':
            case 'style':
                let
                    version = self.serviceWorker.scriptURL.split('?')[1]
                ;
                return new Request(request.url + '?' + version);

            
            default:
                return request;
        }
    }

    let
        internal = event.request.url.startsWith(_.domain),
        request =  internal ? versionedURL(event.request) : event.request
    ;
    event.respondWith(caches.open(_.name)
        .then(cache => fetch(request)
            .then(response => {
                console.debug(log, 'Caching', internal, response, request);

                if(internal)
                    cache.put(request, response.clone());
                
                return response;
            })
            .catch(() => cache.match(request))
        )
    );
});

This is how the website looks in the eyes of Google:

enter image description here

What I tried so far

  1. Commenting out the registration of the service worker, did not change anything unfortunately.
  2. On search.google.com I saw under more information that there was an unknown error loading the script and style sheets. Unfortunately, no further information was given.
Solution

  • Your site is too slow. The entire page, including all assets needs to load within about 5 seconds so that Googlebot doesn't give up on rendering. I'm opening your site now and the spinner is still going after 30 seconds.