Versnel het laden van pagina's. Juiste plaatsing van CSS en JS

Allereerst heeft de downloadsnelheid invloed gedragsfactoren: browsediepte en aantal bounces. Snelle sites hebben hogere conversiepercentages. Succes hangt indirect ook af van snelheid zoekmachine promotie: terwijl al het andere gelijk is .

• Google-ingenieurs ontdekten dat de gebruiker zelfs een triviale laadvertraging opmerkt: 0,4 seconden;
• Het is waarschijnlijk dat een gebruiker een pagina verlaat als het laden meer dan 3 seconden duurt;
• Mobiele gebruikers zijn bereid iets langer te wachten: 6-10 seconden;
• 79% van de onlinewinkelgebruikers zal geen herhalingsaankoop doen als het de eerste keer lang duurde om de site te laden.

Vertegenwoordigers zakelijke krant voerde een experiment uit met de nieuwe website van de publicatie.

De deelnemers werden in twee groepen verdeeld. De eerste, de besturing, bekeek pagina's met normale laadsnelheid en de tweede - met een vertraging van vijf seconden. Aan de tweede fase namen al vier groepen deel: een controlegroep en nog drie, waarvan de deelnemers een vertraging van één, twee en drie seconden ‘kregen’. De kijkdiepte tijdens de sessie werd genomen als het conversiepercentage (we hielden rekening met gebruikers die minstens twee pagina's bezochten) en berekenden het verschil tussen geconverteerde gebruikers in elke groep.

Bij het bezoeken van twee pagina's is het verschil tussen de grafieken niet merkbaar, maar bij het bezoeken van drie of meer pagina's is een geleidelijke afname van alle laadlatentie-opties merkbaar - en hoe groter de kijkdiepte, hoe groter het verschil. Maximaal lage snelheden Met een vertraging van drie en vijf seconden was het conversiepercentage 7,5% en 11% lager vergeleken met de controlegroep.

Hoe langer de laadvertraging, hoe minder pagina's er per sessie worden bekeken. Het resultaat van het onderzoek laat zien hoe belangrijk laadsnelheid is voor gebruikersbetrokkenheid en uiteindelijk voor conversie.

De downloadsnelheid kan worden gemeten met behulp van deze services:

Gebruik gzip-compressie, dit verkort de tijd die nodig is om bestanden naar de browser over te zetten. Het volume van de overgedragen gegevens zal 4-5 keer afnemen en de downloadsnelheid zal toenemen.

Om gzip-compressie in Nginx in te schakelen, wijzigt u de serverconfiguratie en voegt u deze regels toe:

Server ( .... gzip aan; gzip_disable "msie6"; gzip_types tekst/platte tekst/css-toepassing/json-toepassing/x-javascript tekst/xml-toepassing/xml-toepassing/xml+rss tekst/javascript-toepassing/javascript; )

Zorg er eerst voor dat de mod_deflate-module is ingeschakeld. Hierna moet u de volgende regels toevoegen aan het .htaccess-bestand:

AddOutputFilterByType DEFLATE tekst/plain AddOutputFilterByType DEFLATE tekst/html AddOutputFilterByType DEFLATE tekst/xml AddOutputFilterByType DEFLATE tekst/css AddOutputFilterByType DEFLATE toepassing/xml AddOutputFilterByType DEFLATE toepassing/xhtml+xml AddOutputFilterByType DEFLATE toepassing/rss+xml AddOutputFilter ByType DEFLATE toepassing /javascript AddOutputFilterByType DEFLATE-toepassing/x - javascript

Gzip ondersteunt compressieniveaus van 1 tot en met 9. In Nginx kan dit als volgt worden aangepast:

Gzip_comp_level 5;

Het optimale compressieniveau is 5.

Verwijder niet benodigde afbeeldingen. Gebruik waar mogelijk tekst in plaats van duidelijk zwaardere afbeeldingen.

Formaat JPG is beter Alleen geschikt voor foto's. PNG verdient de voorkeur voor andere website-elementen (pictogrammen, illustraties, enz.), op voorwaarde dat de afbeeldingen op de juiste manier zijn gecomprimeerd. Houd er rekening mee dat de site op verschillende apparaten en in verschillende browsers wordt bekeken.

U kunt één schaalbare afbeelding gebruiken, maar deze neemt veel ruimte in beslag en vertraagt ​​het laden van de pagina. Het is beter om meerdere afbeeldingen te gebruiken die zijn aangepast aan de verschillende apparaten zodat de browser downloadt wat je nodig hebt - dit kan gedaan worden met behulp van de Imager-plug-in. Het vervangt tijdelijke aanduidingen transparante afbeeldingen, haalt het src-attribuut op voor elk en wijst het toe juiste maat, waarna u alleen nog maar verschillende afbeeldingsopties van verschillende formaten hoeft te uploaden.

Hoe het werkt:

new Imager((beschikbare breedtes: ));

