Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Optimizare Google PageSpeed la 100 în WordPress

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called Improving Google PageSpeed.
Hands On Improving Google PageSpeed
Installing the Google PageSpeed Module

Romanian (Română) translation by Ermal Yota (you can also view the original English article)

Final product image
What You'll Be Creating

Cum se ajunge la o PageSpeed 100

Bine ati venit la partea a doua din seria noastră pe Google PageSpeed. În primul episod, am optimizat PageSpeed site-ul meu apoi tema, MySiteMyWay pe Construct. Am reuşit pentru a ajunge la 70 Mobile și desktop-ul 86.

Cu toate acestea, cu MySite pe închidere, am ales o nouă temă şi a atins o PageSpeed 100 pentru Mobile si Desktop. Mi-a luat aproximativ 12 ore de efort pentru a realiza acest lucru. Acum, site-ul meu de performanţă este unul dintre site-urile WordPress mai rapid pe care l-am văzut într-o lungă perioadă de timp, a verifica it afară. Navigare 's aproape instantanee.

In acest tutorial, eu voi te plimbi prin cum am realizat acest lucru şi ceea ce am învăţat despre WordPress şi Google PageSpeed. Pentru o mare parte a zilei am lucrat pe ea, m-am gândit am putea top în anii 90. Am fost un pic de surprins atunci când a sărit brusc la 100 pentru Desktop, şi au existat doar câteva detalii stânga pentru a maximiza Mobile.

Pentru cei care nu ştiu, Google PageSpeed este un instrument gratuit care evaluează performanţa şi gradul de utilizare a site-ul pentru platforme mobile și desktop. Este foarte important, deoarece Google îl foloseşte pentru a determina elementele cheie ale noastre SEO ranking, adică cât de mare ne apar în rezultatele de căutare.

În cazul în care doriţi fundal mai mult despre avantajele site-ul crescut viteza, citiţi Moz pe ce site-ul viteza optimizarea ar trebui să fie parte a vă SEO strategie. Acesta subliniază, "... mai multe studii de caz au arătat paginile mai repede de încărcare corelează puternic pentru venituri mai mari."

Google şi WordPress nu face acest lucru uşor

În cele din urmă, optimizarea PageSpeed mea a luat o mulţime de timp şi efort şi a lăsat site-ul meu vulnerabile la viitoare plug-in şi actualizări de script-ul Google. O mulţime de acest lucru este complet confuză, orientat spre detaliu şi consumatoare de timp. Este de asemenea un pic nebun de luare şi minte-numbing. Multumesc, Google.

Un site static, de obicei, are un fisier CSS si JS include care pot fi uşor minified şi combinate. WordPress este mult mai complexă. Atât de mult este creat dinamic prin WordPress — hm-arhitectura mai putin decat perfecta.

Poate necesita timp pentru a găsi în cazul în care fişierele sunt create, dacă acestea sunt în teme sau plugin-uri şi cum pentru a aborda aceste probleme. Se pare că atunci când ai şapte plugin-uri, inclusiv fişierele de JavaScript şi doriţi pentru a minimiza si combina-le într-unul includ permițând regulat dop upgrades, este destul de o provocare în lumea în continuă schimbare teme şi plugin-uri WordPress.

Acest lucru face o mulţime de dezvoltatori trist:

PageSpeed Like a Sad Developer by Picasso Paris France

Imagine de credit: meu de fotografie la Muzeul Picasso din Paris. Acum ar putea fi numit "Trist dezvoltator combaterea PageSpeed mobile 55 / Desktop 62"

Asta a spus, lasă-mă să vă încurajez arătând cum am facut-o (nu aveţi nimic util pentru a face astăzi, a face tu?). Păstraţi în minte, site-ul dumneavoastră are nevoie poate fi diferită de a mea un pic.

Înainte a începe, vă rugăm să reţineţi, eu încercaţi să participe la discutia de mai jos. Dacă aveţi o întrebare sau o sugestie de subiect, vă rugăm să posta un comentariu mai jos sau contactati-ma pe Twitter @reifman. Sunt interesat şi de experienţa dumneavoastră cu WordPress și PageSpeed.

Măsurile fundamentale de PageSpeed 100

Selectarea o temă nouă

