Vijf manieren om de laadtijden van pagina’s te versnellen. Hoe u het laden van pagina's in uw browser aanzienlijk kunt versnellen

Ik denk dat het geen geheim is dat de laadsnelheid van pagina’s door veel factoren wordt beïnvloed. Als iemand het niet weet, zal ik kort het volgende zeggen: de laadsnelheid heeft niet alleen invloed op de vraag of de bezoeker zal wachten tot uw site is geladen, maar ook SEO-optimalisatie. Tegenwoordig zijn veel zoekmachines begonnen rekening te houden met de laadsnelheid van pagina’s bij het rangschikken van sites. Hoe sneller uw site laadt, hoe meer bezoekers u kunt krijgen zoekmachines en er dus meer geld mee verdienen.

Daarom heb ik in dit artikel besloten de 10 beste tips te verzamelen over hoe je de laadsnelheid van een webpagina en de site als geheel kunt verhogen. Het artikel pretendeert niet geniaal te zijn en is bedoeld voor beginners.

Hier gaan we:

1. Verminder het aantal HTTP-verzoeken

80% van het laden van pagina's is gericht op het laden van paginacomponenten: scripts, foto's, CSS-bestanden, flash. De HTTP/1.1-specificatie beveelt aan dat browsers niet meer dan twee componenten van een webpagina parallel van één host mogen downloaden. Door het aantal van deze componenten te verminderen, verminderen we het aantal HTTP-verzoeken aan de server en verhogen daardoor de laadsnelheid van de pagina.

Maar hoe u het aantal verzoeken aan de server kunt verminderen zonder dat dit gevolgen heeft verschijning Pagina's?

2. Plaats CSS-bestanden bovenaan de pagina

Door een verbinding met CSS-bestanden in de paginakop te plaatsen, krijgen we een geleidelijke weergave van de pagina, d.w.z. de pagina wordt geleidelijk geladen - eerst de koptekst, dan het logo bovenaan, de navigatie, enz. – en dit dient op zijn beurt als een uitstekende indicator voor het laden van pagina’s voor de gebruiker en verbetert algemene indruk van de site.

Door CSS-bestanden onderaan de pagina te plaatsen, kunnen veel browsers de pagina niet stapsgewijs weergeven. Dit wordt verklaard door het feit dat de browser elementen “niet wil” hertekenen waarvan de stijl kan veranderen na het laden van de pagina. Plaats dus altijd al je CSS-bestanden bovenaan de pagina in de HEAD-sectie.

3. Plaats javascript onderaan de pagina

Door javascript-bestanden onderaan de pagina te plaatsen, zorgen we ervoor dat de browser eerst de pagina met de inhoud laadt en pas daarna begint met het laden van de javascript-bestanden. Als uw site met de tijd meegaat en alle mogelijke interactieve toeters en bellen bevat, kunnen er meerdere van deze javascript-bestanden zijn en deze kunnen honderden kilobytes wegen, waardoor de gebruiker gedwongen wordt te wachten totdat al uw javascript-bestanden zijn geladen voordat de site wordt geladen. pagina is rampzalig.

Bovendien blokkeren externe .js-bestanden parallel laden. De HTTP/1.1-specificatie beveelt aan dat browsers niet meer dan twee componenten van een webpagina parallel van één host mogen downloaden. Als de afbeeldingen voor uw site zich dus op verschillende hosts bevinden, ontvangt u meer dan 2 parallelle downloads. En wanneer het script wordt gedownload, start de browser geen andere downloads, zelfs niet van andere hosts.

4. Verklein css en javascript

Bestandsminimalisatie is het verwijderen van alle niet-essentiële tekens uit de code om de bestandsgrootte te verkleinen en het laden ervan te versnellen. In het geminimaliseerde bestand worden alle opmerkingen en onbelangrijke spaties, regeleinden en tabtekens verwijderd. Alles is hier eenvoudig. Hoe kleiner de bestandsgrootte, hoe minder tijd de browser nodig heeft om het te downloaden. En deze 24 online services voor het comprimeren en optimaliseren van CSS-code helpen u uw code te minimaliseren.
5. Gebruik subdomeinen voor parallelle downloads

Zoals ik hierboven al zei, zijn browsers volgens de HTTP/1.1-specificatie onderworpen aan beperkingen op het aantal gelijktijdig geladen websitecomponenten, namelijk niet meer dan 2 componenten van één host. Als uw site veel afbeeldingen bevat, is het daarom beter om deze naar een afzonderlijk subdomein of subdomeinen te verplaatsen. Voor jou zal het dezelfde server zijn, maar voor de browser zal het anders zijn. Hoe meer subdomeinen u maakt, hoe meer meer bestanden de browser kan tegelijkertijd laden en hoe sneller de hele sitepagina wordt geladen. Het enige dat u hoeft te doen, is het adres van de afbeeldingen wijzigen in een nieuw adres. Een hele simpele maar effectieve manier.

6. Gebruik uw browsercache

Caching wordt uiterst belangrijk voor moderne websites die gebruik maken van uitgebreide JavaScript-verbinding en CSS. Feit is dat wanneer een bezoeker uw site voor de eerste keer bezoekt, de browser alle javascript- en css-bestanden downloadt en ook alle afbeeldingen en flash laadt, maar door de Expires HTTP-header correct in te stellen, maakt u de pagina componenten cachebaar. Zo kan wanneer een bezoeker uw site opnieuw bezoekt of er naartoe gaat volgende bladzijde van uw site, zal de browsercache er al enkele bevatten benodigde bestanden en de browser hoeft ze niet opnieuw te downloaden. Vandaar de winst in de laadsnelheid van de site.

Stel daarom waar mogelijk de Expires HTTP-header enkele dagen of zelfs maanden van tevoren in. Om ervoor te zorgen dat de Apache-webserver HTTP Expires-headers uitgeeft die voldoen aan de aanbevelingen, moet u het .htaccess-bestand in de hoofdmap van de site toevoegen: volgende regels:
Header toevoegen Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "toegang plus 0 minuten" ExpiresByType image/ico "toegang plus 1 jaar" ExpiresByType tekst/css "toegang plus 1 jaar" ExpiresByType tekst/javascript "toegang plus 1 jaar" ExpiresByType image/gif "toegang plus 1 jaar" ExpiresByType image/jpg "toegang plus 1 jaar" ExpiresByType image/jpeg "toegang plus 1 jaar" ExpiresByType image/bmp "toegang plus 1 jaar" ExpiresByType image/png "toegang plus 1 jaar"
Dit fragment van het configuratiebestand Apache-webservers controleert op de aanwezigheid van de mod_expires-module en schakelt, als de mod_expires-module beschikbaar is, het verzenden van Expires HTTP-headers in, die de opslagperiode voor de bovengenoemde objecten in de cache van browsers en proxyservers instellen op één jaar vanaf het moment van de eerste download. Door de levensduur van de browsercache op dit niveau in te stellen, kan het lastig zijn om bestanden bij te werken. Als u daarom de inhoud van een CSS- of JavaScript-bestand hebt gewijzigd en wilt dat deze wijzigingen worden bijgewerkt in de browsercache, moet u de naam van het bestand zelf wijzigen. Meestal wordt de versie van het bestand aan de bestandsnaam toegevoegd, bijvoorbeeld: stijlen.v1.css

7. Gebruik een CDN om populaire JavaScript-bibliotheken te laden

Als uw site een populair javascript-framework gebruikt, zoals jQuery, dan is het beter om een ​​CDN te gebruiken om deze te verbinden.

8. Optimaliseer uw afbeeldingen

U moet het juiste formaat voor uw afbeeldingen bepalen. Als u het verkeerde afbeeldingsformaat selecteert, kan de bestandsgrootte aanzienlijk toenemen.

  • GIF's zijn ideaal voor afbeeldingen met meerdere kleuren, zoals een logo.
  • JPEG – ideaal voor gedetailleerde afbeeldingen met grote hoeveelheid bloemen zoals foto's.
  • PNG is jouw keuze als je een afbeelding van hoge kwaliteit met transparantie nodig hebt.