U kunt afbeeldingen comprimeren met behulp van de functie om webpagina's op te slaan in grafische editors of de services PunyPNG, TinyPNG en anderen.

Dit punt weerspiegelt het vorige. Eén manier om het aantal browserverzoeken te verminderen, is door enkele elementen van de pagina te verwijderen.

Gebruik CSS-sprites - grafische bestanden, met meerdere afbeeldingen tegelijk. Dit is de beste manier als de site veel kleine afbeeldingen en pictogrammen bevat. Combineer meerdere CSS- en JS-bestanden in één, dit vermindert het aantal HTTP-verzoeken.

Om het aantal browserverzoeken in Chrome te zien, ga naar Developer Tools (Instellingen → Extra hulpmiddelen) en ga naar het tabblad Netwerk.

Configureer de server zo dat de browser van de gebruiker gegevens in het cachegeheugen opslaat. In dit geval worden bij het eerste bezoek aan de site sommige pagina-elementen (afbeeldingen, CSS- en JS-bestanden) automatisch opgeslagen. De volgende keer zal de browser geen tijd verspillen met het laden ervan.

Deze methode helpt echter alleen om de laadsnelheid te verhogen bij herhaalde bezoeken aan de site.

Gebruik de headersmodule van de Apache-webserver, die de headers van HTTP-verzoeken en HTTP-antwoorden beheert en wijzigt. De browser downloadt van de server naar lokale cache gegevens die zelden veranderen, en wanneer u een site bezoekt, worden deze uit de cache geladen. U kunt ook bestanden in de cache opslaan bepaalde types op specifieke tijd, waarna ze opnieuw van de server worden gedownload.

Dit kan als volgt worden gedaan:

Headerset Cache-Control “max-age=1234000”

Specificeer noodzakelijke uitbreidingen bestanden in de FilesMatch-constructie, waar de Cache-Control-header en de max-age-variabele voor worden ingesteld, met behulp waarvan de bestandsopslagtijd in seconden wordt gespecificeerd. De bestanden die niet in de cache hoeven te worden opgeslagen, worden eenvoudigweg niet in de lijst opgenomen.

U kunt het cachen van bestanden ook uitschakelen. Voeg de volgende code toe aan .htachess, nadat u hebt opgegeven welke bestandstypen u niet in de cache wilt opslaan:

Koptekst uitgeschakeld Cache-Control

U kunt de caching ook beheren met behulp van de vervalmodule. Het regelt de instelling van HTTP-cachingheaders door de browser. Geef de gegevensopslagperiode op, afhankelijk van het tijdstip vanaf laatste wijziging bestand of vanaf de toegangstijd van de client.

Bijvoorbeeld zoals dit:

ExpiresActive On ExpiresDefault “toegang plus 2 maanden” ExpiresByType image/png “toegang plus 4 maanden” ExpiresByType image/swf “toegang plus 4 maanden”

ExpiresByType tekst/html “toegang plus 2 maand 14 dagen 7 uur” ExpiresByType afbeelding/gif “wijziging plus 8 uur 3 minuten”

Speciale services voor het vereenvoudigen van JavaScript en CSS verwijderen “extra” tekens (spaties, opmerkingen) uit de code en verkorten de laadtijd. Ze kunnen efficiënter zijn dan standaard gzip-compressie voor hogere snelheid. Google raadt CSS-bestanden aan kleine maat rechtstreeks in een HTML-document plakken.

U kunt gebruik maken van deze diensten:

Plaats CSS-bestanden aan het begin van de pagina en JS-bestanden aan het einde.

Als er CSS-bestanden in de header staan, wordt de pagina geleidelijk weergegeven, waardoor een positieve indruk van de site ontstaat. Door JS-bestanden onderaan de pagina te plaatsen, kan de browser eerst de pagina-inhoud laden en pas daarna de scripts afhandelen.

Veel plezier met instellen!

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 een bezoeker zal wachten tot uw site is geladen, maar ook op de 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 bijgevolg meer geld hier 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.

Dit artikel neemt trouwens deel aan de TOP-10-competitie van Sergei Shelvin met een prijzengeld van $ 500!

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 aanmaakt, 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 de volgende regels toevoegen aan het .htaccess-bestand in de hoofdmap van de site:

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. Daarom, als je bent veranderd css-inhoud of javascript-bestand 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 dat u hoeft te doen is de benodigde afbeeldingen uploaden, en de service zelf zal ze optimaliseren en een link bieden om de reeds gecomprimeerde bestanden te downloaden.

Hier zijn verschillende online services voor beeldoptimalisatie:

• www.compress-online.com (met dank aan Mary_T voor de link)

9. Schaal afbeeldingen niet