Dacă sunteţi în piaţă pentru o nouă temă de WordPress şi evaluează PageSpeed, aţi putea fi surprins de faptul că scorurile pentru teme cunoscute adesea, a alerga în anii 60 şi anii 70, dar, de asemenea, până la anii 90. Aici sunt o serie de articole evaluare teme și PageSpeed via ColorLib şi WPMU. În orice caz, m-am aşteptat mai mare.

Doar ca un exemplu de industria asteptarile, site-ul New York Times scoruri 53/55 pentru mine, mult sub 100.

PageSpeed diverse teme este foarte mult afectată de numărul şi dimensiunea de fişiere JavaScript şi CSS care le utilizează, numărul de imagini utilizate şi mărimea lor, şi abordarea punerii lor mobil, adică obicei receptiv în zilele noastre. Unele creatorii nu par să se uite la PageSpeeds lor ca ei construi.

Mediu de teme matrice

Pentru acest tutorial, am de gând să se concentreze pe imbunatatirea site-ul meu personal, JeffReifman.com. Am ales mediu de matrice teme pentru câteva motive.

Primul a fost viteza sa de bază. Mediu scoruri Mobile 74 și 89 de Desktop pentru a începe de la serverul lor demo. În timp ce acest lucru a fost deja uşor mai bine decât am avut maximizat Construct sa, a fost o temă mai moderne şi au existat o mulţime din restul de optimizare paşi am putea încerca. Am sperat să aducă PageSpeed în anii 80 ridicat sau scăzut 90s.

De asemenea, având în vedere creşterea de mobil cititori, am vrut să se îndepărteze de bazându-se pe sidebars — în special pentru plasare de publicitate (Sper să scrie despre meu noi directii de venituri în seria noastră în curs de desfăşurare de Google DFP). Tema medie face o treabă bună de pliere laterală stânga într-un meniu receptiv şi ascunderea acestuia dreptul de bara laterală.

Mediu pe iniţială PageSpeeds

Aici a fost PageSpeed iniţială pentru demo-ul de mediu (demo gazduieste este niciodată bine optimizat). A fost de fapt încurajator pentru a vedea ea a avut o mulţime de probleme nesoluţionate, pentru că a arătat că a fost mai bună decât mea Construct optimizat înainte de efort s-a aplicat şi sarcini similare, am ştiut că pentru a efectua pentru a maximiza scorul:

PageSpeed Optimization Array Themes Mobile Part A

Aici sunt mai multe probleme:

PageSpeed Optimization Array Themes Mobile Part B

Şi mai mult:

PageSpeed Optimization Array Themes Mobile Part C

Şi utilizator experienţa provocări, care mai au fost localizate:

PageSpeed Optimization Array Themes Mobile Part D

În cele din urmă, aici este scorul pupitru demo:

PageSpeed Optimization Array Themes Desktop Just One Part

Încurajată de scor Fundatia, am cumpărat şi instalat tema mediu pe serverul meu, şi trebuie să lucreze.

Ţineţi minte că schimbarea temelor pot fi destul de complicate. Pentru mine, înlocuind, eliminarea şi actualizarea shortcodes built-in la tema Construct a luat cel mai mult timp, si am nu este pe deplin terminat, ex. dropcaps, pullquote variante, butoane, tab-uri şi meniuri de navigare pe bază de filme. Meu disc pentru 100 ma împins să merge cu greu mai departe indiferent. Cum pentru a efectua masa căutare şi înlocuire în WordPress oferă unele soluţii bune pentru găsirea şi înlocuirea shortcodes.

În timp ce acest tutorial va ghida prin paşii exacţi pentru ridicarea site-ului PageSpeed la 100, acesta va ghida printr-o mulţime de soluţii posibile şi identifica obstacolele comune. Acolo este un alt mare resursa generalizate voi parts la sfârşitul.

Pietrele de temelie ale performanţelor în WordPress

Am de contact ArrayThemes un pic despre îndeplinirea sub-100 demo Tematica mediu. Au trimis un răspuns excelent:

