Hoe de Snelheid van een Trage Website

Mensen zijn lazier dan u zou denken—volgens Google ‘ s onderzoek, 53% van de mobiele gebruikers uw site verlaten als het duurt meer dan drie seconden om te laden. U wilt dat uw site snel om uw conversieratio te verbeteren en de zoekmachine rankings.

Hoe om Te Controleren Uw Website op de Snelheid van

Misschien wel het meest belangrijke gegeven van uw site speed is Google ‘ s PageSpeed Insights test. Sinds Google is de arbiter van hoe goed uw website presteert in de rankings, zult u wilt om te kalmeren ze zo veel mogelijk. Een goede score op de PageSpeed Insights test zal direct van invloed op jouw SEO. Voer de URL van uw site, en klik op “Analyseren” voor het bekijken van uw resultaten.

PageSpeed Insights geeft een zeer grondig overzicht van wat er momenteel mis is met uw website. Moet je werken, door hen als een checklist tot uw score veel hoger is. Google onderhoudt een lijst van in de diepte aanbevelingen die u kunt controleren tegen.

Als je wilt kijken hoe je precies je pagina wordt geladen door uw browser, opent u de Tools voor Ontwikkelaars van Chrome (klik met de Rechtermuisknop > Inspecteren, of in het menu instellingen). Hier zijn twee bruikbare tabbladen: het Netwerk en de Prestaties.

Het tabblad Netwerk en toont een eenvoudig te gebruiken tijdlijn van verzoeken naar uw site, hoe groot de respons is, en hoe lang het duurde. Het tabblad Prestaties toont een veel meer gedetailleerde weergave van alles wat er gaande is met uw website:

Vanaf hier kunt u een diagnose maken van bijna elk probleem met de prestaties van uw site, met inbegrip van unoptimized JavaScript-code opnieuw maakt, en de stijl herberekeningen.

Het installeren van Google ‘ s PageSpeed Module

De PageSpeed extension voor Apache en Nginx niet veel van automatiseringen voor algemene optimalisatie van uw website, zoals minifying en comprimeren van HTML, het comprimeren van uw afbeeldingen, het combineren van meerdere JS en CSS bestanden in één keer downloaden, en in het algemeen, net bezuinigingen op bulk. Het is niet een catch-all, maar het is een makkelijke oplossing voor veel voorkomende problemen.

Het verminderen van Uw Website op Maat

Het verminderen van de grootte van uw website verlaagt direct hoe veel tijd het duurt om te downloaden. Terwijl de desktop-gebruikers kunnen nog steeds downloaden van uw site vrij snel, de mensen op mobiele verbindingen kunt het vinden van uw website vastlopen als deze nog niet geoptimaliseerd.

Comprimeren en Lui Afbeeldingen Laden

De eerste manier van het verminderen van de grootte met beelden omgaat. Beelden (en andere media) zijn vaak een grote boosdoener van trage sites. Als je niet controleren van de grootte van uw beelden, is er een kans dat vele van hen zijn meerdere megabytes groot, en duurt voor eeuwig te laden op langzame verbindingen.

U moet controleren of de grootte van uw beelden (die je kunt doen vanuit het tabblad Network in de Chrome Dev-Console) en zorg ervoor dat geen van hen breken in het megabyte bereik. De meeste van de beelden op deze site zijn ongeveer 100 Kb.

Als u grote beelden, zult u wilt comprimeren. Er zijn veel online tools die u kunt dit doen, of u kunt handmatig opnieuw te exporteren van Photoshop, of u kunt omzetten in een hele map van de commando-regel met ImageMagick:

voor f in *.jpg; doen zetten -kwaliteit 70 $f $f; gedaan

Dit comprimeert elke .jpg-bestand naar 70% kwaliteit, die moet besparen veel ruimte, terwijl ze bijna niet te onderscheiden van hogere kwaliteit instellingen.

Afbeeldingen zijn niet renderen blokkeren, wat betekent dat de rest van de site te laden terwijl u wacht op uw afbeeldingen. Maar je moet niet alle laden in een keer, vooral wanneer er meer belangrijke dingen om te downloaden voor de beelden.

Dit kunt u oplossen door lazy het laden van uw afbeeldingen. Deze techniek vertragingen laden van de beelden totdat ze nodig zijn, verschijnt een aanduiding in de plaats (die voorkomt dat de inhoud van het verschuiven rond als de echte beelden belasting). Deze aanduidingen zijn vaak gemaakt te worden van de “dominante kleur”, of een kleine, wazig beeld dat ‘ s sneller te laden, het beperken van de storende effect van het laden.