Pas het formaat van de afbeelding niet aan met behulp van de breedte- en hoogtekenmerken van de tag , of gebruik CSS. 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 grafische editor Photoshop, of iets 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 een proxyserver of gewoon op schijf), dan is de verbinding algemeen geval slaagt erin om 3-4 keer sneller vrij te geven.

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 zo'n header in een verzoek ziet, kan hij 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 applicatie/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 voor clientoptimalisatie op te sommen om de laadsnelheid van een webpagina te verhogen. Naast clientoptimalisatie bestaat 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!

Een van de meest belangrijke aspecten uw website is de laadsnelheid; gebruikers willen direct een foto ontvangen, zonder enige vertraging, en als je ze die niet kunt geven, zullen ze zonder aarzeling elders informatie zoeken. In dit artikel bespreken we 5 manieren om de laadtijd van uw website te versnellen.

Als u weet hoeveel tijd het kost om pagina's te laden, kunt u probleemgebieden identificeren. Dit geeft je ook nog een stimulans om in de functionaliteit te duiken en te proberen de situatie te corrigeren.

Voordat we beginnen, moet je YSlow installeren, als je dat nog niet hebt gedaan. YSlow is een uitbreiding op Mozilla Firefox, die u op deze pagina kunt vinden:

Laten we nu een website openen. Laten we zeggen zes herzieningen, zodat we ongeveer dezelfde gegevens hebben (open deze site gewoon in een nieuw tabblad in uw browser).

Aan de onderkant rechter zijde uw browser heeft u een speciaal paneel met een pictogram (zie figuur 1). Iets verder weg van dit paneel, nadat de pagina is geladen, ziet u naast ‘YSlow’ een nummer. Dit getal is de tijd die deze pagina nodig heeft om in seconden in uw browser te laden. We moeten gegeven nummer er was zo weinig mogelijk.

De meest voorkomende “vertragers” zijn de volgende objecten of bewerkingen:

• Te veel HTTP-verzoeken
• Niet gecomprimeerde bestanden JavaScript
• Geen header-time-out voor grafische bestanden

We zullen hier binnen een paar minuten dieper op ingaan.

Om vertrouwd te raken met dit systeem, doorloopt u verschillende sites en bekijkt u hun laadtijden. U kunt Google, Facebook en een aantal van uw favoriete blogs/sites testen die u het vaakst bezoekt. Houd er rekening mee dat JavaScript-bestanden en afbeeldingen de snelheid het meest beïnvloeden.

Naast het berekenen van de laadtijd van de pagina, gebruikt YSlow deze uitbreiding geeft u ook geavanceerde informatie over wat u moet oplossen om het laden van uw site te optimaliseren, zodat u de gaten kunt dichten.

Voor vergelijkbare informatie klikt u op het tabblad Prestaties. Na het scannen van de site geeft YSlow u algemene beoordeling, wat de prestaties van uw pagina zal kenmerken.

De toegang tot informatie kan worden versneld met behulp van een CDN (Content Delivery Network). CDN kan het beste worden gebruikt voor grote websites. Ze worden gebruikt om informatie via verschillende servers te verspreiden verschillende delen vrede. Op deze manier wordt informatie gedownload van de juiste server (die zich het dichtst bij de gebruiker bevindt), zodat deze niet via persoonlijke routers gaat. YSlow houdt ook CDN-verzoeken bij.

Maar mensen gebruiken CDN in de regel niet (wat behoorlijk duur is).

Laten we nu elk item in de bovengenoemde extensie bekijken. Vervolgens zul je vinden samenvatting de criteria waarop uw pagina's worden beoordeeld en hoe u problemen kunt oplossen om maximale prestaties te bereiken.

Doe zo min mogelijk HTTP-verzoeken: Een HTTP-verzoek vindt plaats wanneer de browser een verzoek naar de server verzendt. Hetzelfde kan gebeuren bij het verbinden van scripts, CSS-bestanden, afbeeldingen en ook wanneer asynchrone verzoeken, zowel vanaf de clientzijde als vanaf de serverzijde (Ajax en andere soortgelijke technologieën). Als het echter om de systeemprestaties gaat, is het de moeite waard om na te denken over hoeveel van deze verzoeken op uw pagina plaatsvinden. Als oplossing kunt u caching gebruiken om clientmachines te helpen scripts, CSS en afbeeldingen sneller te laden.

Expires-headers toevoegen: 80% van de paginabelasting is gericht op het downloaden van scripts, foto's en CSS-bestanden. In de meeste gevallen veranderen deze dingen niet op gebruikersmachines. Door een beetje code aan uw .htaccess-bestand toe te voegen, kunt u dubbele bestanden in de cache opslaan op de lokale computer van de gebruiker (we zullen later bespreken hoe u dit kunt doen).

Gzip-componenten: toepassing van Gzip of compressie van JS-bestanden, afbeeldingen, HTML-documenten, CSS-bestanden, enz. stelt gebruikers in staat informatie in een kleiner formaat te downloaden, waardoor de laadsnelheid van de pagina aanzienlijk wordt verhoogd. Bovendien bespaart dit ruimte op de server, maar het uitpakken van gegevens kan leiden tot een vertraging van de reactie en is rechtstreeks afhankelijk van de browser van de gebruiker.