Er zijn twee manieren om een ​​afbeelding te optimaliseren: door programma's of onlinediensten op internet te gebruiken om afbeeldingen te comprimeren. In het eerste geval heb je bepaalde kennis nodig om met dit of dat programma te werken, maar iedereen kan online diensten gebruiken. Het enige wat u hoeft te doen is downloaden benodigde afbeeldingen, en de service optimaliseert ze zelf en biedt een link om reeds gecomprimeerde bestanden te downloaden.

Hier zijn verschillende online diensten voor beeldoptimalisatie:

9. Schaal afbeeldingen niet

Pas het formaat van de afbeelding niet aan met behulp van de breedte- en hoogtekenmerken van de tag, of wanneer CSS-hulp. Dit heeft ook een negatieve invloed op de laadsnelheid van de pagina. Als je een afbeelding hebt met een formaat van 500x500px en je wilt een afbeelding met een formaat van 100x100px in de site invoegen, dan is het beter om het formaat van de originele afbeelding te wijzigen met behulp van een afbeelding Photoshop-editor, of iemand anders. Hoe lichter de afbeelding, hoe minder tijd het kost om deze te laden.

10. Gebruik Gzip-compressie

Zoals studies hebben aangetoond, is gzip-compressie tekstbestand Met “on the fly” kunt u in 95-98% van de gevallen de tijd verkorten die nodig is om een ​​bestand naar de browser over te brengen. Als u gearchiveerde kopieën van bestanden op de server opslaat (in het geheugen van de proxyserver of gewoon op schijf), kan de verbinding over het algemeen 3-4 keer sneller worden vrijgegeven.

Vanaf HTTP/1.1 geven webclients aan welke compressietypen ze ondersteunen door de Accept-Encoding header in het HTTP-verzoek in te stellen.

Accept-codering: gzip, leeglopen

Als de webserver een dergelijke header in een verzoek ziet, kan deze responscompressie toepassen met behulp van een van de door de client genoemde methoden. Bij het geven van een antwoord informeert de server de client via de Content-Encoding header over hoe het antwoord is gecomprimeerd.

Inhoudscodering: gzip

De op deze manier overgedragen gegevens zijn ongeveer vijf keer kleiner dan de oorspronkelijke gegevens, en dit versnelt de levering ervan aanzienlijk. Er is echter één nadeel: het verhoogt de belasting van de webserver. Maar het probleem met de server kan altijd worden opgelost. Laten we hier dus geen aandacht aan besteden.

Om GZIP-compressie op uw website in te schakelen, moet u de volgende regels code in het .htaccess-bestand schrijven:
AddOutputFilterByType DEFLATE tekst/html AddOutputFilterByType DEFLATE toepassing/javascript AddOutputFilterByType DEFLATE tekst/javascript AddOutputFilterByType DEFLATE tekst/css BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0 no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Als deze methode werkte, dan prima, zo niet, dan kun je deze code proberen:

AddOutputFilterByType DEFLATE tekst/html tekst/platte tekst/xml-toepassing/xml-toepassing/xhtml+xml tekst/javascript tekst/css-toepassing/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0 no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html mod_gzip_on Ja mod_gzip_item_include bestand \.js$ mod_gzip_item_include bestand \.css$

Maar nogmaals, deze code werkt niet op alle servers, dus het is beter om contact op te nemen met de ondersteuningsdienst van uw hostingprovider en dit probleem op te helderen.

Nou, dat is eigenlijk alles wat ik je wilde vertellen. In dit artikel heb ik geprobeerd alle belangrijke methoden op te sommen klantoptimalisatie om de laadsnelheid van webpagina's te verhogen. Naast clientoptimalisatie is er ook serveroptimalisatie. Maar dit is een onderwerp voor een apart artikel.

Als je iets hebt gemist of iets toe te voegen hebt, schrijf dan je mening in de reacties hieronder op dit bericht. Bedankt voor uw aandacht!

Het optimaliseren van de sitesnelheid is altijd een prioriteit, omdat er veel concurrentie is tussen sites en het noodzakelijk is om uw bronnen voortdurend te verbeteren. Zowel website-eigenaren (bloggers) als grote bedrijven die verloofd zijn SEO-promotie, omdat ze begrijpen dat dit een van de basisparameters is.

Op dit moment Er zijn een groot aantal diensten voor het analyseren van de laadsnelheid van websites en het identificeren ervan probleemgebieden, maar desondanks zijn de meeste sites nog steeds niet op de juiste manier geoptimaliseerd.

In dit artikel en checklist zal ik proberen niet gebonden te zijn aan een specifiek CMS, maar zo te schrijven dat de oplossingen geschikt zijn voor elke site.

Ik wil graag uw aandacht vestigen op: als u uw site alleen incheckt Google-service PageSpeed-inzichten, dan zul je tijdens het bestuderen van de checklist begrijpen dat daar een groot aantal parameters verborgen zijn en niet worden weergegeven, ondanks het feit dat ze nog steeds de laadsnelheid van de site beïnvloeden.

Fase 1. Definieer het ‘framework’ voor het optimaliseren van de sitesnelheid

Met ‘Site Speed ​​Optimization Framework’ bedoel ik de hoeveelheid CSS-, JS-, media- en andere bestanden die op uw site worden geladen.

Nadat we het “kader” hebben gedefinieerd, zullen we weten naar welk raamwerk we uiteindelijk moeten gaan. En de service gemaakt door Jonathan Fielding zal ons helpen de gegevens te vinden - www.performancebudget.io.

Kijk korte video over het werken met deze site, waar ik duidelijk heb laten zien wat je moet kiezen om te bepalen " Raamwerk voor optimalisatie van de sitesnelheid":

Fase 2. Ontdek de echte snelheid van de site

Zoals ik hierboven al schreef, Google PageSpeed ​​Insights Dit goed hulpmiddel om de optimalisatie van de sitesnelheid te controleren, maar toch “geeft” het slechts oppervlakkig advies. U kunt dit eerst met deze tool controleren en vervolgens doorgaan naar meer gedetailleerde statistieken van de volgende services:

  • Webpaginatest
  • GTmetrix

Wees voorzichtig bij het testen met deze diensten, omdat de laadtijden kunnen variëren doordat de server van uw site en de server waarop de test draait ver van elkaar verwijderd zijn.

Met de WebPagetest-service kunt u een testserver en browser selecteren. Deze dienst laat in de vorm van diagrammen zien welke bronnen (CSS, JS) procentueel het meest voorkomen op uw site. Wat mij het meeste bevalt is gedetailleerde statistieken op aanvraag in de vorm van grafieken. Ook is er informatie over op welke bestanden GZIP-compressie wordt toegepast en wordt direct duidelijk of alles correct is opgegeven in de .htaccess-instellingen.

Maar met de GTmetrix-service kunt u een schema voor het downloaden van bestanden bekijken, en bovendien toont alles gedetailleerde tips voor het optimaliseren van elke nuance op de site. En hier is alles opgesplitst in meer gedetailleerde optimalisatiepunten.

Als u de echte informatie over uw site kent, kunt u nu vergelijken dit figuur met degene waar het raamwerk voor optimalisatie van de sitesnelheid werd getoond.

En alleen nu kunt u optimaal profiteren van onderstaande checklist. In deze checklist beschouw ik alleen die optimalisatiemethoden die geen extra investeringen van u vereisen in termen van geld, maar alleen de wens en een beetje doorzettingsvermogen vereisen om elk item te doorlopen en te optimaliseren.

(Checklist) Zelfoptimalisatie van sitesnelheid

1. Beeldoptimalisatie

  1. Gebruik afbeeldingen met de exacte resolutie die nodig is op de pagina.

    Er zijn vaak situaties waarin afbeeldingen met een hoge resolutie worden gebruikt (bijvoorbeeld 800x600px), maar op de pagina wordt alleen een miniatuur gebruikt (bijvoorbeeld 300x225px). Bijzonder gebruikelijk deze fout bij het maken van galerijen. Gebruik alleen de beeldresolutie die nodig is in uw specifieke situatie.

  2. Combineer alle pictogrammen (als SVG, dan in een SVG-sprite) in één afbeelding (sprite).

    Hierdoor wordt het aantal verzoeken aan de server verminderd. Nu zijn er online oplossingen: css.spritegen.com, iconisch. Dat geldt ook voor oplossingen voor monteurs (voor Gulp - slok-svg-sprites, voor Grunt- grunt-svg-sprite, voor Webpack - Webpack SVG-sprite-lader).

  3. Optimaliseer afbeeldingen: PNG, JPG, SVG.

    Hier zijn beide online oplossingen: Kleine PNG, Kraken.io. Dat geldt ook voor geautomatiseerde oplossingen voor monteurs: Gulp - slok-imagemin, slok-pngquant; Grommen - grunt-contrib-imagemin; Webpakket - imagemin-webpack-plug-in.

  4. Afbeeldingen uitstellen zonder lazyloading of jQuery - https://varvy.com/pagespeed/defer-images.html