Testul de optimizare PageSpeed ar trebui să fie luate cu un bob de sare... demo-ul nostru este fiind dinged pentru a nu cache-ul, dar nu avem de fapt nevoie de cache-ul pe demo-uri noastre... PageSpeed sugestii nu sunt în totalitate corecte sau exemplară a executării unei teme. Aceasta va depinde în întregime setup-ul, server, cache-ul şi alte optimizari vă decideţi pentru a face.

Acest lucru face un perfect punct la revizuirea elementele fundamentale comune pentru performanţă de WordPress de lansare. Toate domeniile de performanţă mai jos adresa care stau la baza PageSpeed scoruri, nu complet, dar elementele de bază.

Cache-ul

Caching-ul de WordPress este critică pentru performanţa, şi am scris în mod regulat despre preferatele mele: W3TC si Cache de lac, ex. WordPress optimizarea cu lacuri si W3 Total Cache.

Google PageSpeed improved with W3 Total Cache

Se pare că există o mână de plugin-uri concepute pentru a vă ajuta să ia provocarea de a eficiente de memorare în cache. Aici sunt două dintre cele mai bune pe care am încercat:

  • MINIT: Un WordPress plug-in pentru a combina CSS şi JavaScript fişiere.
  • Dependenţa Minification: Automat concatenează şi minifies orice script-uri şi foilor de stil enqueued folosind sistemul standard de dependenţă.
PageSpeed Dependency Minification Plugin

Imagine de credit: WordPress Taverna

Ambele au fost de ajutor, dar nici destul eliminat barierele pentru mine legate PageSpeed, cum ar fi integrarea CSS în meu<head>Tag-ul pentru a elimina problemele de PageSpeed; cu alte cuvinte, acest plug-in nu va probabil te tot drumul la 100 PageSpeed.</head> Am găsit Minification dependenţa să fie eficient şi util, dar lipsa de flexibilitate a făcut-mi pleca.

În cele din urmă, aş în mod repetat a reveni la W3 Total Cache şi găsi noi modalităţi mai puternic să apăsaţi-l pentru performanţă. Acesta nu este perfect si cu siguranta are unele bug-uri UX, ea a lucrat bine în moduri suficient pentru mine pentru a găsi calea mea cu alte abordări PageSpeed 100.

În final, am ales doar un nou plugin care a făcut-o uşor pentru a elimina PageSpeed probleme cu Disqus-voi revizui acest lucru în continuare de mai jos.

Content Delivery Networks (CDN)

Un alt serviciu care este critică este o reţea de livrare de conţinut. Mai devreme am scris despre accelera Your conţinut livrare cu KeyCDN la Envato Tuts şi apoi a decis să treacă la ele ca şi client.

Optimizing PageSpeed - KeyCDN Dashboard

În cele din urmă, există o varietate de CDNs pot alege de la, cum ar fi CloudFlare şi RackSpace pentru a numi doar câteva.

Optimizare imagine

Recent, am început experimentarea cu KeyCDN pe noi Optimus imagine de optimizare imagini şi WordPress plug-in. Există o posibilitate mic este condus de roboţi construit cu vechi Apple Lisas şi Mac-uri:

PageSpeed Optimus Image Optimization

Functioneaza bine, dar o altă alternativă popular este WP-Smush, un plug-in mai vechi cu peste 300.000 de utilizatori.

Eliminarea Render blocarea

Dacă aveţi o mare varietate de dosar care trebuie să fie încărcate la stil (CSS) şi activate (JS) funcţionalitatea paginii web, cele mai multe browsere va încetini după patru resurse sunt solicitate în paralel.

Aici este un exemplu de randare CSS blocarea plângere în PageSpeed:

PageSpeed Remove render blocking in JS and CSS

Acest lucru poate fi un element de WordPress greu pentru a elimina datorita arhitecturii Tematica şi plugin. Venim inapoi la ea.

Ce măsuri în cele din urmă împinse site-ul meu la 100?

Abordări orientate de optimizare

Dacă le-aţi făcut toate bazele major mai sus, îmbunătăţirea dumneavoastră PageSpeed cu WordPress pare să necesite efort semnificativ şi poate fi destul de consumatoare de timp.