Plaats CSS bovenaan de pagina: Als je de verbinding met CSS-bestanden bovenaan de pagina plaatst, betekent dit dat deze eerst worden geladen, en afbeeldingen en scripts later.

Plaats JS onderaan de pagina: Nu uw CSS-bestanden bovenaan worden geladen, is het tijd om de JS-scripts vlak voor de afsluitende tag te plaatsen. Hierdoor kan uw pagina worden weergegeven en vervolgens de benodigde scripts worden ingeschakeld.

Vermijd CSS-expressies: persoonlijk heb ik nooit CSS-expressies gebruikt (ook wel dynamische eigenschappen genoemd). Deze uitdrukkingen zijn eigen programmeerconcepten voor IE (zoals voorwaardelijke uitdrukkingen) in CSS. De technologie die in IE8, en inderdaad in alle andere versies, wordt gebruikt, wordt niet meer ondersteund, dus je zult het hier in ieder geval mee moeten opgeven CSS schrijven uitdrukkingen. PHP is geschikter voor soortgelijke doeleinden, bijvoorbeeld om verschillende CSS-stijlen te laden, afhankelijk van een bepaalde voorwaarde, zoals willekeurig nummer, tijdstip of gebruikersbrowser.

Schrijf JS en CSS erin aparte bestanden: als u uw scripts in JS plaatst en CSS-stijlen in afzonderlijke bestanden kan de browser ze eenvoudig in de cache opslaan, waardoor uw pagina vervolgens sneller kan worden geladen.

Verkort de DNS-opzoektijd: wanneer een gebruiker de naam van uw site in de browser typt, begint er onmiddellijk een DNS-zoekopdracht naar het IP-adres waar uw site zich bevindt. Hoe meer uw site bevat externe bronnen, hoe langer de DNS-zoekopdracht duurt. In de regel duurt zo'n zoekopdracht 60-100 milliseconden.

JS verkleinen: naast gzip-compressie kunt u met het verkleinen van JavaScript-bestanden uw scripts vereenvoudigen door onnodige spaties, tabs en andere speciale tekens, die samen de bestandsgrootte vergroten. Dit is duidelijk: hoe kleiner de bestanden, hoe sneller de pagina's worden geladen. Om JavaScript-bestanden te verkleinen, kunt u de JSMIN-tool gebruiken.

Vermijd omleidingen: het maakt niet uit waar u de omleiding uitvoert, in JS, HTML of PHP. In beide gevallen ontvangt uw browser een header met lege pagina, wat tijd nodig heeft om te laden. Probeer dus geen omleiding te gebruiken waar deze kan worden vermeden.

Vermijd het dubbel laden van scripts: Als uw browser een script meer dan één keer laadt, heeft dit een aanzienlijke invloed op het laden van de pagina. De wiskunde hier is niet ingewikkeld. Hoe meer downloads dezelfde bestanden, hoe langer de pagina wordt geladen. Controleer uw scripts en zorg ervoor dat u jQuery niet twee of drie keer aanroept. Hetzelfde geldt voor JS-scripts.

Nou... ik denk dat dat genoeg is. Laten we nu verder gaan naar het volgende YSlow-tabblad voordat we kijken naar enkele andere technieken die de laadsnelheid van uw pagina's zullen verbeteren.

Op het tabblad Componenten kunt u bepalen welke inspanningen u moet doen om de laadsnelheid te verbeteren. Hier vindt u informatie over hoeveel elk bestand weegt en hoe lang het downloaden duurt. U kunt ook zien voor welke bestanden gzip wordt gebruikt, wat de responstijd is, of de bestanden in de cache op de computer van de gebruiker zijn opgeslagen en wanneer de cache zelf eindigt. Deze informatie kan nuttig voor u zijn bij het beoordelen van de problemen van uw site, u weet wat er mis is met u en wat moet worden geoptimaliseerd.

En tot slot, laten we verder gaan laatste tabblad Tabblad Statistieken. Hier vindt u informatie over alle HTTP-verzoeken, zowel voor reguliere bestanden, en voor in de cache opgeslagen bestanden. De waarde voor lege cache geeft aan dat deze bestanden moeten worden geladen om de pagina weer te geven. Primed Cache bestaat op zijn beurt uit bestanden die al door de browser van de gebruiker in de cache zijn opgeslagen. Dit betekent dat u ze niet hoeft te downloaden.

CSS-sprites zijn waarschijnlijk het belangrijkste dat de mensheid heeft bedacht sinds Tesla elektriciteit uitvond... Dat zei ik eigenlijk... oeps, ik bedoelde Edison.

Nou ja, misschien niet bepaald de coolste, maar toch.