2. Verminder het aantal verzoeken

  1. Gebruik SVG-sprites en PNG-sprites.

    Ik heb hierover geschreven in het blok 'Beeldoptimalisatie', dat zich hierboven bevindt.

  2. Combineer alle CSS-bestanden in één.

    Zoals ik al eerder zei, zal dit het aantal verzoeken aan de server verminderen. Plug-ins voor bouwers (voor Gulp - gulp-concat-css, voor Grunt- grunt-concat-css, voor Webpack - css-concat-loader).

  3. Combineer indien mogelijk alle JS-bestanden in één.

    Plug-ins voor bouwers (voor Gulp - gulp-concat-js, voor Grunt- grunt-contrib-concat, voor Webpack - webpack-uglify-js-plug-in).

  4. Verminder het aantal databasequery's zoveel mogelijk.

    Alles dat kan worden geladen zonder de database te bevragen, wordt geladen zonder het te gebruiken - statisch. Omdat verzoeken en antwoorden tijd vergen, zou het logisch zijn als we dit zo veel mogelijk beperken deze indicator.

3. Optimaliseer CSS en JS

  1. We comprimeren alle CSS-bestanden.

    Online-oplossingen: CSS-compressor, CSS-verkleiner slok-schoon-css; Grommen - grunt-contrib-cssmin; Webpakket - clean-css-loader.

  2. We comprimeren alle JS-bestanden.

    Online diensten: JavaScript-compressietool, JS-verkleiner. Plug-ins voor bouwers: Gulp - slok-lelijk; Grommen - grunt-contrib-comprimeren; Webpack - de plug-in die in de vorige paragraaf wordt genoemd, comprimeert ook JS.

Hallo, lieve lezers! Ik kreeg onlangs een reactie waarin mij de vraag werd gesteld: wat is mijn geheim om de site snel te laden? Ik besloot niet te reageren met een opmerking (te veel om te schrijven), maar meteen een nuttige post over dit onderwerp voor iedereen te schrijven. Dat wil zeggen, vandaag zullen we het hebben over zo'n belangrijke factor als.

Waarom denk je dat het nodig is? snel laden site? Laten we logisch nadenken. Wij schrijven voor mensen, mensen moeten onze berichten lezen en kennis opdoen. Onze website of blog is een platform voor het plaatsen van kennis! De toegang daartoe moet open en snel zijn. Wat als uw site binnen 15-20 seconden laadt? Zal de gebruiker besluiten om erop te blijven? Het antwoord is duidelijk: NEE!

Hoogstwaarschijnlijk is de bezoeker niet langer de uwe, maar uw concurrent! Zelfs als hij lager zit Zoekresultaten. Zelfs als je mega-uitstekende artikelen schrijft, maar wenst het beste, je kunt niet wachten op succes.

Zoals ik al zei: je moet tijd besparen. Het stroomt in één richting en kan niet worden geretourneerd! U kunt uw geld terugkrijgen of iets anders, maar er is geen tijd! Waar heb ik het over? En op het feit dat je zowel jouw tijd als die van anderen moet respecteren! U hoeft slechts een paar basisstappen te ondernemen en uw website/blog wordt veel sneller geopend en u ontvangt hiermee meer dan één bezoeker.

Laadsnelheid van de website - een belangrijke factor bij het opzetten van een site. Wij moeten op alle mogelijke manieren proberen de wachttijd van de bezoeker te verkorten. Op dezelfde manier ‘kijken’ zoekmachines naar snelheid, en als deze laag is (het laden van de site duurt lang), dan is er minder respect. En als er minder respect is, dan ben je ver van de TOP verwijderd.

Nu zullen we uitzoeken hoe verhoog de laadsnelheid van de site, maar laten we eerst eens kijken naar verschillende services waar u deze snelheid kunt controleren.

Laadsnelheid van de site controleren

1) Paginasnelheid online- online sitesnelheidscontroleservice van Google. Naast het controleren van de snelheid, biedt de dienst een lijst met aanbevelingen voor het versnellen en optimaliseren van de site. Een heel handig ding!

2) Pingdom-hulpmiddelen- een online snelheidscontroleservice die een diepe buiging verdient. De eerste keer dat ik besloot de snelheid van mijn blog te testen, gebruikte ik deze. Het geeft ook verschillende aanbevelingen en adviezen.

3) is de derde dienst die naar mijn mening aandacht verdient. Hierbij wordt de gemiddelde snelheid bepaald door het genereren van queries.

4) WebWait - schijnbaar eenvoudig, maar heel erg handige bediening. Voer het adres van uw site in een speciaal venster in, wacht een tijdje en uw resultaat is klaar. Het lijkt mij dat deze dienst de meest nauwkeurige tijd bepaalt.

Dit zijn de diensten waarvoor ik u aanbied het controleren van de laadsnelheid van de site. Heb je je site gecontroleerd? Nu is het tijd om verder te gaan met het belangrijkste: versnelling van de site .

Hoe de laadsnelheid van een website versnellen?

Het is tijd, laten we het hebben over het versnellen van het laden van websites. Waarom denk je in de meeste gevallen lage snelheid site laden? Uiteraard door alle versieringen, toeters en bellen, afbeeldingen die waar mogelijk opduiken, filmpjes etc.

Ja, natuurlijk, daarom ook, maar niet alleen. Snelheid wordt ook beïnvloed door verschillende codes, scripts, caches en dergelijke. Daarom is het noodzakelijk om dit allemaal zo goed mogelijk te optimaliseren, alles moet professioneel zijn. Hoe gaat het? - je vraagt. Het is eenvoudig, nu zal ik het je leren!

1. Beeldoptimalisatie

Het eerste wat ik wil benadrukken is dat het noodzakelijk is om afbeeldingen goed te optimaliseren. Als uw site veel verschillende afbeeldingen bevat, hoeft u ze niet allemaal te verwijderen om het laden te versnellen. U hoeft ze alleen maar correct te optimaliseren.

Dat wil zeggen dat u de grootte en het gewicht van de afbeelding moet wijzigen. Als u een afbeelding met afmetingen van 300×225 op uw website nodig heeft, maar die van u is 600×450, wijzig deze dan met een willekeurige grafische editor, Bijvoorbeeld Adobe Photoshop ().

Naast het afbeeldingsformaat moet u ook het kleinste formaat selecteren. Hoe grotere maat afbeeldingen, hoe langzamer de laadsnelheid. Vooral wie Traag internet. Probeer daarom het gewicht zo laag mogelijk te maken, maar overdrijf het niet, anders zal de kwaliteit verschrikkelijk zijn!

U moet ook de afmetingen opgeven in de afbeeldingscode, zelfs als deze is opgemaakt zoals deze is (in standaard maat), het is noodzakelijk.

2. Optimalisatie van scripts en codes

Zoals ik al zei, wordt de snelheid beïnvloed door verschillende scripts en codes. Maar niet allemaal, maar alleen degenen die met fouten of zelfs onjuist zijn geschreven.

Ik ben geen goeroe op het gebied van webprogrammering, dus ik kan je helaas niet adviseren over wat er van A tot Z moet gebeuren. Maar ik kan wel een aantal tips geven die ik zelf heb gebruikt en gebruik.

U kunt de scripts ook naar het einde van de pagina verplaatsen, in plaats van aan het begin. Waarvoor? Nou, oordeel zelf: de pagina wordt geopend en het eerste wat hij doet is verschillende scripts laden, die in het begin helemaal niet nodig zijn, en dit kost tijd! Het is beter om eerst de pagina te laten laden en daarna beginnen de scripts te laden. Op deze manier zal het veel sneller gaan.