Să mergem în pas cu pas prin zonele problemei identificate şi metode le-am rezolvat. Într-adevăr, am facut o cantitate mare de experimente cu diferite instrumente și abordări. Periodic am scăzut o abordare şi s-a întors la altul. Soluţia mea s-a dovedit a fi un mozaic destul bine gestionate de soluţii. Drumul nu a fost direct Yoda.

Minification de HTML, JavaScript şi CSS

De exemplu, iată cum minimiza HTML în W3 Total Cache:

PageSpeed W3TC Minification of HTML

Gruparea JavaScript la sfârşitul paginii

În mod similar, este uşor pentru a minimiza JavaScript în W3 Total Cache. Nota de mai jos că eu sunt ordonatori W3TC să încorporaţi fişierul comprimat nu în<head>Dar în schimb doar înainte.</head> Întârzierea JavaScript poate îmbunătăţi scorul PageSpeed.

PageSpeed W3TC Minification of JavaScript

Minimizarea CSS combinate de teme şi plugin-uri

Deoarece ambele teme şi plugin-uri folosesc JavaScript şi CSS, este nevoie de un pic de lucru pentru a minimiza-le împreună şi să le combine într-un singur fişier (şi care nu are chiar suficient pentru PageSpeed, care voi discuta în continuare mai jos).

Pentru a bloca plugin-uri de încărcare propriile CSS şi instrui W3TC pentru a încărca versiuni comprimate şi combinat, aveţi nevoie pentru a găsi plugin-ul mâner pentru fişierul CSS (distinctă de nume de fişiere) şi adăugaţi codul la tema să întrerupă plugin-ul instrucţiuni de încărcare. Apoi, introduceţi calea către fiecare fişier CSS în caseta de dialog W3TC mai sus pentru a fi încărcate cu ceilalti.

Blogger Justin Tadlock oferite unele orientări care să explice cum de a cere WordPress nu pentru a încărca fişiere CSS că plugin-uri meu a avut enqueued pentru încărcare. Răspunsul este să le retragă şi apoi încărcaţi un fişier combinate pe cont propriu.

Aici este meu cuprins plugin enqueuing sale JS şi CSS fişiere:

În urma Tadlock pe sugestia, am retras plugin-ul meu include în mea tema functions.php, incepand cu CSS-va trebui să găsească referințelor utilizate de către dezvoltator de plugin:

Am creat manual o fişiere CSS combinate cu aceste trei plugin foilor de stil. Apoi, am cerut W3TC să minify si combina acel fişier în proprie mega-stil, aşa cum se arată mai sus.

Optimizarea CSS de încărcare pentru PageSpeed

W3TC combina toate fişierele mele Tematica şi plugin, dar PageSpeed încă nu-i place văzând chiar un CSS (atât de mult pentru bune practici de dezvoltare HTML) includ:

PageSpeed Failing you because you still have one CSS file

Am în cele din urmă încărcat fişiere CSS nouă (numai şapte indicat mai jos). În primul rând, trebuie să găsi mânere plug-in pentru CSS şi să le retragă în temă aşa cum este descris mai sus. Apoi, trebuie să indicaţi-le toate la W3TC.

În timp ce există mai multe modalităţi de a obţine o versiunea minified de toate acestea, am luat de fapt doar W3TC pe fişier comprimat. Am scos toate argumentele interogare cache-ul, de exemplu? cbe3w2, cu căutare şi înlocuire în TextEditor. Eu sunt încă un utilizator loial TextMate, dar de fapt avea întârzieri imens şi se blochează ori de câte ori am încercat pentru a naviga un fişier CSS minified. Deci TextEditor ajutat edita aceste fişiere individual. Ne cerem scuze pentru purists, eu nu s-au mutat la sublim încă.

În timp ce a functionat pentru mine pentru a lipi meu minified CSS în antet meu, mai târziu am nevoie pentru a schimba-l pentru a obţine conţinutul de fişiere CSS dinamic şi le-a ecou în locul.

După ce am adăugat un alt plug-in pentru schimbul social, lipirea nu mai lucrat şi am avut de a separa fişierele cu mecanismul de mai sus. Acest lucru oferă mai multă flexibilitate pentru viitor. Google PageSpeed nu vede acest lucru, şi cache-ul meu de lac ascunde orice încetinire a două fişiere, inclusiv.