CSS-sprites kunnen de laadsnelheid van pagina's aanzienlijk helpen verhogen door het aantal HTTP-verzoeken dat wordt gegenereerd om afbeeldingen te laden te verminderen.

Je kunt veel tutorials vinden die vertellen hoe CSS-sprites nuttig zijn voor navigatie - in het algemeen voor het gebruik ervan in de gebruikersinterface.

Laten we nu snel kijken hoe YouTube CSS-sprites gebruikt. Dit is hoe de sprite die ze gebruiken eruit ziet:

YouTube gebruikt dit bestand op een vrij originele manier. Ze laden het als achtergrond voor de sprite-klasse. Wanneer het nodig is een element te selecteren, wordt de beginpositie geselecteerd met behulp van CSS-eigenschappen achtergrondpositie en vervolgens hoogte en breedte toepassen.

Laten we ook iets soortgelijks proberen. Laten we experimenteren met dezelfde afbeelding van YouTube.

In het onderstaande voorbeeld tonen we het YouTube-logo op het scherm. Gebruik dezelfde sprite-klasse en hetzelfde afbeelding afbeelding, kunnen we een afbeelding maken die verandert als de muis beweegt.

.sprite ( achtergrond:url(http://s.ytimg.com/yt/img/master-vfl87445.png); ) #logo ( breedte:100px; hoogte:45px; achtergrondpositie:0 0; )

Gebruiken dus deze afbeelding, kunnen we alle verbindingen terugbrengen tot één HTTP-verzoek. Nou, hoe is het effect?

Een ander voordeel van CSS-sprites is dat bij gebruik van de :hover pseudo-klasse de afbeelding enkele ogenblikken niet zal verdwijnen (wat wordt besteed aan het laden van een nieuwe afbeelding), zoals gebeurt zonder met behulp van CSS sprieten.

.sprite ( achtergrond:url(http://s.ytimg.com/yt/img/master-vfl87445.png); ) #logo ( breedte:100px; hoogte:45px; achtergrondpositie:0 0; ) #button ( achtergrondpositie:0 -355px; opvulling:5px 8px; ) #button:hover( achtergrondpositie:-25px -355px; )

Voor sommige sites kan het verminderen van het aantal HTTP-verzoeken leiden tot een storing in de functionaliteit. Een andere manier om de laadsnelheid van pagina's te verhogen is door alle JavaScript-bestandsverbindingen aan het einde van het document te plaatsen.

Het is ook vermeldenswaard:

Als u ons advies opvolgt, kunt u uw gebruikers uw sites laten bewonderen terwijl ze uw JavaScript-scripts op de achtergrond laden.

Let op: Als u JavaScript-tags niet wilt verplaatsen omdat u bang bent dat de functionaliteit wegvalt, raad ik u aan de eigenschap defer te gebruiken. Pas het als volgt toe:

Parallel downloaden betekent het verhogen van het aantal parallelle downloads van dezelfde bestanden. Als u veel sites bezoekt, zult u merken dat veel van hen verzoeken sturen naar static.domain.com en c1.domain.com. Dit is te zien in de onderste balk van de browser.

Dit goede manier verhoog de prestaties van de site. Bij gebruik van subdomeinen zal de informatie in principe op dezelfde server staan, maar voor de browser zal deze verschillend zijn.

Procesopstelling:

Sommige sites blijven geladen, zelfs nadat alle hierboven beschreven methoden zijn toegepast. Maar er zijn nog een paar methoden.

De gebruiker kan naar uw site gaan en alle benodigde HTTP-verzoeken doen om de pagina, afbeeldingen, scripts, enz. weer te geven.

Wanneer u Expires-headers gebruikt, kunt u al deze elementen op de computer van de gebruiker in de cache opslaan, waardoor niet alleen de laadsnelheid van de pagina wordt verhoogd, maar ook het verkeer wordt verminderd. Expires-headers kunnen worden toegepast op al uw scripts, CSS en afbeeldingen.

Dit effect kan worden bereikt door een paar regels toe te voegen aan het .htaccess-bestand, dat zich bevindt in hoofdmap jouw site.

Volgend voorbeeld. htaccess-bestand en stelt de verlopen headers in op een bepaald aantal in 2010 voor bestandstypen zoals .ico, .pfd, .flv ( Flash-bestanden), .jpg, .png, enz.

Headerset Verloopt op donderdag 15 april 2010 20:00:00 GMT

Let op: als u wijzigingen aanbrengt in deze bestanden (als de deadline nog niet is verstreken), moet u ze hernoemen (of een versie aan de naam toevoegen), anders worden ze niet bijgewerkt in de cache.

Als je dat bijvoorbeeld hebt JavaScript-bestand, waarin je iets hebt gewijzigd, voeg gewoon het versienummer toe aan de naam (zoiets als javascriptfile-1.0.js, javascriptfile-1.1.js, etc.)

Vandaag hebben we veel methoden doorlopen. Ik hoop dat je een paar methoden hebt opgemerkt die je actief gaat gebruiken in je projecten! Succes!

Voor webmasters en optimizers is de laadsnelheid van de site belangrijk. Om dit te bevestigen, wil ik graag enkele statistieken en feiten geven:

• Ruim de helft van de bezoekers verlaat een pagina die meer dan 3 seconden nodig heeft om te laden;
• Een site die in 3 seconden laadt, heeft 25% minder weergaven, 50% meer bounces en 25% minder conversies dan een site die in 1 seconde laadt;
• De voortgangsbalk verlengt de wachttijd voordat de pagina is geladen;
• De laadsnelheid heeft een directe invloed op de verkoop en de positie van de site;

Het bepalen van de laadsnelheid van een website is helemaal niet moeilijk. U kunt bijvoorbeeld de volgende populaire onlinediensten gebruiken:

Laten we eens kijken naar manieren om de laadtijd van websitepagina's te versnellen. In feite zijn alle methoden heel eenvoudig en komen ze meestal neer op het optimaliseren van het “gewicht” van de pagina en het correct laden van de code.

Er is behoorlijk wat materiaal over dit onderwerp op internet te vinden. Ik heb geprobeerd alle methoden compact en alleen to the point te presenteren. Laten we beginnen.

Elke site heeft plug-inbestanden met stijlen.css en scripts.js. Ze kunnen direct worden gecomprimeerd (wanneer de pagina wordt geladen). Simpel gezegd: we verminderen hun gewicht en daardoor laadt de site sneller. Mijn bestanden werden gemiddeld met 75% gecomprimeerd. Als een bestand bijvoorbeeld 45 kbyte woog, begon het na compressie 12 kbyte te wegen. In totaal wordt er 33 KB gewicht bespaard op het bestand met het stijlblad.

Compressie inschakelen kan niet eenvoudiger. U hoeft alleen maar de volgende regels code in het .htaccess-bestand te schrijven (het bestand bevindt zich in de hoofdmap van de site):

U kunt controleren of compressie is ingeschakeld op websites

Als iets niet lukt, stel dan gerust een vraag aan de technische ondersteuning van uw hosting. Het komt vaak voor dat ze zelf iets niet hebben ingeschakeld in de serverinstellingen.

Het inschakelen van de browsercache gebeurt door een paar regels code toe te voegen aan hetzelfde .htaccess-bestand:

Er is enkel belangrijk probleem, welke cache-opslagperiode moet worden ingesteld. Als u een zeer lange tijdslimiet instelt en het bestand is gewijzigd, zal de browser koppig laden wat er in de cache staat. Een uitweg uit de situatie zou kunnen zijn om de bestandsnaam te vervangen en wijzigingen aan te brengen in de sjabloon, maar is dit handig? Het is dus de moeite waard om erover na te denken en zelf te bepalen hoe vaak u bestanden op de site wijzigt.

Mijn mening is dat er in ieder geval altijd een termijn van 1-7 dagen kan worden gesteld.

Dit is het eenvoudigste dat gedaan kan worden, laten we verder gaan.

Mogelijk bent u geïnteresseerd in:

Gebruik maken van jpg afbeeldingen - voor contrast en gif - waarbij het aantal kleuren klein is. Dit zijn allemaal axioma's. Gebruik in geen geval opnieuw png of bmp, aangezien beide formaten helemaal niet geoptimaliseerd zijn.

Reeds bestaande jpg- en png-afbeeldingen kunnen eenvoudig worden gecomprimeerd met behulp van programma's en services. Persoonlijk heb ik op internet gezocht naar diensten voor beeldcompressie. Ik heb de resultaten vergeleken en kwam tot de conclusie dat ik de online dienst tinypng.com het leukst vind. Soms weet hij het beeld zelfs met 75% te verkleinen, terwijl de kwaliteit vrijwel onveranderd blijft.

Als de site als achtergrond gebruikt groot beeld, dan kan het heel sterk worden samengedrukt. Ik slaagde er bijvoorbeeld in een afbeelding te comprimeren van 300 KB naar 86 KB achtergrond voor een van de locaties.

Browsers hebben een limiet op het aantal gelijktijdig uitgevoerde verzoeken (niet meer dan twee parallel). Met andere woorden, als de site een heleboel afbeeldingen heeft (zelfs kleine), zal dit de laadtijd aanzienlijk verlengen. Gebruik daarom de volgende truc:

Ze creëren een subdomein voor het opslaan van foto's, javascript en meer. Als de foto voorheen bijvoorbeeld op /img/foto.jpg stond, moet het adres nu worden gewijzigd in img.site.ru/img/foto.jpg. Voor de browser zal het een ander domein zijn en zo kunstmatige methode Wij versnellen het laden.

Tegenwoordig is het behoorlijk in de mode om "CSS-sprite" te gebruiken. De betekenis is als volgt: op onze website hebben we bijvoorbeeld een aantal kleine foto's voor de achtergrond (ik denk dat dit voor iedereen bekend is). Al deze afbeeldingen kunnen worden gecombineerd tot één grote afbeelding, en met met behulp van CSS“knip” de juiste stukken op de juiste plaatsen.

Vaak binnen CSS-bestanden en JS zijn er veel onnodige beschrijvingen van stijlen, scripts en zelfs eenvoudige spaties en opmerkingen. Dit is extra gewicht voor de site. Met de volgende diensten kunt u hier eenvoudig vanaf komen:

Het lijkt zo'n simpele 'fraude', maar dit is een kleine bonus voor het verkleinen van de paginagrootte.

We nemen alle .css-bestanden op in de head-tags (vóór lichaamstag), nemen we alle scripts op aan het einde van de pagina. Over het algemeen zal dit het laden van de pagina niet versnellen, maar de inhoud zal eerder voor de gebruiker verschijnen, en dit motiveert hem op zijn beurt om te wachten, omdat hij ziet dat de site wordt geladen.

Als u een AJAX-bibliotheek (van Google) laadt, is het rechtstreeks laden vanaf de website van Google uiteraard sneller, en bovendien kunt u er bijna 100% zeker van zijn dat de browser van de gebruiker al over een cache beschikt. Maar het komt voor dat Google om de een of andere reden niet beschikbaar is of het laden vertraagt, dus om dit risico te minimaliseren, kun je de volgende code schrijven:

De betekenis is vrij eenvoudig. Eerst proberen we de bibliotheek rechtstreeks van ajax.googleapis.com te downloaden; als dit niet lukt, downloaden we vervolgens een kopie van de bibliotheek van onze website.

Als u een uniek geval heeft waarbij de site nog steeds erg zwaar is en het lang duurt om te laden, maak dan een ‘voortgangsbalk’ op uw site. Dit laat de gebruiker zien dat de site wordt geladen en dat hij even moet wachten.

“We hebben een deel van de inhoud (afbeeldingen, jQuery) naar subdomeinen gedistribueerd, en een deel naar een CDN (cloudflare.com) om de afstand tussen de server en de gebruiker te verkleinen.” Het is slecht voor de site: de afbeeldingen worden niet aan de site gekoppeld, maar aan het CDN. In Yandex-statistieken ziet u "afbeeldingen in de index - 0".© info van Yandex.

Dat wil zeggen dat u alle selectievakjes in de website-optimalisatie-instellingen op uw hosting heeft ingeschakeld. Ze hebben een paar honderd dollar van de klant afgepakt. Tegelijkertijd hebben ze een dergelijke parameter in de header als lastmodified verwijderd, omdat wanneer deze opties zijn ingeschakeld, deze niet wordt verzonden - dat is de specificiteit ervan. Het voelt alsof er geen website is, ze hebben zojuist een artikel bedacht en de naam van de selectievakjes van de hosting herschreven, in de veronderstelling dat dit een blijvende indruk zou maken.
Bravo, ik heb nog nooit een primitiever artikel gelezen, een pleidooi voor de Darwin Award!

Alexander Porechnikov

Java komt niet eens in de buurt van Javascript

Alexander Porechnikov

Dus je schrijft, Gennady, dat je http2 hebt ingeschakeld en tegelijkertijd om de een of andere reden bronnen in één bestand hebt gecombineerd. Spreek je jezelf tegen? Of je weet gewoon niet hoe http2 werkt. En afgaande op de checklist, heb je daarna de downloadsnelheid gemeten? eenvoudig inschakelen ganzipa, al het andere is zo'n subtiliteit en jungle waar ze in terechtkomen als je 400 ms van 500 ms moet halen of als de server vastloopt vanwege de belasting (504-fouten glippen er doorheen). En gooi Apache uit de combinatie Apache + Nzhinix (tenzij je natuurlijk specifieke Apache-plug-ins gebruikt) + advies, bewaar alle statische gegevens op SDN, het is erg goedkoop, en de voordelen hiervan zijn enorm, tenminste wat betreft het verminderen van de belasting van de processor

Alexander Porechnikov

en waar zijn spiegelservers voor gemaakt: voeg de SDN samen met het hoofddomein en dat is alles

Alexander Porechnikov

Ik ben het eens over de kwaliteit van het artikel, maar ik ben het niet eens over het concept zelf - we hebben alle punten zelf getest, maar hebben minder dan de helft overgelaten, de rest werkt niet of de magere snelheidsverhoging werkt niet. rechtvaardigt de moeite niet

OpCashe geconfigureerd, wijzig naar OPcache

Alexander, deze opties van de pagespeed-module versnellen ongetwijfeld de site, maar wanneer je er ten minste één op de hosting selecteert, wordt laatst gewijzigd niet verzonden, het 304-antwoord van de server op het if-modified-since-verzoek wordt niet geretourneerd , cachecontrole -> max-leeftijd wordt 0.
Dit is niet wat mij verontwaardigd maakte in het artikel, ik was verontwaardigd over het feit dat de auteur zulke duistere dingen schrijft terwijl ze een plan opstelden, hoe ze mega SEO-technologieën implementeerden en hoe ze er 60 manuren aan besteedden, 60 KARL! Dat wil zeggen dat de klant minimaal 500 dollar moest betalen voor het aanvinken van de vakjes op de hosting. Geen zorgen, goede gezondheid! Nou, wees stil en blijf stil, maar ga niet met je pseudo-kennis op normale sites en neem de tijd van mensen niet weg! Waarom weet ik zeker dat ze de hosting hebben aangestuurd - hier is een screenshot van een Oekraïense geavanceerde hoster, waarbij de volgorde van deze selectievakjes bijna 100% samenvalt met het briljante plan van de auteur en co.
https://uploads.disquscdn.c...

Alexander Porechnikov

Op deze hosting hebben we zelfs een van de oude semi-statische projecten draaien, uitstekende hosting. Ik weet waar je het over had, maar velen begrijpen niet dat er in feite maar een paar manieren zijn om de laadtijd echt te verkorten, en niet om “te besparen op wedstrijden” - dit is:
0) compressie op de webserver inschakelen (gzip),
1) installatie juiste kopjes Online
2) het gebruik van geen gedeelde hosting, maar zelfs een minimale VPSK
3) gebruik van een min of meer snelle engine (bij voorkeur geen WordPress, maar een framework)
4) verkleining van statische bestanden (wat zelden verandert: stijlen, afbeeldingen, scripts, lettertypen)
5) pagina/statische caching