U kunt de CSS per link inkorten en verkorten Javascript Hier. Volg gewoon de links, geef het pad naar uw bestanden op, klik vervolgens op een bepaalde knop, sla het resulterende bestand op uw computer op en upload het naar de site, bijvoorbeeld via ftp.

Er zijn er nog enkele korte codes, die lange scripts vervangen en het laden uiteraard versnellen. Maar ik zal er nu niet over praten; dat is een onderwerp voor een apart artikel. Overigens zal ik binnenkort een reeks artikelen uitbrengen over het vervangen van deze scripts, om het niet te missen raad ik je aan je te abonneren!

3. Schakel Gzip-paginacompressie in

Ik heb relatief recent over deze methode gehoord. Maar nadat ik het had geprobeerd, was ik alleen maar blij. Nadat compressie is ingeschakeld, versnelt de site aanzienlijk. Het enige negatieve is dat er een bepaalde belasting op de hosting rust.

Om Gzip-compressie in te schakelen, moet u het volgende in het .htaccess-bestand schrijven:

AddOutputFilterByType DEFLATE tekst/html tekst/platte tekst/xml-toepassing/xml-toepassing/xhtml+xml tekst/javascript tekst/css-toepassing/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0 no-gzip BrowserMatch bMSIE !no-gzip!gzip-only-text/html mod_gzip_on Ja mod_gzip_item_include bestand \.js$ mod_gzip_item_include bestand \.css$

Ik herhaal nogmaals: na het inschakelen van gzip-compressie neemt de snelheid aanzienlijk toe! Daarom mag u dit punt niet overslaan.

4. Browsercache

Velen van jullie weten wat een browsercache is. En voor degenen die het niet weten, laat het me uitleggen: dit is iets in het tijdelijke geheugen waarin alle acties die u in de browser hebt uitgevoerd, worden opgeslagen.

De cache kan dus worden gebruikt om de site te versnellen. Dat wil zeggen: voor iemand die uw site al een keer heeft bezocht, zal de snelheid hoger zijn. Alles zal “vliegen”. Maar voor degenen die voor de eerste keer hebben ingelogd, zal deze methode niet werken. En als hij opnieuw inlogt, begint alles te werken.

Om dit te laten werken, moet je het volgende in .htaccess invoeren:

ExpiresActive On ExpiresByType applicatie/javascript "toegang plus 1 jaar" ExpiresByType tekst/javascript "toegang plus 1 jaar" ExpiresByType tekst/css "toegang plus 1 jaar" ExpiresByType image/gif "toegang plus 1 jaar" ExpiresByType image/jpeg "toegang plus 1 year" ExpiresByType image/png "toegang plus 1 jaar" Headerset Cache-controle: privé Headerset Cache-controle: openbaar BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.(2)" force-no-vary

Alles is niet zo moeilijk als het lijkt. Is het niet? Hiermee wilde ik zeggen dat we nu weten hoe controleer en versnel de laadsnelheid van de website Rusland, regio Tomsk, Tomsk, +7 952 160 36 17

De laadsnelheid van een website heeft invloed op de surfervaring van gebruikers. Moderne gebruikers houden er niet van om lang te wachten totdat een websitepagina of de afzonderlijke elementen ervan volledig zijn geladen. Dienovereenkomstig verlaten mensen dergelijke sites, en dit beïnvloedt de gedragsfactor, wat op zijn beurt leidt tot een winstdaling of een lagere positie van de site in zoekmachines. Bovendien houden de zoekmachines zelf rekening met de laadsnelheid van de pagina en dit heeft in kleine mate maar nog steeds invloed op de ranking.

Hoe de snelheid van een site achterhalen?

Websitesnelheid wordt gedefinieerd als Paginasnelheid en er zijn verschillende manieren om deze indicator te achterhalen. Lees hierover meer in ons artikel.

Hoe kan ik een website versnellen zonder schade aan te richten?

Rood - heel belangrijk, Oranje - wenselijk, Groen - let op.

1. Optimaliseer uw afbeeldingen

Zoals u zich kunt voorstellen, zijn de afbeeldingen mogelijk te groot en duurt het laden te lang.

U kunt afbeeldingen het beste optimaliseren via de service van Yahoo. Deze service vermindert het gewicht van de afbeelding zonder kwaliteitsverlies en behoudt de expansie ervan. Als u hier niet tevreden mee bent, kunt u de afbeeldingen handmatig optimaliseren met behulp van Photoshop of een ander programma grafisch programma. We willen ook advies geven voor het geval u besluit de afbeeldingen zelf te optimaliseren - verslechter de kwaliteit niet zo erg dat de gebruiker walgt om naar de site te kijken. En als het optimaliseren van afbeeldingen tot dergelijke resultaten leidt, is het beter om te vertrekken alles zoals het is.

Welk formaat moet ik gebruiken? Jpg en png worden het best gebruikt, de eerste heeft een betere compressieverhouding, maar de tweede ondersteunt een transparante achtergrond.

2. Gebruik uw browsercache