În cele din urmă, am configurat-toate fişierele mele de CSS în W3TC, făcut copii de fişiere comprimate, şi apoi oprit această caracteristică include:

PageSpeed W3TC Now Disabled - but prior used to compress all the CSS files

Un neajuns al W3TC este că acesta arată în mod repetat mesaje de eroare enervante, chiar dacă sunt în mod deliberat de folosind-o într-un mod neobişnuit.

Atunci când se deplasează în CSS fişiere din directoarele în plugin-ul, asiguraţi-vă că setați corect căile relative la imagini şi aşa mai departe pentru operarea de pe site-ul root sincer. Am avut o mulţime de situaţii în care imaginile nu ar încărca până am găsit în cazul în care pentru a rezolva aceste lucruri. Voi împărţi un exemplu în secţiunea de depanare de mai jos.

Caching-ul de script-uri externe în Browser

O formă amuzantă, Google PageSpeed se plânge dacă încarci sale biblioteci JavaScript extern. Am primit dezavantajele pentru script-uri externe, legate de Flickr, Disqus şi Google Analytics:

PageSpeed Leverage Browser Caching from External Scripts

Acest lucru sa dovedit a fi destul de un mare obstacol şi necesită o mulţime de timp şi complexitate a complet rezolva aceste probleme.

Eliminarea Flickr încorpora probleme

În primul rând, am avut recent întors dintr-o călătorie în India şi pune individuale în blog cu încorporat de Flickr fotografii pe pagina de start. Tema mea mediu rapid defilarea printr-un număr de posturi, astfel încât PageSpeed plâns de toate acestea.

PageSpeed Cobra photo from India

După observând că PageSpeed plâns atât despre Flickr-a găzduit încorporate imagine sizes (la diverse pixel contează) şi văzând aceste dezavantajele JavaScript extern, m-am intors la auto-hosting optimizat imaginile de pe site-ul meu. Ei încă link-ul Flickr pentru albumul meu India în curs de desfăşurare.

Acesta este un bun exemplu de cum încearcă să utilizeze un serviciu puternic terţe cu scopul simple fotografii incluziune ucide Scor PageSpeed. Flickr nu a făcut un loc de muncă optime de a ajuta utilizatorii de WordPress rezolva acest lucru. Doar ca un exemplu, acestea ar trebui să:

  • oferă dimensiuni încorporat care mulţumeşte PageSpeed pe imagine de optimizare (eventual ca separat de export opţiuni compromise pentru dumneavoastră PageSpeed — Flickr despre calitatea imaginii)
  • să publice codul JavaScript într-un mod usor de a integra WordPress şi W3TC fişiere combinate

Auto-găzduire fişiere externe JavaScript

Cu fişierele mele Google rămase, cea mai bună soluţie a fost de a găzdui o copie a script-uri pentru Google Analytics şi DFP la nivel local şi de a folosi script-uri de cron să le actualizeze în mod regulat pe un server.

În primul rând, m-am oprit folosind Google Analytics plugin-ul meu şi a adăugat manual codul modificat la tema mea antet:

Observa am schimbat căile mele copii locale ale script-uri. Apoi, am facut copii locale ale script-uri pentru Google Analytics şi Google DFP, şi la scurt timp după mea browser-ul cache-ul a fost rezolvat în PageSpeed cu excepţia Disqus.

Rezolvarea Disqus plugin-ul problemă de încărcare

Nu sunt sigur exact dacă este pentru securitate sau suport multi-platformă sau pură "inteligenţa", dar Disqus şi alţi furnizori cum ar fi Flickr par să ascundă fişierele reale sunt de încărcare cu alte fişiere. Acest lucru face optimizarea PageSpeed mult mai dificil si adesea imposibil de rezolvat.

Desigur, mi-am petrecut două-trei ore încercarea de abordări diferite pentru a optimiza Disqus plugin-nimic nu a lucrat pentru mine.

În cele din urmă, am dezinstalat Disqus plugin-ul şi instalat Disqus condiţionată de încărcare:

PageSpeed Disqus Conditional Load Plugin

În timp ce ea a însemnat să fac o mulţime de lucruri, este, de asemenea, face posibilă pentru a optimiza PageSpeed cu instalare.