Al het andere levert weinig of geen winst op, en sommige adviezen staan ​​alleen maar in de weg. Nou ja, het belangrijkste is om het toch te doen mobiele versie, omdat Meestal doen zich problemen met de laadsnelheid van de site voor op mobiele apparaten.

Ik ben het 100% met je eens, bedankt voor je laconiek en nauwkeurigheid!

Ljapusjkin Nikita

Datzelfde moment waarop je de uit het hoofd geleerde zinnen kunt voelen van een verkoper die nog nooit heeft gezien waar hij het over heeft.
Als het artikel voor algemene ontwikkeling- deze is geschikt, maar niet voor een controleblad of gebruiksaanwijzing.
Zoek gewoon de namen van technologieën op en rook het onderwerp zelf, ik raad aan om zelfs de uitspraken in het artikel over te slaan.

Filander

wat voor hosting?)

Filander

Alexey Tyazhelnikov

Wat betekent 'Verlengde cachetijd voor JavaScript en CSS'?

We hebben het laatste en voorlaatste selectievakje op de hosting ingeschakeld (post met screenshot hierboven))))

Gennady Fedorov

Ja, dat is wat ze deden!
Sorry, u bent niet competent in deze kwestie.

Gennady Fedorov

Bedankt!
Het complex van werk levert resultaten op.

