wordpressguider.se - 1

Snabba upp WordPress: En fallstudie med WordPressguider.se | WordPressguider.se

Wordpressguider.se Spined HTML

Snabba upp WordPress: En fallstudie med WordPressguider.se | WordPressguider.se KategorierAllmäntDesignFå besökareFör nybörjareNyheterSEOTemanTilläggTjäna pengarSidorOm WordPressguider.seBli skribentArkiv KategorierAllmäntDesignFå besökareFör nybörjareNyheterSEOTemanTilläggTjäna pengar Populära inlägg 1Att välja webbhotell för WordPress 2018Av Anders Norén / 8 januari 2018 2WordPressTeman.com 2.0 lanserasAv Anders Norén / 5 december 2014 3Bättre WordPress-säkerhet i tio stegAv Anders Norén / 6 juli 2014 4Använd utvalda bilder i WordPressAv Anders Norén / 6 maj 2014 5Börja tjäna pengar på din bloggAv Anders Norén / 3 mars 2010 Om WPGOm WordPressguider.seBli skribentArkivSök WordPressguider.se 1Allmänt För nybörjareSnabba upp WordPress: En fallstudie med WordPressguider.se Av Anders Norén / 14 november 2014 kl 12:43 Vi tenderar att fästa mycket vikt vid design, funktionalitet och innehåll när vi bygger webbplatser, men tittar vi på besökarupplevelse finns det en faktor som är viktigare än någon annan: hastighet. Besökarna är inte tålmodiga. För varje uneaten sekund av laddningstid fördubblas risken att besökaren ger upp och besöker något annat istället. Och det är inte bara besökarna som räknar sekunderna: Google och andra sökmotorer fäster stor vikt vid laddningstider.Tidigare under den här veckan tog jag en lång och hård titt på WordPressguider.se för att avgöra hur jag kan göra den snabbare, lättare och smidigare. Jag passade samtidigt på att dokumentera varje steg jag gick igenom för den här fallstudien. Jag kommer attt beskriva vad jag gjorde, vilken effekt det hade och berätta hur du själv kan anpassa din WordPress-webbplats så att den laddar snabbare.UtgångspunktenUnder arbetets gång använde jag Pingdoms hastighetstest för att analysera WPG:s laddningstider. När jag körde testet första gången fick jag följande resultat:Laddningstid: 4,36sSidans storlek: 1,9 MbAntal förfrågningar: 111”Laddningstid” och ”Sidans storlek” kräver ingen närmare förklaring. ”Antal förfrågningar” mäter hur många filer som hämtades när sidan laddades. Ju fler förfrågningar, desto långsammare laddar sidan.Jämfört med många webbplatser på webben är det här inte en värdelös utgångspunkt: den genomsnittliga storleken på en webbsida är ungefär 1,7 Mb (källa). Jag visste dock att jag med ganska enkla medel skulle kunna minska alla dessa värden betydligt.Vad jag gjordeSe över tilläggJag har alltid varit restriktiv med hur många tillägg jag installerar på mina webbplatser, både av hastighet- och säkerhetsskäl. När jag påbörjade optimeringsarbetet var fem tillägg installerade på WPG:Akismet – skyddar mot kommentarspam.All in One SEO Pack – optimerar webbplatsen för sökmotorer.Google XML Sitemaps – genererar en webbplatskarta för sökmotorer.Jetpack från WordPress.com – låter mig använda Jetpacks statistikverktyg.No Self Pings – förhindrar WordPress från att registrera en pingback när jag länkar från ett WPG-inlägg till ett annat.Fem tillägg är ett rimligt antal för en webbplats av WPG:s storlek, och det finns inget tillägg i listan som enkelt kan uppoffras. Det antalet – fem – är dock en sanning med modifikation. Jetpack räknas bara som ett tillägg, men i det tillägget ingår ett stort antal ”moduler” som är aktiverade som standard, oavsett om de används eller inte. När dessa moduler är aktiverade läggs flera CSS och Javascript-filer till på webbplatsen, och dessa filer ökar både sidans storlek och antalet förfrågningar.De enda Jetpack-moduler jag använder är Subscriptions (som låter besökare prenumera på kommentarer till ett inlägg) och WordPress.com Stats, så jag avaktiverade alla andra moduler och sparade inställningarna. När jag körde Pingdoms hastighetstest igen hade sidans storlek minskat med ungefär 100 kb och den gjorde ungefär tio färre förfrågningar. Framsteg.Ikontypsnitt över ikonerNästa steg var något som jag har haft på att göra-listan väldigt länge. När man ska använda ikoner i en webbdesign finns det två tillvägagångssätt:Spara ikonerna som bildfiler och ladda in varje ikon individuellt. Fördelar: Det är snabbt och enkelt. Lämpligt om man bara använder ett fåtal ikoner. Nackdelar: Om man vill ha en ikon i flera olika färger och storlekar måste man göra en separat fil för varje färg/storlek. Man måste också göra högupplösta versioner av bilderna för enheter med retina-skärmar. Varje enskild version av ikonen innebär att sidan måste göra en till förfrågning.Använd ett ikontypsnitt – ett typsnitt som innehåller ikoner istället för bokstäver, siffror och andra tecken. Fördelar: Man kan ändra färger och storlekar direkt i CSS-koden. Ikonerna är automatiskt anpassade för retina-skärmar. Bra om man har många ikoner som förekommer i många olika varianter. Nackdelar: Äldre webbläsare har begränsat stöd för ikontypsnitt.Med tanke på mängden ikoner som används på WPG visste jag att ett ikontypsnitt var den mer lämpliga av de två metoderna. Att implementera ikontypsnittet tog tid, men det var värt det. När alla bilderna var utbytta hade sidans storlek minskat med ytterligare 100 kb, och antalet förfrågningar låg nu på 97 – en ganska rejäl minskning. Att WPG:s ikoner nu också är blixtskarpa på alla enheter, oavsett upplösning, är en fin bonus.Se över bildformat och -storlekarSom jag skrev ovan är den genomsnittliga storleken på webbplatser 1,7 Mb. Den siffran har ökat stadigt under de senaste åren, och mycket av tillväxten kommer från bilder. Mer än 60 procent – 1030 Kb – av den genomsnittliga webbplatsens filstorlek utgörs av bilder. Genom att vara selektiv med var och hur man använder bilder kan man banta den siffran betydligt.Teknik20122013ÖkningHTML54 Kb57 Kb+6%CSS35 Kb46 Kb+31%JavaScript211 Kb276 Kb+31%Bilder793 Kb1030 Kb+30%Flash92 Kb87 Kb-5%Annat101 Kb205 Kb+103%Totalt1286 Kb1701 Kb+32%Många av artikelbilderna på WPG har en väldigt avskalad design. Det var inte bara ett estetiskt val: det formspråket gjorde att jag kunde spara filerna i PNG-formatet, som både är skarpare än det vanligare JPEG-formatet och dessutom kan sparas i mindre filstorlekar. PNG-versionen av bilden för artikeln om barnteman var till exempel bara fem kilobyte stor, trots en ganska väl tilltagen upplösning på 851×500 pixlar. Det är inte illa alls.Trots hög upplösning vägs den här bilden in på bara 5 kb. PNG-formatet at work.Problemet med att använda PNG-filer är dock att WordPress är horribelt dåligt på att komprimera bilder i det formatet. Arkivstorleken av samma bild, som WordPress beskärde till 600×387 pixlar, var hela 70 kb stor – 1400% större än den fullstora versionen. Varje enskild arkivsida innehåller tio sådana bilder. Det blir totalt uppemot 700 kb. Här fanns det mycket fett att skära bort. Genom att ändra filformatet på bilderna till JPEG-formatet, som WordPress är lite mer bekvämt med, sparade jag 30-40 kb på varje enskild arkivbild. Multiplicera med tio och du får en markant skillnad i filstorlek per arkivsida.Filformatet var dock bara en del av problemet. Många av bilderna hade en högre upplösning än nödvändigt. Arkivbilderna behövde egentligen inte vara 600×386 pixlar, så jag ändrade deras storlek till 403×237 pixlar. Bilderna kommer att bli mindre skarpa på vissa mobila enheter, men det är en rimlig uppoffring i utbyte mot mindre sidstorlek och kortare laddningstider för alla besökare. De mindre bildformaten gjorde att jag sparade ytterligare 10-20 kb per arkivbild.När jag körde Pingdom-testet igen var WPG:s sidstorlek bara 1,1 Mb – 700 kb mindre än tidigare. Genom att optimera bilderna lyckades jag alltså minska sidans storlek med över 30 procent. Det är en dramatisk skillnad.Se över typsnittDen genomsnittliga storleken på webbplatser har ökat kraftigt de senaste åren, och en starkt bidragande orsak är att allt fler webbplatser laddar in typsnitt från webbtjänster som Google Fonts och Typekit. WordPressguider.se är en av dem. Den använder Typekit till att ladda in Adelle för rubriker och Proxima Nova för brödtext.Jag försökte vara restriktiv i hur många vikter jag inkluderade när jag designade WPG, och typsnitten vägs därför in på 220 kilobyte. Det är ganska mycket, men det är en siffra som jag kan leva med. Jag skulle kunna spara runt 150 kilobyte genom att byta ut brödtexttypsnittet Proxima Nova mot ett standardtypsnitt som Helvetica eller Arial, men riktigt så långt är jag inte villig att gå i dagsläget. Det kan dock vara bra att ha i åtanke för framtiden.WP Super CacheJetpack-optimeringen och ikontypsnittet minskade antalet förfrågningar, och bildoptimeringarna bantade ned sidans filstorlek. WP Super Cache är kronan på verket. WP Super Cache är ett tillägg som tar en dynamisk WordPress-webbplats och producerar statiska HTML-filer av dess innehåll. När en besökare visar webbplatsen får hen se den statiska HTML-filen, vilket innebär att WordPress inte behöver köra tidskrävande PHP-funktioner för varje enskild besökare. Resultat: Allt på webbplatsen laddar snabbare. Magiskt.WP Super Cache är dessutom busenkelt att använda. Du behöver bara installera tillägget, bocka för ”Aktivera cachning” och spara inställningarna. Det är gjort på fem minuter, och skillnaden i hastighet är uppenbar.SlutresultatetNär jag började jobba på att optimera WordPressguider.se gav Pingdoms hastighetsverktyg följande resultat:Laddningstid: 4,36sSidans storlek: 1,9 MbAntal förfrågningar: 111Efter att jag har gått igenom stegen ovan får jag följande resultat:Laddningstid: 1,97sSidans storlek: 1,1 MbAntal förfrågningar: 86Två sekunder låter kanske inte som en särskilt stor förbättring, men det kan utgöra skillnaden mellan en nedstängd webbläsarflik och ett annonsklick. Inte ett dåligt resultat för någon timmes arbete. Jag hoppas att den här guiden har visat hur man med ganska enkla medel kan hålla nere laddningstiderna och sidstorleken på sin WordPress-webbplats. Anders NorénJag startade min första WordPress-sajt 2007 och har designat åtskilliga sajter på plattformen sedan dess, både som hobby och som uppehälle. Jag grundade WordPressguider.se år 2010. www.andersnoren.se info@wordpressguider.se @andersnoren WordPressTeman.com 2.0 lanseras Importera inlägg från Blogg.se eller Aftonbladet Blogg till WordPress Lägg till delningsknappar i RSS-flödet på en WordPress-webbplats 1 kommentar Lägg till kommentar → Staffan26 april 2018 kl. 20:55Jag vill rekommendera tillägget Shortpixel Image Optimizer för automatisk komprimering av bilder i WordPress. Riktigt bra komprimering utan att förlora kvalité, plus att den också kan omvandla png till webp-bilder, som har bättre kompression än jpeg. Kan minska storleken med upp till 90% med i princip bibehållen kvalité.Skriv en kommentar Avbryt svarDin e-postadress kommer inte att publiceras.Namn *E-postadress *Webbplats Hur du startar en WP blogg Att välja webbhotell för WordPress 2018Av Anders Norén / 8 januari 2018 WordPressTeman.com 2.0 lanserasAv Anders Norén / 5 december 2014 Bättre WordPress-säkerhet i tio stegAv Anders Norén / 6 juli 2014 Använd utvalda bilder i WordPressAv Anders Norén / 6 maj 2014 Börja tjäna pengar på din bloggAv Anders Norén / 3 mars 2010 Att välja webbhotell för WordPress 2018Av Anders Norén / 8 januari 2018 WordPressTeman.com 2.0 lanserasAv Anders Norén / 5 december 2014 Lägg till delningsknappar i RSS-flödet på en WordPress-webbplatsAv Anders Norén / 18 november 2014 Snabba upp WordPress: En fallstudie med WordPressguider.seAv Anders Norén / 14 november 2014 Grundkurs i child themes för WordPressAv Anders Norén / 7 november 2014 Tack!Linda / 25 september 2018 Vart tog Oderland vägen som kanske är ett av de bästa när det gäller W...Danne / 19 augusti 2018 Gammalt men fortfarande aktuellt - tack för bra tips :-)Jonas / 15 juli 2018 Jag vill rekommendera tillägget Shortpixel Image Optimizer för automat...Staffan / 26 april 2018 Tack för rak och enkel information. Har ingen blogg än men snartJill / 9 mars 2018 Allmänt15 inläggDesign15 inläggFå besökare2 inläggFör nybörjare17 inläggNyheter1 inläggSEO4 inläggTeman6 inläggTillägg5 inläggTjäna pengar4 inlägg 2 Tjäna pengarBlockera vissa annonser från AdSense 0 SEOMarkera relevant innehåll för AdSense 3 För nybörjareInstallera WordPress 9 DesignLägg till en Gilla-knapp för Facebook på din WordPress-blogg Gratis Garfunkel GarfunkelGarfunkel visar dina bilder, videoklipp och inlägg i ett stiligt rutmönster. Demo Läs mer © 2016 Wordpressguider.seHemOm WPGBli skribentArkiv Använder du WPG, godkänner du cookies. mer info OKWordPressguider.se använder cookies för att ge användarna en riktigt bra användarupplevelse. Genom att använda sajten godkänner du att cookies används.Stäng