Brusc, PageSpeed pe pârghie cache-ul browser-ul dezavantajele s-au dus. Kudos la DCL!

Stabilirea obiectivelor robinet

PageSpeed plânge adesea de link-uri prea strâns distanţate în dispozitivele mobile. Am experimentat cu câteva abordări şi în cele din urmă am oprit afişarea Tag-uri de pe dispozitive mobile.

În cazul în care petrec mai mult timp, probabil pot îmbunătăţi lor UX şi trece cu PageSpeed.

Rezolvarea problemelor

Imagini lipsă din comprimat şi combinate CSS

ArrayToolkit Plugin, care afişează urmaţi pictograme în bara laterală dreapta, oprit de lucru pentru mine. Mi-a luat un timp să-şi rezolve care trasee necesare codificate cu căi absolute a face să funcţioneze.

PageSpeed Missing Icons after combining and compressing CSS

În cele din urmă, am găsit şi a înlocuit aceste căi cu corectate căile relative la directorul de plugin-ul original:

Rupt JavaScript

Mai am o problema am nevoie pentru a rezolva. Nou File plugin-ul meu (Construct a built-in File) a oprit de lucru pe drum. Am nevoie doar de a petrece timp de depanare-l, dar ar trebui să fie destul de uşor pentru a sorta.

Alegerea cel mai bun Minifier

Am experimentat cu YUI Compressor cu W3TC pentru a comprima fişierele mele JavaScript şi CSS. În loc de a duce la creşterea vitezei, tot un fel de rupt.

Dacă sunteţi interesat în imaginind ce am făcut greşit, puteţi instala Java şi YUICompressor ca aceasta:

Vă rugăm să postaţi în comentarii, dacă ştii cum să-l joace bine cu WordPress.

În încheiere

După această a doua rundă de lucru pe tema noua, totul a lucrat mai bine decât am sperat. Nu am fost niciodată sigur am s-ar ajunge la scopul meu optime.

Meu scorurile finale PageSpeed

Am marcat 100 PageSpeed atât pentru Mobile şi Desktop. Chiar mai sensibil, site-ul meu a fost difuzate super-rapid-mai repede decât am avut un blog înainte de a alerga. Sunt foarte curios să văd cum intrare de căutare de trafic şi activitatea de cititori reacţionează mai rapid rezultate şi performanţe peste următoarele câteva luni.

Aici sunt meu final PageSpeed scoruri, primul Mobile:

Mobile PageSpeed score 100

Şi acum Desktop:

Desktop PageSpeed score 100

Desktop-ul ajuns la 100, în primul rând, şi a trebuit să mă întorc şi termina unele ajustări (abordarea robinet ţinte) pentru a obţine mobil acolo.

Şi din nou, viteza de site-ul face în valoare de o scurtă vizită. Dacă ştiţi de alte site-uri comerciale pe care rulează la 100 PageSpeed, vă rugăm să partajaţi-le în comentarii. Mi-ar bucura văzându-le.

Doar ca un exemplu de SEO se schimbă, eseul meu populare dating a sarit la al treilea clasat pe mobil rezultate sub "Seattle dating" (nu pe desktop-ul încă.) Acest lucru mi-a spus că, probabil, povestiri de pe site-urile majore, bate-l au săraci PageSpeeds mobile, deoarece nu este uşor.

Provocarea de viitor de întreţinere

Pentru a maximiza PageSpeed site-ul meu, am avut de a face o serie de ajustări la tema mea, ceea ce va crea acum dependenţele pe modificările la script-uri externe şi actualizări la Tematica şi plugin-uri. Acum că am terminat cu scopul meu pe termen scurt, am de lucru pentru a organiza sisteme mea pentru a gestiona mai usor acest lucru.

Cron pentru fişiere externe

În curând am nevoie să duc punerea în aplicare a acelui script cron pentru a sincroniza mea auto-găzduită script-uri Google Analytics şi DFP.

Aici este o companie care oferă o abordare mai simplă utilizarea Analytics fără PageSpeed fie penalizat, ultimul punct de fixare de pe Google PageSpeed intuiţii. S-ar mai degrabă nu baza pe alte terţe părţi.

Gestionarea Tematica actualizări

