Laadsnelheid van de site. 4 hoofdfactoren.

Laadsnelheid van de site. Hoe de downloadsnelheid verhogen? Belangrijkste problemen.

Aanbevolen laadsnelheid van de site Google- 2 seconden. (en kijk nu naar je snelheid)

(Hoe de laadsnelheid van de website controleren?De gemakkelijkste en snelste manier is om te openen ontwikkelaarstools CTRL+SHIFT+ISelecteer vervolgens het tabblad "Netwerk", vernieuw vervolgens de pagina, om de downloadsnelheid te zien die u nodig hebt om de pagina te vernieuwen, Vernieuwen zonder cache: u moet op CTRL + F5 / CTRL + R drukken. En hieronder is de downloadsnelheid.)

Controleer de laadsnelheid van de site
met behulp van een dienst van Google: PageSpeed ​​​​Insights

(infografiek overgenomen van seoprofy ©2014)

De belangrijkste punten die het meest van invloed zijn:

1. cache
2. css (stijlen)
3. JS (schriftjes)
4. Afbeeldingen (hun gewicht, grootte - ja, precies de HxB-maat, metagegevens - ja, er bestaat zoiets, dit is hun informatie zoals: datum, titel, onderwerp, enz.)

Om niet veel onnodige informatie te schilderen over kleine momenten die niet echt van invloed zijn of een verwaarloosbaar effect hebben, zal ik er niet over schrijven.

#1 CONTANT GELD

caching (ofcache) is een buffer (een plaats) waar gegevens worden opgeslagen. In ons geval zijn dit afbeeldingen, code, stijlen en meer.

Het makkelijkst wat je zelf kunt doen is caching op hosting inschakelen.
(Als u Ukraine.com.ua-hosting heeft, moet u naar "site-instellingen" -> "basisinstellingen" gaan en er zal een item "Caching" zijn en daar selecteert u de vereiste hoeveelheid tijd waarvoor uw site zal worden gecachet. Ik raad aan om het op 2 weken in te stellen - met deze cachingperiode voegt Google-paginasnelheidsinzichten veel punten toe.)

andere methoden met betrekking tot htaccess, browsertags, enz. Zijn voor nogal wat artikelen op internet te vinden en ik zie het nut niet in van opnieuw schilderen. Over de soorten caching lees je in het artikel op Habré.

#2 CSS (stijlen)

CSS - (Cascading Style Sheets - Cascading Style Sheets).
Wat kan er met stijlen?
We zullen ten eerste knijp ze.
ten tweede het aantal bestanden verminderen, d.w.z. voeg zoveel mogelijk samen om het aantal oproepen naar de server te verminderen.
Ten derdesluit de belangrijkste stijlen die van invloed zijn op de weergave van het zichtbare deel van het eerste scherm rechtstreeks in in en laat de rest in het bestand.

Ik laat ook een paar handige links achter:

• css-compressieservices
• hoe css-bestanden te comprimeren

#3 JS (scripts)

Hier hebben we ook verschillende manieren om scripts te optimaliseren.

1. Script laden uitstellen. Pof hem zo laag mogelijk, zet hem achter of zelfs lager soms helpt het, soms is het geen optie. Maar punt 2 komt te hulp.
2. ASYNC - asynchroon laden van scripts. Dit wordt gedaan met behulp van de "async" parameter

   Er zijn meer details over asynchrone hier.
   Iets meer informatie over JS en zijn invloed.

3. Klein punt.
   JS kan ook worden gecomprimeerd. Ook samenvoegen tot 1 bestand.

#4 Foto's

Je kunt altijd drie dingen doen: naar het vuur kijken, naar het water kijken en de foto's optimaliseren.

Het onderwerp is vrij uitgebreid, dus ik zal proberen u alleen belangrijke informatie te geven.

Optimaliseer het gewicht.

Hoe? Via een programma of dienst.

• Programma voor massawerk met afbeeldingen Snelle stenen afbeeldingdaarmee kan je
  Bulk formaat van afbeeldingen wijzigen. Hoe en wat daar al googlen is niet moeilijk.
  Faststone-afbeelding downloaden.
  
• Service om de grootte van afbeeldingen te verkleinen - Panda. Of liever TinyPNG & TinyJPG.
  Het belangrijkste voordeel van ONLINE. Upload gewoon de bestanden en ga terug in een gecomprimeerde versie - De kwaliteit lijdt er helemaal niet onder (het is Magic).
  Links: tinypng.com & tinyjpg.com

Optimaliseer de grootte.

De grootte zoals ik hierboven schreef kan worden gewijzigd met behulp van het programma snel stenen beeld.
De maat is Hoogte x Gewicht (Hoogte bij Breedte).

Voorbeeld:

(Als je hier meer over wilt weten, kun je de hulp van Google over dit onderwerp lezen. ARTIKEL van Google, maar ik waarschuw je dat het tot op zekere hoogte nerdy is)

We hebben bijvoorbeeld 2 afbeeldingen:
1) Gewicht 100kb, Grootte 500x500
2) Gewicht 100kb, Grootte 2500x2500
Het lijkt erop dat wat voor verschil het maakt, ze hetzelfde wegen, daarom zou het laden ervan net zo ingewikkeld of eenvoudig moeten zijn, maar het was er niet als je het controleert op google page speed insgiht, het zal nog steeds zweren bij een hogere resolutie afbeelding.

Samenvatten: Grootte doet er toe. Gewicht ook. (de rest is niet zo belangrijk, maar volgens de argumenten van sommige experts heeft het ook impact, nu heb ik het over Image Metadata)

Ik heb niet echt iets geschreven over metadata, nou ja, er valt hier niets te schrijven ...
Wis gewoon alle metagegevens voor alle afbeeldingen, volgens de legende kunt u de grootte met 2 keer verkleinen. Ik kwam er onlangs achter (over het effect van bestandsgrootte, ik dacht dat het vrij onbeduidend was).

Kort over de release:

• meest voorkomende problemen met het laden van websites
• opties om ze op te lossen
• waar je op moet letten zodat alles in orde is

Laten we naar de video gaan:

PS
Als je vragen hebt of het ergens niet mee eens bent, schrijf er dan over in de comments.