U kunt luie afbeeldingen laden met een WordPress plugin, met enkele eenvoudige JavaScript, of met een JS-bibliotheek.

Kleineren En Gzip JavaScript Bestanden

Je moet proberen om niet een ton van JavaScript, maar als je moet, moet je het intomen van de grootte van de script-bestanden. De belangrijkste methode is minifying en te comprimeren.

Minifying is een techniek waarbij alle onnodige bulk van de code is verwijderd en vervangen door tekens. Witruimte, nieuwe regels, tabs—allemaal weg. Functie en variabele namen zijn vervangen door enkele tekens. Toegegeven, het ziet er vreselijk:

Maar het vermindert de grootte van het bestand, en niemand gaat worden bewondert het toch. Minifying is iets wat je doet tijdens de implementatie, dus maak je geen zorgen, je hoeft niet te werken op de code zoals deze.

Gzip is een andere stap die omvat het eigenlijke tekst compressie, die kan bespaart nog meer ruimte. Er is een lichte CPU-overhead wanneer de browser is te decoderen van het bestand, maar de grootte van de besparingen die dit rechtvaardigen kosten. Browsers die compatibel zijn met gecomprimeerde bestanden zal het verzenden van een Accept-Encoding: gzip kop in hun resource-aanvragen, zodat de server weet dat het kan dienen tot het gecomprimeerde versies.

Beide stappen versnelt het laden van uw JavaScript-middelen. In feite, minified JavaScript eigenlijk analyseert en voert een beetje sneller, dus het is in dat opzicht beter ook.

Zich Te Ontdoen Van Onnodige Bulk

De laatste stap naar de verbetering van de prestaties van de site is gewoon te verwijderen van de spullen die je niet nodig hebt. Als u het laden van een bos van JavaScript libraries, overweeg dan het coderen van een eenvoudiger oplossing zonder de noodzaak van een externe bron. jQuery is daar een voorbeeld van; het is geweldig om te hebben en maakt het werken met JS veel gemakkelijker, maar het renderen blokkeren en vaak clunkier dan vanilla JS. Als je gaat voor het “zo snel mogelijk” geen gebruik maken van jQuery.

Hetzelfde geldt voor WordPress plugins en widgets; als ze niet helemaal nodig, ze kunnen een gewicht van uw website. Kijk naar het stroomlijnen van uw site, wanneer dat mogelijk is.

Vermijd Het Renderen Van Het Blokkeren Van De Middelen

Bepaalde middelen op uw site zijn renderen blokkeren betekent dat de pagina zal absoluut niet geladen totdat deze middelen worden gedownload. Uiteraard is uw HTML render blokkeren, maar je JavaScript meestal ook. Dit betekent dat een gebruiker een verzoek tot uw site, wachten voor het downloaden van uw HTML-code, zie dat ze behoefte hebben aan een extra JS bestand, en vervolgens wachten voor het downloaden van dat bestand. Dit is een groot probleem, omdat het rechtstreeks verhoogt uw laadtijden.

Er zijn een paar oplossingen voor dit:

Inline JavaScript. In plaats van het koppelen van een externe bron, en plak de gehele inhoud van het JavaScript-bestand dat u probeert te laden in een <script> – tag in uw HTML-bestand. Dit voorkomt dat een externe lading in de eerste plaats, en is de eenvoudigste oplossing.
Het uitstellen van de JavaScript-laden tot na de pagina afwerkingen parsing. Voor iets dat niet hoeft te lopen meteen, voeg het uitstellen van de tag naar de <script> – tag om het te laden later.
Voor dingen die moeten worden uitgevoerd meteen, maar niet echt afhankelijk zijn van iets anders wordt geplaatst in een bepaalde volgorde, gebruik de async-tag, die het uitvoeren van JavaScript asynchroon van het laden van de pagina.

Als je intensief gebruik van client-side JavaScript frameworks zoals Reageren en Vue, u kunt de snelheid van deze render blokkeren probleem door het implementeren van server-side rendering.

Een andere render blokkeren bron is lettertypen. Web fonts van sites zoals Google Fonts zijn geweldig uitzien, maar ze vertragen het laden van de pagina, en in de meeste gevallen zal een blok tekst van het renderen totdat ze gedownload zijn. Je wilt voorkomen dat ze in de meeste gevallen, maar als je het moet opnemen u kunt ze asynchroon met de font-display: optioneel richtlijn.

