Page Speed en uw ranking in Google
Omdat een snelle website de ervaring van bezoekers behoort positief beïnvloed is het voor Google een steeds belangrijker iets geworden. De tijd voordat uw pagina is ingeladen, oftewel de Page Speed, is door Google bevestigd als een officiële ranking factor binnen de algoritmes van Google. Wilt u hoger in google ranken, Dan is een page speed optimalisatie absoluut geen overbodige luxe!
Wilt u de optimalisatie van uw page speed laten verzorgen? Druk dan hier! En lees waarmee wij u van dienst kunnen zijn!
Page Speed
Voorkom slechte requests
Wat is een slecht verzoek?
Soms vraagt uw HTML of CSS om een bron zoals een afbeelding of een html-bestand dat niet bestaat. Wanneer dit gebeurt, zorgt dit ervoor dat de browser en server meer rondreizen maken die geen doel dienen (omdat het gevraagde ding er niet is).
Als het een gesprek was, zou het ongeveer gaan als:
browser – “Ik heb deze afbeelding nodig”
server- “Ik heb die afbeelding niet”
browser – “weet je het zeker? dit document zegt dat je het hebt.”
server – “nou, dat doe ik niet”
Deze verzoeken vertragen uw webpagina’s echt. Het veroorzaakt niet alleen nutteloze rondreizen, het kan ook meer DNS-lookups veroorzaken die uw pagina nog verder kunnen vertragen.
Het gebeurt vaker dan je denkt. Een voorbeeld dat me meer dan eens is overkomen, is het maken van een website op basis van een sjabloon, en ik verander een aantal dingen en ontdek later dat mijn CSS-bestand vraagt om iets dat ik helemaal niet gebruik (zoals een achtergrondafbeelding).
404-foutmelding
We hebben allemaal waarschijnlijk een 404-foutpagina gezien als we een link volgen terwijl we op internet surfen.
Wanneer een slecht verzoek wordt gedaan, ontvangt een gebruiker de 404-fout of wordt de fout niet gevonden. Deze fout is een standaard HTTP-reactiecode die aangeeft dat de client met de server kon communiceren, maar dat de server het gevraagde bestand niet kon vinden.
De webserver genereert doorgaans een webpagina “404 niet gevonden” wanneer een gebruiker een verbroken of dode link probeert te volgen.
Hoe slechte verzoeken te detecteren
Vaak zijn slechte verzoeken heel duidelijk, zoals wanneer een afbeelding die daar hoort te zijn niet is. Andere keren staan ze op de achtergrond waar ze niet onmiddellijk zichtbaar zijn.
Er zijn soms geen visuele aanwijzingen voor slechte verzoeken, dus het is een goed idee om ongebruikte CSS altijd te verwijderen en om redelijk bekend te zijn met uw pagina’s en welke bronnen ze gebruiken.
Het gebruik van een paginasnelheidstool om uw pagina’s te onderzoeken is de beste manier om te weten of uw bestand niet-bestaande bronnen aanroept. Ons hulpprogramma Paginasnelheid detecteert slechte verzoeken.
Hoe slechte verzoeken op te lossen
Het oplossen van slechte verzoeken is een stuk eenvoudiger dan ze te vinden. Als u merkt dat u er een of meer hebt, verwijdert u gewoon de code die de bron aanroept of vervangt u de ontbrekende bron. Als uw webpagina bijvoorbeeld om een afbeelding vraagt, maar de afbeelding is er niet, wijzigt u de afbeelding “src” zodat deze naar de gewenste afbeelding verwijst of verwijdert u de afbeelding volledig.
Voorkom CSS imports
Wat is @ CSS importeren?
Het is een methode om een CSS-bestand te importeren vanuit een ander CSS-bestand. Het ziet er zo uit…
@import url (“style.css”)
Waarom zou je het niet gebruiken?
De @import-methode voor het ophalen van CSS-bestanden veroorzaakt enkele problemen die van invloed zijn op uw paginasnelheid. Het grootste probleem is dat het ervoor zorgt dat bestanden opeenvolgend worden geladen (de een moet op de ander wachten) in plaats van parallel (tegelijkertijd). Dit verspilt tijden en rondreizen en maakt uw webpagina langzamer laden.
Hoe CSS @ import te voorkomen
Kijk in uw HTML- en CSS-bestanden en zoek de @ import-aanroepen. U kunt ook de online CSS-bezorgtool gebruiken om ze te detecteren.
Nogmaals, ze zien er zo uit en zullen meestal bovenaan het bestand staan.
@import url (“style.css”)
In plaats van dat css-bestand met de importmethode aan te roepen, is het beter om die extra css in slechts één bestand te houden (kopieer en plak de geïmporteerde css in het oorspronkelijke css-bestand). Als u dat om een of andere reden niet kunt doen, neemt u die CSS-bestanden op uit het HTML-bestand met de volgende code …
<link rel = “style.css” href = “style.css” type = “text / css”>
Zorg ervoor dat “style.css” wordt vervangen door de locatie en naam van uw CSS-bestand.
Controleer al uw CSS-bestanden
Tip: gebruik onze CSS-tool om te zien of je @imports op je pagina hebt
Veel websites hebben verschillende CSS-bestanden (u moet proberen deze CSS-bestanden te combineren). Als u meer dan één CSS-bestand hebt, controleert u elk bestand op import.
Als een CSS-bestand een ander CSS-bestand aanroept via de @ importmethode, is dit met name slecht voor de paginasnelheid. Dit voegt extra stappen toe voor de browser om uw webpagina te laden, waardoor de browser wordt gedownload, ontleed en vervolgens naar buiten gaat en het volgende CSS-bestand ophaalt voordat het begint met het weergeven van uw pagina.
Dit kan worden voorkomen door de hierboven getoonde koppelingsmethode te gebruiken.
Het is het beste als er helemaal geen @imports worden gebruikt
Base64 afbeeldingen
Afbeeldingen in HTML invoegen met base64
Veel mensen weten niet dat afbeeldingen in HTML-code kunnen worden opgenomen. De methode waarmee dit wordt gedaan, wordt base64-codering genoemd.
Met Base64 gecodeerde afbeeldingen worden onderdeel van de html en worden weergegeven zonder iets te laden in plaats van dat een webbrowser de afbeelding moet downloaden.
Wat is Base64?
Het is een van de oudste manieren om dingen in HTML te coderen (voor het eerst voorgesteld in 1987!). Het is een manier om verschillende soorten gegevens om te zetten in een reeks letters en cijfers die veilig is voor HTML. Een van die gegevenstypen zijn afbeeldingen.
Base64 gecodeerde afbeeldingen
Zie je die grote afbeelding hierboven? Het is gecodeerd met base64. Zie je die pictogrammen rechts? Ze zijn gecodeerd met base64.
Ik gebruik al jaren base64-afbeeldingen voor varvy (deze site) en dit is een van de belangrijkste redenen waarom mijn pagina’s zo snel laden.
Base64 gebruiken
Om een afbeelding om te zetten in base64, kunt u de tool gebruiken die ik hier voor dat doel heb gemaakt – Base64-afbeeldingscodeerder of gewoon zoeken naar “base64-afbeeldingscodering”, er zijn veel tools beschikbaar.
Hoe helpt Base64 paginasnelheid?
Het belangrijkste voordeel is dat een webpagina geen externe afbeelding hoeft te laden. Als u minder dingen laadt die een webpagina moet laden, wordt die pagina natuurlijk sneller.
Hier is een webpagina met twee afbeeldingen. Om deze pagina te laden zijn vier dingen vereist (html, css, eerste afbeelding, tweede afbeelding):
Hier is dezelfde webpagina met base64-gecodeerde afbeeldingen. Om deze pagina te laden zijn slechts twee dingen nodig (html, css):
Welke invloed heeft base64 op SEO?
De belangrijkste manier waarop base64-afbeeldingen SEO beïnvloeden, is dat de afbeelding niet wordt geïndexeerd door Google.
Dit betekent dat de afbeeldingen die u base64 niet verschijnen in Google afbeeldingen zoeken, of een andere zoekmachine.
Waarom zou u het dan gebruiken?
Er zijn veel niet-belangrijke afbeeldingen op een pagina die geen invloed op u of uw verkeer hebben als ze niet zijn geïndexeerd.
Het beste voorbeeld zijn sociale pictogrammen.
Al die kleine twitter-, Google+, Facebook-, enz. -Afbeeldingen zijn erg klein en hoeven niet te worden geïndexeerd. U zult nooit verkeer krijgen van uw kleine twitter-pictogram.
Als je echt naar de afbeeldingen op je pagina kijkt, kun je veel afbeeldingen vinden die onder deze definitie vallen. Denk aan afbeeldingen die er gewoon zijn voor ontwerp zoals “bottom-left-corner.png” of “quotation-mark.jpg”. Dit soort dingen zijn gewoon niet belangrijk voor uw SEO, maar vertragen uw pagina’s nog steeds.
Veel webpagina’s hebben 8 of 12 sociale pictogrammen en elk daarvan is een extra HTTP-verzoek dat gewoon helemaal niet hoeft te worden gedownload als u base64 gebruikt.
Andere Overwegingen
Het is het beste om alleen base64 kleine afbeeldingen te coderen. Als u grotere afbeeldingen probeert te baseren, krijgt u veel code in uw html en gaan de prestatievoordelen verloren.
Hoe ik base64 op deze site gebruik
Zoals ik hierboven al zei, gebruik ik veel base64. Elke pagina op deze site maakt uitgebreid gebruik van base64.
Omdat ik base64 zo lang en met zoveel afbeeldingen heb gebruikt, heb ik geleerd hoe ik een balans kan vinden tussen SEO en prestatieproblemen.
Hoe Google naar index base64 te krijgen
Zoals eerder vermeld, indexeert Google base64-gecodeerde afbeeldingen niet, dus waar heb ik het over?
Op elk artikel van deze site staat een grote introductieafbeelding. Elk van hen is base64-gecodeerd, maar elk van hen wordt ook geïndexeerd door Google. Hoe heb ik dat gedaan?
De manier is om een fysiek afbeeldingsbestand te hebben dat hetzelfde is als het gecodeerde bestand. Je uploadt dat vervolgens naar je webhost en gebruikt in het hoofdgedeelte van je HTML opengraph notatie om Google naar die afbeelding te verwijzen.
Hier is wat het hoofd van mijn html begint met voor deze pagina:
Het eerste deel van die puinhoop van code verklaart opengraph en het laatste deel verklaart mijn afbeelding:
Het eindresultaat hiervan is dat mijn afbeelding inderdaad wordt geïndexeerd door Google.
Grootte problemen
Een 2k-afbeeldingsbestand resulteert in 2,5 of 3k base64-gecodeerde gegevens. Als u echter compressie inschakelt (zoals u zou moeten zijn), heeft deze ongeveer dezelfde grootte als het afbeeldingsbestand.
Ik zou niet aanraden base64-codering te gebruiken voor een afbeelding groter dan 5k.
Hoe base64 wordt gebruikt
Voorbeeld: hier is een typisch afbeeldingsbestand in uw html:
Vervang de bestandslocatie (in dit geval – example.png) door de src-info van een base64-tool:
De bron van uw afbeelding is nu niet langer een extern bestand, maar de gecodeerde gegevens in het veld “src =”.
Het gereedschap
Als je wilt experimenteren met base64, gebruik dan mijn tool voor het coderen van de base64-afbeelding