Am, de asemenea, va trebui să mai bine urmăriţi mediu pe tema actualizări şi să integreze modificări. Construirea o temă de copil la modificările mele, de asemenea, ar putea facilita acest proces. Cea mai mare parte am veţi fi căutat pentru schimbările care suprascrie meu, actualizate (sau suplimentare) JavaScript şi fişiere CSS.

Gestionarea Plugin actualizări

În mod similar, atunci când actualizarea de plugin-uri, am avea nevoie să urmăriţi pentru acelaşi tip de actualizări. Ar putea ajuta pe mine de a organiza mai bine utilizarea meu de GitHub cu WordPress plugin-uri. Eu il folosesc deja pentru tema mea.

Automatizare

Poate vreau să-şi petreacă ceva timp scris script-uri pentru a urmări care JavaScript şi CSS fişiere sunt utilizate cu tema actualizate şi plugin-uri, descărcaţi-le la serverul meu, şi minimiza şi ambalaj fişiere corespunzătoare pentru a se leagă de sau să includă.

SSL

În cele din urmă, una dintre surprize mi este că SSL nu este necesară pentru a realiza o PageSpeed de 100. Acest oarecum logic, dar subliniază că o varietate de diferite componente pot afecta vă ranking de căutare Google. Voi fi scris despre punerea în aplicare să cripta pe gratuit SSL cu WordPress în curând.

Ce urmeaza?

Dacă-am bucurat de acest lucru, dar vrea să citească un tutorial mai general care nu du-te după cum adânc în specificul care pot sau nu pot aplica pentru tine, KeyCDN pe Google PageSpeed marcând 100/100 cu WordPress este un excelent bucată de complementare. I-am scris, de asemenea, o bucată sponsorizat despre lor CDN de la Envato Tuts (accelera Your conţinut livrare cu KeyCDN) şi a continua cu ei ca un client.

În acelaşi timp, dacă sunteţi în căutarea pentru alte utilitati pentru a vă ajuta să construiască în creştere set de instrumente pentru WordPress sau de cod pentru a studia şi de a deveni mai bine versat în WordPress, nu uitaţi să vadă ceea ce avem disponibil in piata Envato.

În viitor, voi fi uitat la câteva mai multe îmbunătăţiri pentru a îmbunătăţi performanţa generală a site-ul meu. Acestea includ:

  • Revizuire PageSpeed individuale dintre posturile mele cele mai populare, cum ar fi Amazon Marketplace fraudă Made Easy (în prezent 97), pentru a se asigura că sunt toate rulează la 100. Ca în acest exemplu, este adesea doar a încorporat imagine size(s) care perturbs PageSpeed.
  • Îmbunătăţirea gestionării de meu Tematica şi plugin-uri pentru a susţine aceste optimizări la fel de uşor ca este posibil ca actualizări ajunge, ex. urmărire modificări JS şi CSS fişiere în actualizări, menţinerea copii de fişiere externe JS place Analytics actualizat, re-comprimarea fişierele actualizate, etc.
  • Actualizarea serverul meu la PHP7. Upgrade-ul promite aproape 2 x îmbunătăţiri de performanţă. Nu este simplu să faceţi upgrade înainte de lansarea Ubuntu pachet, dar nu este prea dificil.
  • Actualizarea serverul meu la Varnish4. Actualizare necesită unele remaniere de fişiere de configurare, şi eu sunt sigur compatibilitatea cu W3 Total Cache şi îmbunătăţirea performanţei sale, dar eu sunt dispus să-i dea un try.
  • Explora KeyCDN pe CacheEnabler pentru a servi mai eficient Webp imagini pentru utilizatorii Chrome. WEBP dosar sizes sunt semnificativ mai mici, dar nu au fost încă acceptate de Safari. Eu sunt de fapt destul de entuziasmat despre îmbunătăţirea experienţă de utilizator cu acest lucru.

Dacă aveţi întrebări, vă rugăm să post-le mai jos. Sau, puteţi să mă contactaţi pe Twitter @reifman. Vă rugăm să verificaţi meu Envato Tuts instructor de pagină pentru a vedea alte tutoriale pe care le-am scris, cum ar fi clonarea WordPress în Linux (în 90 de secunde).

Link-uri conexe

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.