Enkla steg för att snabba upp din bildtunga webbplats

4

Webbplatsägaren kan så småningom vilja öka sin nedladdningshastighet. Detta ökar rankningen av sökresultaten; dessutom är det trevligare för webbplatsbesökare att arbeta med det genom att få ett snabbare svar på sina handlingar.

I jakten på en snabb och okomplicerad lösning installerar webbplatsägare ett stort antal plug-ins, som i sin tur förbrukar resurser och bara saktar ner dess arbete. Vi har inget emot optimeringsplugins, men de måste användas rakt av och med kunskap om principerna för deras arbete.

Dessutom har webbplatsägare som aldrig har upplevt administration ofta ett missförstånd av optimering. Enligt deras uppfattning är optimering accelerationen av skriptet till varje pris. Optimeringens uppgift är att producera webbplatsens optimala hastighet till det optimala resurspriset. Därför kan det inte finnas universella instruktioner för alla webbplatser.

Att göra din webbplats snabb är en brådskande uppgift för alla resursägare eller webbansvariga. När allt kommer omkring är sidladdningshastigheten en av de mest kritiska faktorerna för framgången för en webbresurs, tillsammans med högkvalitativt innehåll och vacker grafisk design.

Långsam laddning ökar sannolikheten för att förlora användare ibland. Speciellt när besökare kommer från mobila enheter. Enkla rekommendationer för att påskynda laddningen av webbplatsen, som även en oerfaren användare kan implementera i praktiken, hjälper till att minimera sannolikheten för trafikförlust.

1 Optimera HTML-kod och CSS-, JS-filer

Nedladdningsoptimering är omöjlig utan oro för "renheten" i koden som överförs till användarens webbläsare när den går in på webbplatsen. Ett stort antal tecken i källkoden påverkar laddningshastigheten avsevärt, så dess korthet är en kritisk framgångsfaktor.

Hur man minimerar kod för att påskynda laddningen av webbplatsen

Ta bort onödiga tecken, uppmärkningselement och källkodstaggar. Att automatisera processen kommer att hjälpa till att lägga till en liten infogning i början och slutet av HTML-koden för webbplatsen.

Denna metod för att buffra HTML-innehåll är ganska användbar, men den kan skapa en extra belastning på random access-minnet.

Gruppera samma typ av CSS-filer och JS-filer. Gratis PHP-applikationer som JCH Optimize, Cloudflare eller Minify, som kopieras till en separat katalog och passerar genom alla webbplatsfiler, hjälper till att kombinera elementen.

2 Ta bort extra HTTP-förfrågningar

Att ladda upp sidelement (javascript, bilder, CSS och flash-filer) tar upp lejonparten av systemresurserna när en webbplats laddas. HTTP-förfrågningar för sådana element saktar märkbart ner webbplatsen.

För att undvika "extra" förfrågningar måste du minska antalet komponenter på sidan. Detta kommer att medföra en proportionell minskning av serveranrop och kommer att påskynda laddningen av sajten.

Detta kan göras på flera sätt:

  • Kombinera flera bilder till en enda grafisk fil (CSS sprite);
  • Använd inline-bilder (inline-bilder) i sidformatmallen;
  • Flera CSS-filer eller skript på en sida slås samman till en fil;
  • Minimera antalet scenarier och plugins.
3 Ordna JavaScript och CSS i rätt ordning

Det rekommenderas att placera CSS-filerna överst på sidans kod och JavaScript längst ner. Efter denna optimering kommer statiskt innehåll att laddas först, och sedan endast dynamisk grafik.

Flash-element eller animationer som kräver mer resurser att ladda ner kommer inte att "dra ut" framåt och förstöra intrycket av webbplatsen från de första sekunderna. Detta kommer att säkerställa en smidig nedladdning av innehåll och öka resursens estetiska tilltalande.

4 Minska antalet externa skript

Externa skript är bitar av kod (texter) som nås via en extern länk. Länkar skapar ytterligare förfrågningar till många olika servrar, vilket i slutändan saktar ner sajten. För att undvika detta rekommenderas det att huvudsakligen använda lokala skript inbäddade i strukturen för sidans källkod.

Att fokusera på lokala skript kommer naturligtvis att skapa vissa begränsningar i utseendet och funktionaliteten på webbplatsen. Men den resulterande fördelen med nedladdningshastighet är värd dessa "uppoffringar".

5 Aktivera spolning

Denna PHP-funktion låter dig inte vänta tills användarens server laddar information från resursen, utan att mata ut den i delar. Medan data överförs till webbläsaren kommer det öppna fönstret inte att förbli tomt utan kommer att fyllas smidigt med laddningsbara delar av webbplatsen. Sådan acceleration är särskilt nödvändig för webbresurser med ett komplext gränssnitt och hög trafik.

Det är bättre att placera spolfunktionen i början av sidans källkod, omedelbart efter huvudet. Från rubriken kommer HTML-innehåll att öppnas snabbare, och du kan även aktivera parallell laddning av CSS- och JavaScript-element.

6 Cachelagra sidorna

Cachning sparar viss information från webbplatsens sidor (flash, grafik, JavaScript och CSS) till användarens webbläsare. Vid nästa körning laddas dessa filer omedelbart ner från webbläsaren, vilket ger webbplatsen extra hastighet.

Du kan aktivera cachelagring genom att lägga till en expires header i HTML-koden. WordPress-webbplatser cachelagras enkelt med installation av plugin-program med gratis eller delvis gratis funktionalitet, såsom W3 Total Cache, Cache Enabler eller Zen Cach.

För nya webbplatser är det bättre att använda cachning först efter full beredskap för lansering. Om du aktiverar funktionen under utvecklingen kanske ytterligare ändringar inte visas korrekt på webbplatsen.