Wanneer een gebruiker een pagina op uw site bezoekt, worden alle elementen (afbeeldingen, tekst, CSS-stijlen, enz.) in zijn browser geladen. Als de site de browser vertelt dat al deze elementen enige tijd op de computer van de gebruiker moeten worden opgeslagen, zal de site de volgende keer dat u dezelfde pagina (of andere pagina's op uw site) bezoekt, veel sneller laden. Omdat de browser downloadt alleen de gewijzigde gegevens en haalt de rest uit het geheugen van de browser (cache). Om caching in te schakelen, moet u de volgende code in het .htaccess-bestand schrijven:


Verloopt Actief op
ExpiresByType applicatie/javascript "toegang plus 1 maand"
ExpiresByType tekst/javascript "toegang plus 1 maand"
ExpiresByType tekst/css "toegang plus 1 maand"
ExpiresByType afbeelding/gif "toegang plus 1 maand"
ExpiresByType image/jpeg "toegang plus 1 maand"
ExpiresByType image/png "toegang plus 1 maand"

Hier is de houdbaarheid 1 maand, omdat... wij vinden het optimaal. Maar u kunt de waarden "7 dagen" of "1 jaar", enz. instellen. Het is ook vermeldenswaard dat om deze code uit te voeren, de module mod_expires.c moet zijn ingeschakeld op de hosting. En hoewel deze module op de meeste hostingsites is ingeschakeld, is het nog steeds zeldzaam om bedrijven te vinden die deze hebben uitgeschakeld. Voor een goede scriptcaching wordt het ook aanbevolen om de volgende code toe te voegen:

FileETag MTime-grootte


Verloopt Actief op
ExpiresDefault "toegang plus 1 maand"

3. Schakel gzip-archivering in

De essentie ervan is eenvoudig: wanneer een client een browserpagina probeert te bekijken, archiveert de server waarop uw site zich bevindt in feite onmiddellijk informatie en draagt ​​hij minder gegevens over aan de gebruiker dan wanneer deze gegevens had overgedragen. volledige bestanden zonder archivering. Deze gegevens worden uitgepakt in de browser van de gebruiker en hij ziet de pagina van uw site.

4. Optimaliseer uw CSS

In de regel levert dit geen significant resultaat op in termen van websitesnelheid dat merkbaar is voor de gebruiker, maar het is toch de moeite waard om CSS-bestanden te optimaliseren om de paginasnelheid te verhogen. Tegenwoordig zijn er veel diensten die dit online doen. Wees niet bang, je stijlen zullen nog steeds werken, ze worden gewoon verwijderd extra ruimtes, evenals informatie die kan worden ingekort, zal worden ingekort.

6. Probeer geen omleiding te gebruiken

Een redirect is een omleiding van de ene pagina naar de andere. Hoewel het niet veel tijd kost, wordt het toch besteed en kan het merkbaar zijn voor gebruikers en gebruikers zoekmachines. Gebruik het daarom alleen waar het echt nodig is (bijvoorbeeld bij een verhuizing van het ene domein naar het andere).

7. Asynchroon laden van JavaScript en CSS

Meestal wordt de pagina zo geladen: eerst de stijlen en scripts, en dan de hoofdinhoud. Bovendien wordt alles sequentieel (synchroon) geladen en totdat de CSS of JS is geladen, ziet de gebruiker de hoofdinhoud van de pagina niet. Daarom raden velen aan om asynchroon te doen CSS laden, JS en de hoofdinhoud van de pagina (tekst, afbeeldingen, enz.).

Wij raden u af dit in te schakelen, omdat... als het laden van een script of CSS-bestand lang duurt, zal het ook lang duren om te laden asynchroon laden. Het is alleen zo dat de gebruiker in dit geval de tekst van de pagina iets eerder zal zien, maar als hij zich tegelijkertijd haast om ergens te klikken dat JavaScript gebruikt, wat zich nog in de laadfase bevindt, zal de gebruiker hoogstwaarschijnlijk zien een fout.

Om dit te voorkomen, is het beter om uw scripts en stijlen te controleren en te optimaliseren, zodat ze sneller laden.

8. Bovenaan de pagina - bovenaan de code

Probeer de elementen die bovenaan staan ​​te behouden echte pagina site stond bovenaan de code. Dit zal effectief zijn als je dat hebt gedaan lange pagina, en de gebruiker ziet onmiddellijk de bovenkant ervan, en het onderste gedeelte wordt al geladen terwijl de gebruiker ernaar kijkt bovenste deel Pagina's.

9. Gebruik een tool van Google

Het heet Page Speed ​​- het vindt de belangrijkste problemen met de snelheid van de site en geeft advies over hoe u deze kunt oplossen.

Als je tips hebt om de sitesnelheid te verbeteren, laat ze dan achter in de reacties en we voegen ze graag toe aan het artikel. En als je vragen hebt, stel ze gerust, want... onze experts beantwoorden ze zeer snel.

De laadsnelheid van de website is een van de belangrijkste SEO-parameters voor uw artikelen. Ze zeggen dat Google meer belang hecht aan de laadsnelheid van de site dan Yandex. Maar wat ze ook zeggen, alle zoekmachines houden van snelle sites. Waarom is de laadsnelheid van een site zo belangrijk voor zoekmachines? Om het belang van deze waarde beter te begrijpen, gaan we wat dieper in op de principes van zoekrobots.

U heeft waarschijnlijk al gemerkt dat na de eerste indexering niet al uw artikelen in de zoekresultaten verschenen, maar slechts een klein deel ervan. Na de tweede indexering waren het er nog meer. Na elke volgende indexering neemt het aantal artikelen in de zoekopdracht toe. Dit gebeurt omdat alles zoek robots Ze scannen uw site niet van begin tot eind, maar slechts gedurende een bepaalde tijd die hiervoor is gereserveerd. Met een hogere laadsnelheid van de site heeft de robot de tijd om meer werk in één keer te voltooien. Dan wordt er meer materiaal in de index opgenomen.

Bij hoge snelheid De site laadt sneller en pagina's openen sneller. Dit betekent dat ongeduldige bezoekers snel toegang krijgen tot het materiaal en niet weggaan, maar ernaar kijken. Dat wil zeggen dat de gedragsfactor zal verbeteren en het aantal weigeringen zal afnemen. Wat op zijn beurt de positie van uw artikelen in de zoekresultaten verbetert.

Na de genomen maatregelen is de laadsnelheid van mijn site 3 tot 7 keer toegenomen. Tijdmetingen werden uitgevoerd na beeldoptimalisatie. En rekening houdend met de optimalisatie van afbeeldingen, neemt de laadsnelheid van de site veel meer toe. De spreiding in de cijfers suggereert dat de laadsnelheid van de site helemaal niet constant is. Bovendien hangt het er heel erg van af grote hoeveelheid factoren die voortdurend veranderen. Laten we eens kijken wat de vorming van deze waarde beïnvloedt.

Laadsnelheid van websites en wat daarop van invloed is

Reactietijd van server

Dit is het meeste belangrijke parameter. Het hangt van veel factoren af, die we nu zullen overwegen. Vaak bepaalt de responstijd van de server hoe snel uw site in het algemeen zal werken. Misschien hoeft u, nadat u alle redenen die de responstijd van de server beïnvloeden, hebt onderzocht en geëlimineerd, gewoon van host te veranderen. Dus laten we beginnen.

Zoals u al weet, bevindt de site zich op een server. De server is speciale computer, ontworpen om informatie naar alle netwerkgebruikers te distribueren. En zoals elke computer moet hij krachtig zijn. En om een ​​groot aantal gebruikers te bedienen moet het heel krachtig zijn. Normale hosters beschrijven in de regel de uitrusting van hun servers: type processor, hoeveelheid geheugen, harde soort schijf (SATA, SCSI,...), serverbesturingssysteem (Unix, Linux, Windows). En u kiest, afhankelijk van uw portemonnee of de vereisten voor de site, meer bepaald het verkeer en de hoeveelheid opgeslagen informatie, een tarief en uitrusting. Vandaar de conclusie:

1. Wat krachtigere server, hoe korter de responstijd van de server, hoe sneller de site werkt.

Als alles duidelijk is met de apparatuur, wat heeft het besturingssysteem dan te maken met de kracht van de server? Het meest directe. Unix is ​​oorspronkelijk ontworpen als een netwerk-, multitasking- en multi-user serverbesturingssysteem. Het bleek productiever te zijn dan Windows. Er waren gevallen waarin gemakkelijke vervanging besturingssysteem Windows-server op Unix resulteerde in een tweevoudige toename van de netwerksnelheid. Linux is een afgeleide van het Unix-besturingssysteem en kan vanwege de configuratie enigszins afwijken. Let daarom op het besturingssysteem. Conclusie:

2. Het beste besturingssysteem is Unix, wat de responstijd van de server aanzienlijk verbetert.

Ik zal je waarschijnlijk een vreselijk geheim onthullen. Uw site staat niet alleen op de server. Op virtuele hosting, kunnen er veel sites zoals die van u op één server staan, soms wel honderd. Dit is natuurlijk heel erg. Vanuit de computerpraktijk zal ik zeggen dat hoe minder taken een server uitvoert, hoe minder verzoeken hij verwerkt, hoe sneller hij werkt. Daarom nog een conclusie:

3. Hoe minder sites zich op één server bevinden, hoe minder verzoeken de server verwerkt snellere tijd serverreactie, hoe sneller uw site werkt.

Als ik het onderwerp verder ontwikkel wat er slecht is als er veel sites op één server staan, moet ik zeggen dat de server in de regel slechts door één met internet is verbonden netwerk kabel. Dit betekent dat alle sites één voor één informatie naar het internet verzenden, waarbij slechts één gemeenschappelijk IP-adres wordt gebruikt. Wanneer zware lading(een groot aantal verzoeken) naar een site op deze server zal de hele server vertragen. En uw site laadt langzaam. Als een IP-adres wordt geblokkeerd door een rechterlijke uitspraak, worden alle sites die zich op deze server bevinden, geblokkeerd en wordt uw site ontoegankelijk voor bezoekers. Dit leidt tot een andere belangrijke conclusie:

4. Het is beter om uw eigen speciale IP-adres te hebben. Dit verhoogt de veiligheid en snelheid van het verwerken van verzoeken die specifiek naar uw site zijn gericht, en daarmee de responstijd van de server.

De twee toevoegen laatste opnames, krijgen we een nieuwe conclusie die nog belangrijker is:

5. Het is beter om een ​​dedicated server met een dedicated IP-adres voor uw website te bestellen. Dit verhoogt de veiligheid en responstijd van de server aanzienlijk, en daarmee de prestaties van uw site.

Ja, het is duur, maar in termen van maximale veiligheid En maximale prestatie website, het is de moeite waard. (Vooral belangrijk voor sites met veel verkeer).

Dus beetje bij beetje zijn we verder gegaan dan de server zelf, maar de factoren die de responstijd van de server beïnvloeden houden daar niet op. Er zijn er nog minstens twee.

Serverlocatie (regio). Zoals u begrijpt, heeft nog niemand de waarde van de afstand van de server tot de gebruiker geannuleerd, en hoe langer deze is, hoe langer de responstijd van de server. Het zou dwaas zijn om aan te nemen dat een site die zich op een Amerikaanse of Australische server bevindt sneller op Europa zal reageren dan een site die zich op een Europese server bevindt.

Idealiter zou de server zich in het midden van de uitzendzone moeten bevinden, of in ieder geval zo dicht mogelijk bij de zone zelf. Daarom mag u regionale servers niet verwaarlozen. Dit geldt vooral vooral voor winkelsites gericht op een specifieke regio. Als u meerdere regio's wilt bestrijken, zorg er dan voor dat elke regio een eigen website heeft. Ze zullen sneller beschikbaar zijn voor kopers in hun regio. Daarom is de conclusie:

6. Wanneer u naar een specifieke regio uitzendt, kiest u een server in het midden van de regio, of zo dicht mogelijk bij de regio.

Reactietijd van DNS-server

Sites zijn toegankelijk via domeinnamen, die zijn toegewezen aan IP-adressen op DNS-servers. DNS-servers hebben hun eigen responstijd, die op een bepaald moment sterk kan variëren, afhankelijk van de congestie van communicatiekanalen. DNS-servers bij het maken van een pad naar het gewenste IP-adres communiceer met elkaar. Ze sturen het verzoek naar de server die, afhankelijk van de werkdruk, eerder reageert. Daarom is het op een bepaald moment onmogelijk om van tevoren te weten welk pad het verzoek zal volgen en hoe snel en langs welk pad het antwoord zal terugkeren. Uiteraard heeft de responstijd van de DNS-server een enorme impact op de algehele responssnelheid van de server.

Hoe langer het duurt voordat de DNS-server een verzoek verwerkt, hoe meer totale tijd serverreactie. Soms verandert deze tijd tientallen keren. Wij kunnen op geen enkele manier invloed uitoefenen op de DNS-servers. Maar aangezien NS zich op hostingservers bevindt, kan het kiezen van een goede lokale host deze impact aanzienlijk verminderen. Daarom nog een conclusie:

7. De responstijd van de DNS-server heeft grote invloed op de responstijd van de server. Het probleem wordt opgelost door een server van een lokale host te kiezen.

Nu keren we weer terug naar de server naar de site. En we zullen overwegen wat nog meer de laadsnelheid van de site beïnvloedt, maar vanuit het oogpunt software en hoeveelheden informatie.

wp-config.php-instellingen

Een kleine manier om de laadsnelheid van de site te verbeteren, is door de instellingen van het wp-config.php-bestand, dat zich in de hoofdmap van uw WordPress bevindt, enigszins te wijzigen.

We vinden de regel in het wp-config.php bestand:

definieer("WPLANG", "ru_RU");

Wij vervangen het door:

if (strpos($_SERVER["REQUEST_URI"], "wp-admin")) definiëren ("WPLANG", "ru_RU"); anders definiëren ("WPLANG", "ru_RU_lite");

Deze procedure vermindert het aantal downloads. taal instellingen alleen voor degenen die nodig zijn. Het gevolg is dat pagina’s sneller laden.

Onnodige plug-ins

Het installeren van een groot aantal plug-ins zorgt voor een enorme rommel op de site. Alle plug-ins, niet alleen actieve, worden geregistreerd in de database en zijn opgenomen in de code van elke weergegeven pagina. Daarom heeft het geen zin om onnodige plug-ins te installeren en voortdurend op te slaan. Het verwijderen van onnodige plug-ins is dat wel goede manier versnel het laden van uw websitepagina's. Plug-ins die belangrijk zijn voor de werking van de site en die periodiek worden gebruikt, moeten worden achtergelaten en alle andere moeten worden verwijderd.

Ping-backs en track-backs

Wanneer u in uw artikel een site vermeldt, probeert WordPress die site op de hoogte te stellen. Dit meldingssignaal van de site van iemand anders wordt een ping-back genoemd. Wanneer een andere site u vermeldt, ontvangt uw site een meldingssignaal. Dergelijke meldingen worden trackbacks genoemd. Ze kunnen worden uitgeschakeld in de WordPress-instellingen. Schakel in het instellingengedeelte 'Discussies' de bovenste twee selectievakjes uit, zoals in de onderstaande schermafbeelding:

Het uitschakelen van deze functies zal niet alleen uw site op geen enkele manier beschadigen, maar zal ook de belasting van de site verminderen en de hoeveelheid spam op deze kanalen verminderen.

Snel sjabloon

Sjablonen worden volledig geïmplementeerd volgens verschillende algoritmen en hebben verschillende instellingen en kansen. Sommige onderwerpen kunnen klein zijn, andere groot. Sommige WordPress-thema's kunnen erg snel zijn, met sterk geoptimaliseerde code, terwijl andere precies het tegenovergestelde zijn. Let bij het kiezen van een sjabloonthema op de laadsnelheid van de demopagina. Dit geeft je een idee van hoe dit onderwerp heeft invloed op de algehele laadsnelheid van uw site. U kunt gratis thema’s op uw website of op een lokale server bekijken.

Een sjabloon instellen

1. Maximaal het verminderen van het aantal widgets. We verwijderen widgets "Archieven", " Recente inzendingen", "Recente reacties", "Populaire berichten", "Meta". Als je dat al hebt gedaan goed menu, dan verwijderen we ook de widget “Categorieën”. U kunt de widget "Tag Cloud" alleen verlaten als u deze echt nodig heeft. Deze procedure vermindert het aantal zoekopdrachten naar de database, vermindert de hoeveelheid code voor al uw pagina's en vermindert het aantal links op alle pagina's in het algemeen sterk, en vermindert ook het aantal links naar duplicaten van uw pagina's. Dat is erg handig. Feit is dat archieven, categorieën en tags nieuwe URL’s vormen voor uw berichten, maar met dezelfde inhoud. Hierover wordt voldoende gedetailleerd geschreven in SEO-instellingen plug-ins, in het bijzonder .

3. Maak het gemakkelijk uitvoerpaginaformaten. Zeer grote artikelen verdelen wij in pagina’s met behulp van een tag.

4. Verminderen aantal weergegeven reacties. Als er actief op uw artikelen wordt gereageerd, mag u niet meer dan 50 reacties onder het artikel weergeven. Gebruik paginawisseling tussen reacties. Geef de instellingen op in "Discussie-instellingen".

Beeldoptimalisatie

We verminderen het volume van alle foto's die beschikbaar zijn op de site. Als je afbeeldingen hebt PNG-formaat, formatteer ze opnieuw naar JPG. JPG-bestanden formaat is veel kleiner van formaat. Maar JPG kan ook worden gecomprimeerd. Beeldcompressie kan 30-70% bereiken, waardoor u het paginaformaat 2-3 keer kunt verkleinen. Dienovereenkomstig zal de laadsnelheid van de pagina met hetzelfde bedrag toenemen. De eenvoudigste en De beste manier Om deze bewerking uit te voeren, moet u de laadsnelheid van de site controleren op developers.google.com/speed/pagespeed/insights/.

Nadat u de pagina heeft getest, vindt u onder de testresultaten en onder het item 'Optimalisatietechnieken geïmplementeerd' de regel 'Download geoptimaliseerde afbeeldingen, JavaScript en CSS-bronnen voor deze pagina'. Klik op de link en download het archief al vanaf gecomprimeerde afbeeldingen, JavaScript- en CSS-bestanden. Je pakt het uit. Bekijk de testresultaten om te zien wat waar is en kopieer de bestanden naar hun plaatsen op de site. Zo sla je drie vliegen in één klap. Maar de waarheid is niet allemaal tegelijk. Deze procedure moet voor elke pagina afzonderlijk worden uitgevoerd.

Als er veel pagina's op de site zijn en nog meer afbeeldingen, en deze methode is niet geschikt, dan kunt u de WP Smush-plug-in gebruiken. Het is goed omdat u hiermee niet alleen nieuw geüploade afbeeldingen naar de site kunt optimaliseren, maar ook massa-optimalisatie kunt uitvoeren van alle afbeeldingen die op de site beschikbaar zijn. Is het waar gratis versie doet dit in delen, maar het is veel eenvoudiger dan de vorige methode.

Bulkoptimalisatie van alle afbeeldingen op de site kan worden gedaan met behulp van een plug-in WordPress-optimalisatie Webcraftic Clearfy.

Een andere manier om de laadsnelheid van afbeeldingen te optimaliseren. Als het beeld erg is Groot formaat, en het moet in een klein formaat worden weergegeven, dan is het beter om een ​​kopie van een klein formaat te maken en dit precies weer te geven.

JavaScript- en CSS-optimalisatie

De hierboven beschreven JavaScript- en CSS-optimalisatiebewerking zorgt voor enige volumekrimp door het aantal spaties en opmerkingen te verminderen, maar lost niet alle problemen op die ze veroorzaken. JavaScript en CSS in de siteheader vertragen het laden van site-inhoud aanzienlijk. Dit gebeurt omdat wanneer JavaScript-verzoek of CSS worden de bestanden niet alleen geladen, maar ook uitgevoerd. Gedurende deze tijd wordt het laden van de pagina opgeschort. En hoe meer bestanden er zijn, hoe groter hun volume, hoe langzamer ze het laden van de site vertragen. Om het laden van de website te versnellen, heb je alles nodig JavaScript-bestanden en CSS gecombineerd in één bestand en verplaatst naar het einde van de pagina. De Autoptimize-plug-in kan deze taak perfect aan. Bovendien optimaliseert het ook de HTML-code van uw site (haalt commentaarteksten uit de code).

WordPress-databaseoptimalisatie

De kern van WordPress is een database die alles over uw site registreert: Domeinnaam, URL, sitenaam, titel van artikelen, hun inhoud, adressen van fotolocaties, opmerkingen en alles, alles, alles... Bij het schrijven van artikelen worden tussenkopieën (revisies) opgeslagen, waarvan er veel kunnen zijn. De meeste plug-ins voegen, wanneer ze geactiveerd en actief zijn, hun tabellen toe aan de database. En nadat ze zijn uitgeschakeld, blijven deze tabellen verlaten. Als gevolg hiervan raakt de database opgeblazen en neemt de snelheid van het verwerken van verzoeken ernaar uiteraard af. Daarom is het noodzakelijk om de database periodiek op te schonen en te optimaliseren. Een van de plug-ins WP-Optimize, Wp-DBManager, Optimize Database after Deleting Revisions, WPDBSringClean zal dit werk snel en efficiënt doen.

Het aantal databasequery's verminderen of een sjabloon bewerken

De code van de weergegeven pagina wordt gegenereerd op basis van de resultaten van zoekopdrachten naar de database. Hoe meer er zijn, hoe langzamer de pagina wordt gevormd. U kunt het aantal zoekopdrachten naar de database verminderen en dienovereenkomstig de laadsnelheid van de site verhogen door de PHP-code waar mogelijk te vervangen door kant-en-klare HTML-code. In de regel kan dit worden gedaan op plaatsen waar permanent, onveranderlijk materiaal aanwezig is. Om dit te doen, moet u enkele wijzigingen aanbrengen in uw werksjabloonbestanden.

Open het header.php-bestand van uw sjabloon in teksteditor, bij voorkeur Notepad++ (kan worden gebruikt in AkelPad of phpDesigner).

1. Geef de codering op. Gebruikt u UTF-8 op uw website, dan doen wij dit.

We zijn op zoek naar de code die verantwoordelijk is voor het coderen van de inhoud:
>

;tekenset=" />

vervangen door:



We hebben dus 3 verzoeken in één keer weggewerkt.

2. Specificeer de directe adressen van de locatie van stijlbestanden. We zijn op zoek naar de code die verantwoordelijk is voor stijlen:
" type="text/css" media="scherm, projectie" />

of zoals dit:

In werkelijkheid kunt u meerdere stijlbestanden hebben. Je kunt bepalen welke adressen ze hebben in de browser, bijvoorbeeld in Google Chrome, open de site en druk op de toetscombinatie “Ctrl+U”. Kopieer een deel van de code:
rel="stylesheet"

en plak het in het zoekvak op de geopende pagina. De codes voor de benodigde adressen staan ​​tussen de driehoekige haakjes.
Je voegt ze volledig in header.php in.

De coderegel zou er ongeveer zo uit kunnen zien:

of dit als het bestand niet in de WordPress-hoofdmap staat:

3. Wij zijn op zoek naar de pinbackcode. Nog 1 verzoek. Het meest waarschijnlijke bestand dat u kunt vinden is Themer.php:
" />

Wij vervangen het door:

4. We zijn op zoek naar de RSS-feedcode. Nog 2 verzoeken. Het meest waarschijnlijke bestand dat u kunt vinden is Themer.php:
RSS-feed" href="" />

Wij vervangen het door:

5. Indien aanwezig verzoek om favicon-adres weer te geven, corrigeren we het ook nauwkeurig naar het favicon-adres. Min nog 1 verzoek.

6. Vaak voegen sjabloonontwikkelaars in de voettekst van de site (footer.php) query's toe aan de database die wordt weergegeven
Naam van de site(1 verzoek):

siteadres en sitenaam(2 verzoeken):
optie("site_titel"); ?>

Om onnodige oproepen naar de database te voorkomen, voeren we de naam en het jaartal eenmalig handmatig in.
Indien nodig linken we naar de hoofdpagina en dat is alles.

In totaal hebben we dus het aantal zoekopdrachten naar de database met ongeveer 15 teruggebracht. Dit is helemaal niet slecht.

Kleine tips om het laden van websites te versnellen

1) Als uw site geen reacties gebruikt, het is niet nodig om ze te verbergen met behulp van plug-ins, dit zorgt alleen maar voor extra belasting op de server. Het is beter om het op deze manier te doen. Als u opmerkingen alleen op bepaalde pagina's of artikelen wilt uitschakelen, opent u het gewenste artikel in de editor. In de rechterbovenhoek bevindt zich een knop "Scherminstellingen". Klik erop en schakel het selectievakje naast het blok 'Opmerkingen' uit. Daarom schakelen we de uitvoer van het commentaarblok voor een specifiek artikel of pagina uit.

