Share
Gi nettstedet ditt et løft! Implementere viktige optimaliseringsteknikker som vil forbedre ikke bare din YSlow score, men din Google rangerer også. I denne opplæringen vil vi dekke alle aspekter av W3 caching, ySlow, Google sidehastighet, CSS sprites & htaccess regler, for å oppnå en høy ySlow score som jeg har gjort på bloggen min.
Et kort notat før vi starter, selv om denne opplæringen vil dekke alt i så detaljert detalj som det kreves, vil det (når det er mulig) være snarveier, for å spare deg litt tid.
Installer et caching-plugin: Først av alt, uansett caching-plugin du bruker, slår du av nå! Med mindre det er den mektige W3 Total cachen, så er det det vi skal jobbe med her. (Ok, så det kom litt sterk, men jeg har brukt mye av caching plugins og W3 er min favoritt. Hvis du bruker en annen av en eller annen grunn, er det sannsynligvis bra - vi vil flytte sammen med W3 anbefaling skjønt.) Gå over til "Legg til ny" plugin-delen i WordPress, søk "W3 Total Cache" laste den ned, installer den, men ikke slå den på ... vel ikke likevel uansett.
Installer et Database Manager Plugin: Deretter trenger du en annen plugin kalt "WP-DBmanager" igjen søk og installer dette, slik at du ikke har noen andre database plugins installert.
Før vi går videre og begynner å forbedre nettstedet ditt, kan vi først se hva vi hadde å gjøre med. Åpne Google Chrome, eller installer den hvis du ikke allerede har den. Når du er i Chrome installer ySlow-plugin HER en gang installert, vil du se et nytt ikon øverst til høyre på skjermen. Trykk på det. (Kontroller at du er på hjemmesiden til nettstedet ditt)
ySlow vil da sjekke nettstedet ditt, fortelle deg hva som er bra, hva er ille og alt i mellom. Vi ønsker å fokusere først på alt som er under klasse B. Nedenfor vil jeg løpe gjennom hver W3-innstilling du trenger for å forbedre nettstedene dine, load time.
Når W3 Total Cache er slått på, vil du se en ny sidebar-kategorien, kalt "Ytelse", klikke på den. Nå vil vi selvfølgelig løpe om alle de forskjellige delene av W3, men for å spare deg litt tid kan du importere W3-innstillingsfilen, pakket i "kildefilene" og hoppe til trinn 2C.
Dette er hvor alle innstillingene for W3 sitter. La oss først se på "Generelle innstillinger", du vil krysse av følgende bokser (for å aktivere):
Page Cache (velg "Disk: Enhanced" i rullegardinmenyen) - Caching-sider vil redusere svartiden på nettstedet ditt og øke omfanget av webserveren din.
Minifiser (Velg "Manuell", la de andre innstillingene). - Minifisering kan redusere filstørrelsen for HTML, CSS, JS og feeds henholdsvis med ~ 10% i gjennomsnitt.
Ikke kryss Database Cache (vi vil sortere dette senere via en annen metode)
Objektbuffer (velg "Disk" i rullegardinmenyen) - Objektkufring øker ytelsen for svært dynamiske nettsteder (som bruker Object Cache API).
Browser Cache - Aktiver HTTP-komprimering og legg til overskrifter for å redusere serverbelastningen og redusere filbelastningstiden.
La CDN, Larn & cloudflare uberørt. (igjen for å gjøre dette raskt last opp innstillingsfilen som er inkludert i "kildefilene" via alternativet nederst i "Generelle innstillinger")
Klikk på "Minifer" -fanen / linken øverst på W3-panelet / -siden. I delen "HTML & XML" må du kontrollere at de tre første boksene er merket. Deretter klikker du på "Hjelp" -knappen øverst.
Når denne popover laster opp vil du bli møtt med en liste over javascript-filer, etterfulgt av stilark som nettstedet ditt knytter til. I hovedsak vil vi prøve å krysse alt unntatt:
Jquery-filer
Google-annonser (eller noen annonser for den saks skyld)
Alle stats.wordpress.js-filer (du vil ha disse hvis du har jetpack installert
Men for CSS kan du ganske trygt velge dem alle. Nå er dette ikke en eksakt vitenskap, da dette reduserer temafilene dine (ikke bekymre deg for det er ikke destruktive), og det er mange forskjellige temaer som alle bruker en rekke forskjellige filer, plugins og funksjoner. Forhåndsvis forhåndsvis dine endringer før du sender dem.
Minify er en av de største forbedringene du vil integrere, når du har valgt alle filene dine (og gjort det samme med hvert tema, hvis du bruker mer enn ett), klikk deretter "Apply & close", direkte etterfulgt av "Lagre alle innstillinger "(distribuere det hvis nettstedet ditt fortsatt ser ut / fungerer det samme).
Når du er på "Browser Cache" -fanen / -siden, må du endre "Utløperens levetid" til 691200 sekunder. Dette vil umiddelbart øke ySlow-poengsummen din.
Gå nå tilbake til "Generelle innstillinger" og klikk "Tøm alle caches", gå deretter til hjemmesiden din og kjøre ySlow-testen igjen, du bør se en fin forbedring.
Under "Ytelses" -fanebladet i WordPress-backenden, bør det være en annen fan med navnet "Database" (hvis ikke, gå deretter tilbake og aktivere det).
Nå er dette veldig enkelt du må gjøre tre ting, backup, reparasjon, optimalisering.
For å sikkerhetskopiere klikker du på "Backup DB" og deretter nederst på "Backup" (ikke bekymre deg om gzipping).
Neste opp vil vi reparere databasen din (bare incase) så gå til "Repair DB" i sidefeltet. Klikk på "Reparer" -knappen nederst.
Til slutt optimaliserer du det. Klikk på "Optimaliser DB" -panelet og du har gjettet det, klikk på "Optimaliser" -knappen nederst.
For å unngå denne prosessen, klikker du igjen på "DB Options" sidebar-fanen. På bunnen er det en "Automatisk planlegging" -seksjon. Forsikre deg om at sikkerhetskopieringen er ferdig hver dag (du kan ikke være for forsiktig) og sett den til å optimalisere si noen få dager og reparer en gang i uken. Lagre endringene.
Nå i ySlow vil du sannsynligvis ha lagt merke til i «Gjør færre HTTP-forespørsler» en streng med tekst som sier noe som "Denne siden har 10 eksterne bakgrunnsbilder. Prøv å kombinere dem med CSS sprites. "
Tenk på besparelsene hvis alle de små bildene kunne være bare ett bilde ... Det ville sikkert få fart på ting. For dette skal vi bruke et gratis verktøy kalt "Spriteme" så hodet videre til nettstedet HER (gjør det i en ny kategori, men vær sikker på at nettstedet ditt er på hjemmesiden).
Når du har både hjemmesiden din åpen i en kategori og spriteme åpne i en annen, drar du "SpriteMe" -teksten på fanen som har nettstedet ditt i det. En boks vises øverst til høyre i kategorien / vinduet. Du vil ønske å klikke på "make sprite" -knappen som ligger i "Suggested Sprites" -boksen. Når det er gjort, er det magisk å laste ned bildet det har opprettet og laste det opp til et sted på nettstedet ditt (helst innenfor temaet du bruker). 
Klikk nå på "Eksporter CSS" -knappen øverst til høyre i "SpriteMe" popover, kopier og lim inn css-koden den har gitt deg (det er riktig ALLE av det) direkte inn i bunnen av temaene "style.css" eller hvor som helst Den skal brukes i stedet for standardkoden (som vi ikke ønsker å overskrive standard temakode). Du må sørge for at det andre "bakgrunnsbildet: url" endres fra "http://www.jaredhirsch.com" til hvor du sparer bildet fra tidligere.
Når du har gjort dette, vennligst vær så snill å "tøm alle caches" i "Performance" sidebar-fanen.
For det meste bruker jeg personlig alltid Photoshop til å komprimere bildene mine før opplasting, men for mange av dere er dette ikke et alternativ fordi du ikke har photoshop. Så her vil jeg hjelpe deg med å redusere filstørrelsen på bildene dine.
Først vil du sørge for at noen temabilder er optimalisert, og du kan gjøre dette, og få tak i dem alle, og whacking dem i denne fantastiske lille appen, kalt "ImageOptim"
Når temabildene dine er hyggelige og komprimerte, vil du kanskje se plugins som "Smush.it" for Wordpress som optimaliserer bilder du kan bruke i innlegg og lignende.
Dette er absolutt en viktig optimaliseringsteknikk. For å aktivere PHP GZIP-komprimering, rediger php.ini (f.eks. Steder i / etc / or / usr / local / lib) med hvilken som helst tekstredigerer som vi, og finn følgende direktiv:
zlib.output_compression
Standardverdien er Av, endre innstillingen til På for å få linjen til å se ut som nedenfor:
zlib.output_compression = På
Start Apache HTTPD-serveren på nytt etter endringen. Hver nettside produsert av PHP vil nå bli komprimert før du sender over Internett til nettleseren for å dekode.
PHP har også et direktiv som kan brukes til å justere kompresjonsnivået. For å angi komprimeringsnivået, bruk følgende linje i php.ini, med gyldige verdier mellom 1 og 9, hvor 1 er minst komprimert og 9 er mest komprimert. Standard kompresjonsnivå er 6, noe som gir best komprimering uten å forringe serverens ytelse.
zlib.output_compression_level = 6
Tidligere oppnås PHP-komprimering ved å skrive inn kode i begynnelsen av hvert PHP-skript. Metoden anbefales ikke da hver enkelt skript må endres. zlib aktivering i php.ini vil gjelde for alle PHP-skript på webserveren uten utelukkelse.
Hvis det er umulig å endre php.ini-filen, eller ikke har kontroll over php.ini spesielt på en delt hosting, kan PHP GZIP-komprimeringen også settes opp via .htaccess-fil, som vanligvis ligger på roten til nettstedet. For å aktivere PHP GZIP-komprimering via Zlib, bare legg til følgende linje til .htaccessfile. Merk at hvert nettsted må endres individuelt.
php_flag zlib.output_compression on
Ulempen med å aktivere GZIP-komprimering via PHP er at bare nettsider generert av PHP-skript vil bli komprimert av GZIP-koding. Alle eksterne CSS- eller JavaScript-filer blir ikke komprimert. For muligheten til å aktivere GZIP-komprimering på alle filtyper, bruker mod_deflate eller mod_gzip på HTTPD-webserver i stedet for.
Kontroller og kontroller at GZIP-komprimeringen kjører riktig
Når vi kommer til slutten av denne opplæringen, vil jeg bare løpe gjennom noen siste ting. Nå som bildene dine er blitt knust og sprites har blitt gjort, kan det hende du vil fjerne både nettleserens cache og en gang til "tøm alle caches" i "Performance" sidebar-fanen.
La oss nå gå tilbake, logge ut av WordPress, laste opp nettstedens hjemmeside og gjøre en ySlow-test. Igjen skal det ha steget, i CDN-delen av ySlow har du muligheten til å "Legg til som CDN" på enkelte komponenter. Å gjøre dette vil øke karakteren din enda mer.
Hvis du ønsker å legge til en dedikert CDN, kan jeg foreslå at du følger denne veiledningen.
Nå Fingers krysset du bør se på en klasse A test score og hvis du sammenligner dette med Googles egen sidehastighet rapport test vil du se en veldig sunn poengsum.
En del av ySlow som jeg ikke har dekket er "Free Cookie Free Domain", som er når nettleseren gjør en forespørsel om et statisk bilde og sender informasjonskapsler sammen med forespørselen, har serveren ikke bruk for disse informasjonskapslene. Så de oppretter bare nettverkstrafikk uten god grunn. Du bør sørge for at statiske komponenter blir bedt om med informasjon uten informasjonskapsler. Opprett et underdomene og vert for alle dine statiske komponenter der.
Hvis domenet ditt er www.eksempel.org, kan du være vert for de statiske komponentene onstatic.example.org. Men hvis du allerede har angitt informasjonskapsler på toppnivå domenet example.org i motsetning til www.example.org, vil alle forespørsler til static.example.org inkludere disse informasjonskapslene. I dette tilfellet kan du kjøpe et helt nytt domene, hoste dine statiske komponenter der, og beholde dette domenet uten informasjonskapsler. Yahoo! bruker yimg.com, YouTube bruker ytimg.com, Amazon bruker images-amazon.com og så videre.
En annen fordel ved hosting av statiske komponenter på et informasjonskapselfritt domene er at noen proxyer kan nekte å cache komponentene som er forespurt med informasjonskapsler. Hvis du lurer på om du skal bruke example.org eller www.example.org for hjemmesiden din, bør du vurdere påvirkningen av informasjonskapselen. Udelatelse av www gir deg ikke annet valg enn å skrive informasjonskapsler til * .example.org, så det er av ypperste grunner det beste å bruke www underdomenet og skrive informasjonskapslene til det underdomenet.
Jeg vil ikke gå inn i dette, men det ovenfor skal gi deg en god ide. Jeg vil gå over dette i dybden i en senere opplæring. Dette forbedrer poengsummen, men det er ikke helt avgjørende.
Dette er trinnene jeg tar når du bygger nettsteder, og de gjør stor forskjell når det gjelder å forbedre hastigheten og tillate rask responstid. For de av dere som trenger mer info eller som ønsker hjelp til å utføre prosedyrene, vennligst kommenter nedenfor eller send meg en melding via min forfatterprofil.
Accentsconagua