@font-face {
font-family: ‘CustomFont’;
src: url(“CustomFont.woff”) format(‘woff’);
font-display: optioneel;
}

Dit is technisch nog steeds blokkeren, maar slechts voor een zeer korte periode van tijd, zodat desktop gebruikers zullen waarschijnlijk niet zie tekst lettertypen wijzigen. Als je echt snelheid nodig heeft, kunt u gebruik font-display: swap plaats, die zal maken van een fallback lettertype en vervolgens overschakelen naar de geladen font zodra het beschikbaar is.

Gebruik een CDN en de Cache van Uw Dynamische Inhoud

Een content delivery network (CDN), kan de snelheid van uw website aanzienlijk. Een CDN serveert uw website veel servers (de zogenaamde points-of-presence) over de hele wereld, die drastisch vermindert vertraging voor de klant. Als u extra aanvragen naar de server, zal het veel sneller met een CDN.

Het type van CDN u wilt gebruiken, is een oorsprong trek CDN, als CloudFlare of Vlot, dat zal de cache van uw site bij elk punt van aanwezigheid, het versnellen van de reistijd en het nemen van een aantal laden van uw web server in het proces. Cdn ‘ s kunnen zelfs het formaat van uw afbeeldingen aan de rand, omdat ze het kunnen detecteren van het apparaat erg snel en serveer kleinere versies voor mobiele gebruikers.

U kunt ook gebruik maken van een oorsprong druk CDN te dienen statische middelen om meer mensen aan dan een traditionele, monolithische web server kan beheren. Dit wordt vaak gebruikt voor video-hosting, maar kan dienen afbeeldingen en bestanden.

Een oorsprong trek CDN verbetert ook de latency door het verminderen van de trips uw web server maakt van uw database elke keer dynamische inhoud wordt gevraagd. WordPress en PHP zijn de grootste boosdoeners van dit; elke keer als er een bericht wordt gevraagd, wordt de PHP-script haalt de inhoud van een pagina uit de database. Dit is helemaal niet nodig om meerdere keren per seconde. Caching lost dit probleem op door het opslaan van de “resultaten” van een aanvraag voor een minuut of zo, wat betekent dat uw database wordt afgeluisterd veel minder vaak. Als u niet beschikt over een CDN, kunt u nog steeds het implementeren van WordPress caching met een plugin zoals W3 Total Cache.

Leverage Browser Caching

Browsers cache-inhoud, zodat de toekomst nog sneller zal zijn. Dit heeft geen effect op de eerste pagina te laden, dus het is alleen echt handig voor sites die vaak meerdere bezoeken per gebruiker in een korte tijd (denk dagelijkse nieuws, sociale media, enz.). Hoewel dit is ook van toepassing op gemeenschappelijke bronnen zoals uw logo, die zal worden weergegeven op elke pagina. Wil je deze cache dus dat als een gebruiker rond op je site, het zal geen tijd te verspillen met het herladen van spullen die het al heeft.

Dit wordt gedaan met de cache-control header. U kunt gebruik maken van een CDN te krijgen meer controle over uw caching regels, maar het beheersen van de web server moeten net zo goed werken.

In nginx, de max-age deel van de cache-control header is ingesteld met de expires-richtlijn. Bijvoorbeeld, als u alle afbeeldingen, CSS-en JavaScript-bestanden te worden opgeslagen voor een jaar, je zou kunnen gebruiken:

locatie ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
verloopt 365d;
}

Het probleem met caching op deze manier is dat als u wijzigingen wilt aanbrengen in bestanden in de cache, worden deze wijzigingen niet doorgeven aan cliënten totdat ze verlopen, wat ideaal zou zijn voor een lange tijd. De oplossing hiervoor is gebruik te maken van versiebeheer bestandsnamen te wijzigen, en versies als u wijzigingen moet aanbrengen:

Of zelfs:

Één van beide manier heb je om je bewust te zijn van wat je cache, en voor hoe lang. Je moet niet echt gebruik maken van de cache van de browser op dingen als een statische homepage; als u wilt dat de cache op uw HTML-inhoud, moet u gebruik maken van een full-site CDN te voeren cache op de server kant.

Bovendien kunt u de cache-control-modus met add_header:

locatie ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
verloopt 365d;
add_header Cache-Control “openbaar”;
}

“Openbaar” staat stelt iets te cache, met inbegrip van een CDN. Gebruik dit niet voor niets dat verificatie is vereist. “Eigen” cache iets op een gebruikers-browser, maar niet op Cdn ‘ s. “No-store” zal caching uitschakelen helemaal.