Als je nergens commentaar nodig hebt, verwijder dan gewoon de volgende code uit het themabestand (single.php):

2) Probeer geen externe scripts te gebruiken, zoals opmerkingen van VKontakte of widgets van sociale netwerken. Ja, het ziet er erg mooi en indrukwekkend uit, maar het vermindert de laadsnelheid van de site aanzienlijk.

3) Alles aanvullende codes, scripts vergelijkbaar met tellers van Live Internet, Google Analytics, Yandex Metrica moet in de voettekst van de site worden geplaatst, zodat ze, net als andere scripts, pas als laatste worden geladen. Om dit te doen, mag u geen gespecialiseerde plug-ins gebruiken die meters verbinden. Ze zijn te omvangrijk en dienen voor reclamedoeleinden in plaats van alleen maar meters aan te sluiten. Als de sjabloon een speciaal veld in de instellingen heeft voor het invoeren van een code in de voettekst, dan is het beter om dit te gebruiken of, als laatste redmiddel, een plug-in voor het invoeren van code in de voettekst, zoals "Kop- en voetteksten invoegen".

4) Er zijn nog steeds veel kleine dingen in WordPress zelf en plug-ins die niet worden gebruikt of niet correct werken. Gebruik de plug-in om ze uit te schakelen Webcraftic Clearfy. Automatische instellingen schakelen standaard alleen die functies uit die geen gevaar opleveren. Al het andere kan worden uitgeschakeld met behulp van handmatige instellingen. Wees voorzichtig. Sommige instellingen kunnen functies uitschakelen die voor u belangrijk zijn.

