Share
Ge din webbplats ett steg! Genomför viktiga optimeringstekniker som kommer att förbättra inte bara din YSlow poäng, men din Google rankas också. I den här handledningen kommer vi att täcka alla aspekter av W3 caching, ySlow, Google sidhastighet, CSS sprites & htaccess regler, för att uppnå en hög ySlow-poäng som jag har gjort på min blogg.
En snabb notering innan vi börjar, även om denna handledning kommer att täcka allt så mycket detaljer som krävs, kommer det (om möjligt) att vara genvägar för att spara lite tid.
Installera ett cacheplugin: Först och främst, oavsett vilket caching-plugin du använder, stäng av det NU! Om det inte är den mäktiga W3 Total cachen, så är det vad vi ska jobba med här. (Ok, så det blev lite starkt, men jag har använt många cache-plugins och W3 är min favorit. Om du använder någon annan av någon anledning, är det nog bra - vi kommer att flytta med W3 rekommendation men.) Hoppa över till din "Lägg till ny" plugins avsnittet i WordPress, sök "W3 Total Cache" ladda ner det, installera det men sätt inte på det ... ja ändå ändå ändå.
Installera en plugin för databashanterare: Nästa behöver du ytterligare ett plugin som heter "WP-DBmanager" igen sök och installera det här så att du inte har några andra databas plugins installerade.
Innan vi fortsätter och börjar förbättra din webbplats kan vi först se vad som handlar om. Öppna Google Chrome eller installera den om du inte redan har den. När du är i Chrome installera ySlow-plugin HÄR när du har installerat ser du en ny ikon längst upp till höger på skärmen. Klicka på det. (Se till att du är på hemsidan för din webbplats)
ySlow kommer då att kontrollera din webbplats, berätta vad som är bra, vad är dåligt och allt däremellan. Vi vill fokusera först på allt som ligger under en grad B. Nedan kommer jag att springa igenom varje W3-inställning, du behöver förbättra dina sidor, ladda tid.
När W3 Total Cache är påslagen kommer du att se en ny sidofält fliken "Prestanda" klicka på den. Nu kommer vi självklart att springa men alla de olika sektionerna av W3 men för att spara dig en tid kan du importera W3-inställningsfilen, bunden i "källfilerna" och hoppa till steg 2C.
Här är alla inställningar för W3 sitta. Låt oss först titta på "Allmänna inställningar", du vill kryssa i följande rutor (för att aktivera):
Sidcache (välj "Disk: Förbättrad" i rullgardinsmenyn) - Cachningssidor minskar svarstiden på din webbplats och ökar storleken på din webbserver.
Minifiera (Välj "Manuell", lämna de övriga inställningarna). - Minifiering kan minska filstorleken för HTML, CSS, JS och feeds respektive med ~ 10% i genomsnitt.
Kryssa inte databasbuffert (vi sorterar det senare senare via en annan metod)
Objektcache (välj "Disk" i rullgardinsmenyn) - Objektkachning ökar kraftigt prestanda för högdynamiska platser (som använder Objekt Cache API).
Browser Cache - Aktivera HTTP-komprimering och lägg till rubriker för att minska serverbelastningen och minska filens laddningstid.
Lämna CDN, Larn & Cloudflare orörd. (igen för att göra detta snabbt ladda upp inställningsfilen som ingår i "källfilerna" via alternativet längst ned i "Allmänna inställningar")
Klicka på fliken "Minifiera" / länken längst upp på W3-panelen / sidan. I avsnittet "HTML & XML" kontrollerar du att de tre första rutorna är markerade. Klicka sedan på knappen "Hjälp" längst upp.
När denna popover laddas upp kommer du att möta en lista med javascript-filer, följt av stylesheets som din webbplats länkar till. I huvudsak vill vi försöka ticka allt, med undantag för:
Jquery-filer
Google-annonser (eller annonser för den delen)
Alla statistik.wordpress.js-filer (du kommer få dessa om du har jetpack installerat
Men för CSS kan du ganska säkert välja dem alla. Nu är det här inte en exakt vetenskap, eftersom det här minskar dina temafiler (oroa dig inte om det är icke destruktivt) och det finns många olika teman som alla använder en mängd olika filer, plugins och funktioner. Förhandsgranska dina ändringar innan du skickar dem.
Minifiera är en av de största förbättringarna du kommer att integrera, när du väl har valt alla dina filer (och gjort samma med varje tema, om du använder mer än en) klickar du på "Apply & close", direkt följt av "Spara alla inställningar "(distribuera det om din webbplats fortfarande ser ut / fungerar detsamma).
När du är på fliken "Browser Cache" / sida måste du ändra "Livets upphörande livstid" till 691200 sekunder. Detta ökar din ySlow-poäng omedelbart.
Nu går du tillbaka till "Allmänna inställningar" och klickar på "Töm alla caches", gå sedan till din hemsida och kör ySlow-testet igen, du borde se en bra förbättring.
Under fliken Prestanda i WordPress-backenden ska det finnas en annan flik med namnet "Database" (om inte då gå tillbaka och aktivera det).
Nu är det väldigt enkelt att du behöver göra tre saker, säkerhetskopiera, reparera, optimera.
För att säkerhetskopiera klickar du på "Backup DB" och sedan längst ner på "Backup" (oroa dig inte om gzipping).
Därefter vill vi reparera din databas (bara inkase) så gå till "Repair DB" i sidofältet. Klicka på knappen "Reparera" längst ner.
Slutligen optimera det. Klicka på "Optimera DB" -fältet, och du har gissat det, klicka på knappen "Optimera" längst ner.
För att undvika denna process pop igen i "DB Options" sidfältet fliken. I botten kommer det att finnas en sektion "Automatisk schemaläggning". Se till att säkerhetskopieringar görs VARJE DAG (du kan inte vara för försiktig) och sedan ställa in den för att optimera, säg några dagar och reparera en gång i veckan. Spara sedan ändringarna.
Nu i ySlow har du förmodligen märkt i avsnittet "Få färre HTTP-förfrågningar" en sträng text som säger något som "Den här sidan har 10 externa bakgrundsbilder. Prova att kombinera dem med CSS sprites. "
Föreställ dig besparingarna om alla dessa små bilder skulle kunna vara bara en bild ... Det skulle säkert påskynda sakerna. För detta kommer vi att använda ett gratis verktyg som heter "Spriteme" så gå vidare till webbplatsen HÄR (gör det på en ny flik men se till att din webbplats finns på hemsidan).
När du har både din hemsida öppen i en flik och spriteme öppnas i en annan dra "SpriteMe" -texten på fliken som har din webbplats i den. En ruta visas längst upp till höger om fliken / fönstret. Du vill klicka på "make sprite" -knappen som finns i "Föreslagna Sprites" rutan. När det gör det är det magiskt att ladda ner den bild som den har skapat och ladda upp den till någonstans på din webbplats (helst inom det tema du använder). 
Klicka nu på "exportera CSS" -knappen längst upp till höger om "SpriteMe" popover, kopiera och klistra in den css-kod som den har gett dig (det är rätt ALLT) direkt till botten av dina teman "style.css" eller var som helst Den kommer att användas istället för standardkoden (eftersom vi inte vill skriva över standardtema). Du måste se till att den andra "bakgrundsbilden: url" ändras från "http://www.jaredhirsch.com" till var du än sparar spritbilden från tidigare.
När du har gjort det, vänligen, återigen "töm alla caches" i "Prestanda" sidfältet.
För det mesta använder jag personligen alltid Photoshop för att komprimera mina bilder innan de laddas upp, men för många av dig är det inte ett alternativ eftersom du inte har Photoshop. Så här hjälper jag dig till hur du minskar filstorleken på dina bilder.
Först och främst vill du se till att alla temabilder är optimerade och du kan göra det här köpet och fånga dem alla och whacking dem i den här fantastiska lilla appen, kallad "ImageOptim"
När dina temafoton är trevliga en komprimerad kanske du vill titta på plugins som "Smush.it" för Wordpress som optimerar bilder du kan använda i inlägg och liknande.
Detta är verkligen en viktig optimeringsteknik. För att aktivera PHP GZIP-komprimering, redigera php.ini (exempel platser som i / etc / eller / usr / local / lib) med någon textredigerare som vi och hitta följande direktiv:
zlib.output_compression
Standardvärdet är Av, ändra inställningen till På så att linjen ser ut som nedan:
zlib.output_compression = På
Starta om Apache HTTPD-servern efter ändringen. Varje webbsida som produceras av PHP kommer nu att komprimeras innan du skickar över Internet till webbläsaren för att avkoda.
PHP har också ett direktiv som kan användas för att justera komprimeringsnivån. För att ställa in komprimeringsnivån, använd följande rad i php.ini, med giltiga värden mellan 1 och 9, där 1 är minst komprimerad och 9 är mest komprimerad. Standard komprimeringsnivå är 6, vilket ger den bästa komprimeringen utan att försämra serverprestanda.
zlib.output_compression_level = 6
Tidigare uppnås PHP-komprimering genom att ange kod i början av varje PHP-skript. Metoden rekommenderas inte eftersom varje skript måste ändras. zlib aktivering i php.ini kommer att gälla för alla PHP-skript på webbservern utan att uteslutas.
Om det är omöjligt att ändra php.ini-filen eller inte har kontroll över php.ini, speciellt på en gemensam webbhotell, kan PHP GZIP-komprimeringen också ställas in via .htaccess-filen, som vanligen finns på webbplatsens rot. För att aktivera PHP GZIP-komprimering via Zlib, lägg bara till följande rad till .htaccessfile. Observera att varje webbplats måste ändras individuellt.
php_flag zlib.output_compression on
Nackdelen med att möjliggöra GZIP-komprimering via PHP är att endast webbsidor som genereras av PHP-skript kommer att komprimeras av GZIP-kodning. Alla externa CSS- eller JavaScript-filer kommer inte att komprimeras. För förmågan att aktivera GZIP-komprimering på alla filtyper använder vi mod_deflate eller mod_gzip på HTTPD-webbservern istället.
Kontrollera och verifiera att GZIP-komprimeringen körs ordentligt
När vi kommer fram till slutet av denna handledning vill jag bara springa igenom några sista saker. Nu när dina bilder har krossats och sprites har gjorts kan det hända att du vill rensa både webbläsarens cache och en gång till "töm alla caches" i "Prestanda" sidfältet fliken.
Låt oss nu gå tillbaka, logga ut från WordPress ladda upp webbplatsens hemsida och gör ett ySlow-test. Återigen borde det ha stigit, i CDN-delen av ySlow har du möjlighet att "Lägg till som CDN" på vissa komponenter. Genom att göra detta kommer du att öka din betyg ännu mer.
Om du vill korrekt lägga till en dedikerad CDN kan jag föreslå att du följer denna handledning.
Nu Fingers crossed du borde titta på en betygsskala En testresultat och om du jämför det här med Googles egna sidhastighetsrapportstest ser du en mycket hälsosam poäng.
En del av ySlow som jag inte har täckt är "Cookie free domain", vilket är när webbläsaren gör en begäran om en statisk bild och skickar cookies tillsammans med begäran, servern har inte någon användning för dessa cookies. Så de skapar bara nätverkstrafik utan någon bra anledning. Du bör se till att statiska komponenter begärs med cookiefria förfrågningar. Skapa en underdomän och värd alla dina statiska komponenter där.
Om din domän är www.example.org kan du vara värd för dina statiska komponenter onstatic.example.org. Om du redan har satt cookies på domänen på toppnivå example.org i motsats till www.example.org, kommer alla begäranden till static.example.org att inkludera dessa cookies. I det här fallet kan du köpa en helt ny domän, värd dina statiska komponenter där och behåll den här domänen utan kakor. Yahoo! använder yimg.com, YouTube använder ytimg.com, Amazon använder bilder-amazon.com och så vidare.
En annan fördel med att hålla statiska komponenter på en cookiefri domän är att vissa proxyer kan vägra att cache de komponenter som begärs med cookies. I en relaterad anteckning, om du undrar om du ska använda example.org eller www.example.org för din startsida, bör du överväga cookieeffekten. Om du lämnar www lämnar du inget annat val än att skriva cookies till * .example.org, så av bästa skäl är det bäst att använda www-underdomänen och skriva cookies till det underdomänen.
Jag kommer inte att gå in på detta men ovanstående bör ge dig en bra idé. Jag kommer att gå över detta i djupet i en senare handledning. Detta förbättrar poängen men det är inte helt nödvändigt.
Det här är de steg jag tar när man bygger webbplatser och de gör stor skillnad när det gäller att förbättra hastigheten och möjliggöra snabba svarstider. För er som behöver mer information eller om du vill ha hjälp med att genomföra rutinerna, vänligen kommentera nedan eller skicka mig ett meddelande via min författarprofil.
Accentsconagua