7 Använd ett CDN

Content Delivery Network – en kedja av servrar utspridda i datacenter runt om i världen för att öka hastigheten med vilken innehåll överförs till besökare. Ju närmare besökaren befinner sig geografiskt från CDN-servrar, desto snabbare överförs datapaketen från sajten.

Användningen av CDN är särskilt viktig för innehåll och högbelastade portaler, vars primära målgrupp är mycket långt ifrån fysiska servrar. Den här tjänsten minimerar väntetiden för nedladdningar från utländska webbplatser, vilket bidrar till en ökning av deras rankning i lokala sökresultat. Innehållet laddas trots allt ner från serverlagringen närmast användaren i hans land.

8 Optimera grafik och video

Du måste välja rätt grafik och videoformat, eftersom filformatet direkt påverkar hastigheten med vilken information presenteras för besökarna.

Rekommenderade format för olika webbinnehåll:

  • SVG – för vektorlogotyper och enkla gränssnittselement;
  • PNG – för scheman och icke-vektorlogotyper;
  • JPG – för foton och bilder;
  • MPEG4 – för video och animation.

Även för video och animation finns ett relativt nytt WEBM-format tillgängligt. I de flesta fall ger det en mindre videostorlek med samma kvalitet. Formuläret har dock begränsat webbläsarstöd (till exempel finns det inget stöd i webbläsaren macOS / iOS Safari). Därför rekommenderas det att använda en WEBM-fil som en prioriterad videokälla och installera MPEG4 som en alternativ källa. Du kan också använda den enda MPEG4 om delning är oacceptabelt eller obekvämt.

Separat noterar vi att vektorformatet (SVG) tillåter skalning utan förlust av grafikkvalitet.

Stadier av bildoptimering

Steg 1 – Minska storleken på bilden.

Många populära CMS, som WordPress eller Joomla, har inbyggda plug-ins för att optimera bilder från originalet. Men den här metoden skapar en extra belastning och kan sakta ner webbplatsen. Varje gång sidan laddas kommer webbläsaren först åt källkoden, och först därefter ändrar storleken på bilden i farten.

För att undvika hastighetsförlust när bilder laddas, hjälper grafiska redigerare inbyggda i operativsystemet, såsom Preview (Mac) eller Microsoft Paint (Windows), samt onlinetjänster med liknande funktionalitet. Att arbeta med dem kommer att kräva minimala färdigheter i att arbeta med grafik.

Steg 2 – Komprimera filen innan du laddar ner.

Även efter att ha optimerat bildstorleken är dess "vikt" vanligtvis fortfarande långt ifrån optimal. Bekväma och kostnadsfria tjänster som ImageResize eller TinyPNG hjälper till att minska storleken utan förlust av bildkvalitet. De flesta processer här är automatiserade. Användaren behöver bara ladda upp filer och ladda ner redan komprimerade till optimal bildstorlek.

9 Använd Gzip-filkomprimering

Gzip är en enkel metod för att komprimera webbplatsfiler för att spara kanalresurser och påskynda laddningen. Med Gzip komprimeras filer till ett arkiv som webbläsaren kan ladda ner snabbare och sedan packa upp och visa innehållet.

Att aktivera användningen av Gzip är ganska enkelt – du behöver bara lägga till några rader kod i .htaccess-filen. Till exempel, när du använder Apache-webbservern är mod_gzip-modulen tillgänglig för webbansvariga, för att aktivera Gzip, i det här fallet måste du lägga till sådan kod i .htaccess

Gzip-filkomprimering görs för att minska antalet förfrågningar till servern från en webbläsare. Med den här tekniken minskar den ursprungliga vikten av filer till 70 % för att påskynda nedladdningen.

Sätt att bädda in Gzip-komprimering

Lägg till följande kodavsnitt till konfigurationsfilen för webbservern ".htaccess".

På Apache-servern

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

På Nginx-servern

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;
10 Ändra värd

Den mest grundläggande metoden för att påskynda nedladdningar är att byta värdleverantör. Att spara på resurstilldelning leder ofta till en betydande försämring av kvaliteten på tjänsterna, vilket undergräver alla försök att påskynda platsen på vinstocken.

Om manipulationer med innehåll, kod och plugins inte ger resultat, är det dags att fundera på att välja ett mer anständigt "hem" för webbplatsen. På ett kvalitetshotell med hög tillgänglighet och genomtänkt teknisk support kommer internetresursen att få en kraftfull drivkraft för att öka arbetshastigheten. Och detta kommer att uppskattas av en tacksam publik.

Det viktigaste är…

Det är nödvändigt att sträva efter att komma åt webbplatsen i högst 2-3 sekunder. Det spelar ingen roll om sajten öppnar i 2 eller till och med 3 sekunder, men om det finns mer, och då är detta en anledning att tänka på att påskynda sajtbelastningen.

Du måste också förstå att det finns två parametrar för sidladdningshastighet.

Den första är hastigheten med vilken innehåll visas (vid denna tidpunkt är sidan redan öppen och visas för användaren, medan den transparenta sidindikatorn fortfarande visas tills alla statiska filer och asynkrona skript är anslutna).

Dessutom är den andra hastigheten för själva bildandet av sidan, när allt som behövde anslutas var anslutet. Du måste fokusera på den första parametern, dvs det får inte gå mer än tre sekunder innan webbplatsens layout visas.

Slutsats

Du kan inte ignorera en sådan siffra som hastigheten för att ladda webbplatsen. Det var han som från första sekunder skapar en bekväm miljö för besökarna. Ju snabbare användaren får det önskade innehållet, desto större är sannolikheten att en positiv bild av resursen kommer att bildas och lojalitet till den byggs upp.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More