Gzip-compressie

Om de omvang van alle statische gegevens verder te verkleinen, moet u compressie op de server inschakelen, de zogenaamde Gzip-compressie. Indien mogelijk is het beter om deze handeling uit te voeren in het beheerderspaneel van de host in cPanel in het gedeelte Websiteoptimalisatiesoftware. Of voeg de code toe aan het .htaccess-bestand:

# Dynamische compressie van tekst, html, javascript, css, xml voor de Apache-server: AddOutputFilterByType DEFLATE tekst/html tekst/platte tekst/xml-toepassing/xml-toepassing/xhtml+xml tekst/css tekst/javascript-toepassing/javascript-toepassing/x-javascript

U kunt controleren hoe gzip-compressie werkt op de service www.gidnetwork.com/tools/gzip-test.php

Als u het resultaat niet kunt verkrijgen, wist u eerst de cache van uw browser. Als dit niet helpt, is deze versie van de code misschien niet voor u geschikt. U kunt een licht gewijzigde versie van de code proberen:

AddOutputFilterByType DEFLATE tekst/html tekst/platte tekst/xml-toepassing/xml-toepassing/xhtml+xml tekst/javascript tekst/css-toepassing/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0 no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html mod_gzip_on Ja mod_gzip_item_include bestand \.js$ mod_gzip_item_include bestand \.css$