Gennady Fedorov

Dit was de taak om een ​​impuls te geven aan actie, en niet om te beschrijven hoe het gedaan moest worden

Gennady Fedorov

Bedankt voor de opmerking!
Ik geef toe, alles was gecombineerd vóór de overgang naar https/http2))
Ja, we hebben de snelheid na gzip gemeten, maar het resultaat was niet hetzelfde (je zult niet iedereen tevreden stellen)...

Gennady Fedorov

Hier zijn jullie, als experts, aan het oordelen... bekijk het van de kant van de gebruiker))

Gennady Fedorov

Je opmerking is volkomen onduidelijk

Alexander Porechnikov

gebruikers doorgaans geen server opzetten, geen producten programmeren of maken, dan is het feit dat een persoon zonder kennis een “blog/site” op WordPress kan maken ongetwijfeld goed, maar als zo iemand vragen heeft, zal hij die nog steeds hebben om met PHP, JavaScript, Nginx, Apache en andere voorheen onbekende woorden om te gaan, en Google helpt hier meestal mee, dus "licht analfabetisme" in termen zal ertoe leiden dat iemand op zoek gaat naar iets dat lijkt op "slider in Java" en wees verbaasd dat er een soort JavaScript in de resultaten naar hem toe wordt geschoven. Daarom is het niet de moeite waard een beroep te doen op de kant van de gebruiker

Alexander Porechnikov

vaak is het probleem niet dat de snelheid toeneemt als gevolg van alle manipulaties (ook al is het met 0,1%), maar dat we geen andere optimalisatiemanieren zien (CDN, nginx) en niet begrijpen hoe het werkt (http2) en als gevolg daarvan , we optimaliseren wat geen zin heeft om te optimaliseren en vergeten wat geoptimaliseerd moet worden of hoe we met onze optimalisatie het maximale resultaat kunnen bereiken.