Ik probeer mijn mobiele versie van de website omhoog te krijgen maar ik kom er niet uit ik krijg via pagespeed het volgende probleem te zien
JavaScript en CSS in content boven de vouw die het weergeven blokkeren, verwijderen
Je pagina heeft 4 blokkerende CSS-bronnen. Dit veroorzaakt vertraging bij het weergeven van je pagina.
Geen van de content boven de vouw op je pagina kan worden weergegeven zonder te wachten totdat de volgende bronnen zijn geladen. Probeer blokkerende bronnen uit te stellen of asynchroon te laden of parseer de essentiële gedeelten van die bronnen rechtstreeks in de HTML.
Optimaliseer de CSS-weergave voor de volgende URL's:
css/bootstrap.css
css/slidebars.css
css/style.css
css/font-awesome.min.css
hoe kan ik dit oplossen ? desktop heb ik een score van 93
Zo vreemd lijkt het niet als jouw site op een SSL-certificaat heeft en dus via https wordt geserveerd. Dan dienen je stylesheets ook via https te worden ingeladen, als dit extern gebeurt.
Dan is er sprake van 'mixed content'. Ik heb geen idee of dit ook een vertragende factor kan zijn. maar met de Developer Tools van je browser moet je dit wel kunnen meten.
De browser moet op je externe CSS files "wachten" (maakt niet uit waar ze vandaan komen: CDN, eigen site, of bij een 2e bezoek natuurlijk uit de best wel vlotte lokale cache). Dit kun je "oplossen" door de CSS die voor de content "boven de vouw" (het deel content dat in beeld is zonder te scrollen) inline in je html op te nemen, dus tussen <style> tags.
Dat "oplossen" staat tussen haakjes omdat dit natuurlijk geen echte oplossing is. Je allereerste impressie (eerste keer bezoek, niet gescrolld) voor een mobiele gebruiker zal er misschien een fractie op vooruit gaan (als je de CSS ook daadwerkelijk terug snoeit tot het hoogst noodzakelijke). Uiteindelijk zal ie toch:
- de volledige stylesheet een keer op moeten halen (inclusief wat je al in die inline <style> had gezet = dubbel ophalen = extra data + wachten)
- of je moet op elke pagina dat inline <style> blok herhalen, maar daar worden dus al je pagina's lomper van dan bij een externe stylesheet oplossing
Maar wel meer punten op Google dus. Doe je het daar voor, dan moet je het dus vooral doen. Doe je het voor de echte "ervaring" van je bezoekers, dan kun je het beter laten.
Wat makkelijker is om te proberen is "minimaliseren en combineren". Gooi je externe CSS files eerst hier doorheen: https://csscompressor.com/ (behalve font-awesome.min.css - die is al geminimaliseerd), en plak de resultaten van alle 4 dan, in de juiste volgorde, in een enkel bestand (bijvoorbeeld "style-combined.min.css"). Dit ene bestand is dan het enige bestand dat je in de <head> opneemt. Google ziet dan 1 ipv 4 bestanden, en is alweer een stukje meer tevreden.
Uiteraard moet je dan wel na elke wijziging in een van de bronbestanden bovenstaande stappen herhalen (maar dit kun je natuurlijk automatiseren).
Bij mij geeft PageSpeed voor HTTPS sowieso al 63 op mobiel (dus geen 83) (HTTPS wel 74). Dus ik weet niet hoe "stabiel" die waarden zijn, of dat het er een beetje aan ligt hoe je server net op dat moment presteert.