Dynamische compressie vindt plaats bij elk verzoek voor welke pagina dan ook en is alleen effectief als er weinig bezoekers zijn. Zodra het aantal bezoekers buiten de schaal begint te vallen, wordt de server overbelast met constante verzoeken om compressie en begint deze te vertragen. Dit is waar statische compressie te hulp komt. Dit betekent dat van alle dynamische pagina's statische kopieën moeten worden gemaakt. Deze procedure wordt statische caching op de server genoemd. Caching zelf zorgt al voor een aanzienlijke versnelling, omdat een groot aantal zoekopdrachten naar de database wordt geëlimineerd. Deze statische kopieën moeten worden gecomprimeerd met 7-Zip en naar de server worden geüpload. Stuur vervolgens alle verzoeken om naar gecomprimeerde bestanden. De code in het .htaccess-bestand helpt dit probleem op te lossen:

Statische compressiecode voor nginx-server:

#Gzip-compressie inschakelen
AddEncoding gzip .gz


Herschrijfregel ^(.*)$ $1.gz


Koptekst toevoegen Varieer User-Agent

ForceType-tekst/javascript




ForceType tekst/css
Headerset Inhoudscodering: gzip
Headerset Cache-controle: privé

/Einde van code voor nginx

Statische compressiecode voor Apache-server:

# Omleiden naar gzip-bestanden
AddEncoding gzip .gz

ForceType-tekst/javascript
Headerset Inhoudscodering: gzip


RewriteEngine Aan

RewriteCond %(HTTP:Accept-Encoding) gzip
RewriteCond %(REQUEST_FILENAME).gz -f
RewriteRule (.*)\.js$ $1\.js.gz [L]
ForceType-tekst/javascript


ForceType tekst/css
Headerset Inhoudscodering: gzip


RewriteEngine Aan
RewriteCond %(HTTP_USER_AGENT) !".*Safari.*"
RewriteCond %(HTTP:Accept-Encoding) gzip
RewriteCond %(REQUEST_FILENAME).gz -f
RewriteRule (.*)\.css$ $1\.css.gz [L]
ForceType tekst/css

/Einde van code voor Apache

Caching aan de serverzijde

Caching aan de serverzijde is een van de meest effectieve manieren om de laadsnelheid van websites te verbeteren. De code in .htaccess werkt niet altijd. Daarom is de beste optie om deze bewerking uit te voeren het gebruik van caching-plug-ins. De beste gratis plug-ins: WP Super Cache, W3 Total Cache, WP Fastest Cache, Hyper Cache. Alle plug-ins zijn multifunctioneel. De eenvoudigste en snelste wpFastestCache.

Caching aan browserzijde

Bezoekers, die vaak iets belangrijks of interessants hebben gevonden, sluiten de pagina en herinneren het zich na een tijdje en keren terug. Om te voorkomen dat deze pagina opnieuw vanaf de server wordt geladen, kunt u de browser opdracht geven deze uit de cache te laden. Dit vermindert de belasting van de server verder en verhoogt de laadsnelheid van de site aanzienlijk. Om dit te doen, moet u code toevoegen aan het .htaccess-bestand. Deze functie kan op twee manieren worden geïmplementeerd.

De eerste methode is het gebruik van de mod_headers.c module:



# Alle html- en htm-bestanden worden één dag in de browsercache opgeslagen

Headerset Cache-Control "max-age=86400"

# Alle css-, javascript- en tekstbestanden worden een maand lang in de browsercache opgeslagen



# Alle Flash-bestanden en afbeeldingen worden een maand lang in de browsercache opgeslagen

Headerset Cache-Control "max-age=2592000"

# Schakel caching van php en andere servicebestanden uit

Koptekst uitgeschakeld Cache-Control

De tweede methode gebruikt de module mod_expires.c

# Schakel cache in de browsers van bezoekers in
FileETag MTime-grootte


Verloopt Actief op
ExpiresDefault "toegang plus 1 jaar"

Beide methoden werken behoorlijk, ze verschillen alleen qua besturingsmogelijkheden. In het eerste geval wordt de cachingtijd opgegeven in seconden. In het tweede geval: uren, dagen, weken, maanden en zelfs jaren.

Een CDN-netwerk gebruiken

Een andere manier om het laden van de site te versnellen en de belasting van de server aanzienlijk te verminderen, is door een CDN-netwerk te gebruiken, Content Delivery Networks. Dit is een netwerk van cachingservers verspreid over continenten, landen en steden. Nadat u uw site in een dergelijk netwerk heeft geregistreerd, worden alle statische bestanden geüpload naar alle servers van dit netwerk in verschillende steden en landen. Elke keer dat een gebruiker materiaal van uw site opvraagt, ontvangt hij dit vrijwel onmiddellijk, niet van de server van uw host, maar van de dichtstbijzijnde CDN-server, die zich misschien heel dicht bij zijn locatie bevindt. Op deze manier wordt de belasting van uw site vrijwel volledig weggenomen, ongeacht het aantal bezoekers, en wordt de laadsnelheid van de site de maximaal mogelijke en is afhankelijk van de kracht van de kanalen en servers van de CDN-serviceprovider.

Deze dienst is uiteraard niet gratis, maar elk netwerk heeft redelijk goedkope, gemakkelijke tarieven of gratis proeftarieven met minimale mogelijkheden. Bijna alle netwerken zijn buitenlands en hun servers bevinden zich buiten Rusland. Maar alle grenslanden hebben minstens één server. Er is een klein netwerk "WEB SUPPORT REVOLUTION". Het heeft servers in 47 steden in 31 landen. Bovendien alleen op het grondgebied van Rusland in St. Petersburg, Moskou, Tsjeljabinsk, Novosibirsk, Tomsk, Khabarovsk, maar ook in het nabijgelegen Kharkov, Kiev, Minsk, Vilnius. Met dit netwerk kunt u alleen de eerste site gratis verbinden. Als u per ongeluk de verbinding verbreekt, moet u verder betalen. Maar het effect is gewoon geweldig! Ik heb het zelf gecontroleerd. Dus je kunt het proberen. Alleen als u https heeft, moet u het certificaat verbinden met hun server.

Je kunt ook de Jetpack Photon-plug-in gebruiken, die het mogelijk maakt om het gratis Photon CDN-tarief te gebruiken om alleen afbeeldingen van je site te downloaden, maar dit is niet genoeg. Om dit te doen, hoeft u zich alleen maar te registreren op WordPress.com. De plug-in is vooral goed in het optimaliseren van pagina’s voor mobiele clients. Deze plug-in is gemaakt als vervanging voor vele andere plug-ins. Als u daarom al plug-ins gebruikt die de functies van Jetpack dupliceren, moet u de ene laten staan ​​en de andere uitschakelen. Anders zal niet alleen de belasting van de server toenemen, maar ook de kans op een conflict tussen vergelijkbare programma's. Over het algemeen doet Jetpack zijn werk heel goed.

Nadat u alle bovenstaande procedures heeft voltooid, wordt uw site veel sneller geladen, ongeacht op welke server of host deze zich bevindt. De downloadsnelheid kan toenemen van meerdere keren tot enkele tientallen keren. Het gebruik van een CDN verhoogt niet alleen de laadsnelheid van uw website aanzienlijk, maar lost ook serverbelastingsproblemen op en voorkomt tegelijkertijd de noodzaak om over te stappen naar een duurder hostingpakket.