Continuând, acum mai am un punct pe care mi l-a sugerat Google: Eliminați JavaScript și CSS blocând afișarea din partea de sus a paginii. Acum voi încerca să îmi dau seama ce este de prisos acolo și cum să elimin JavaScript și CSS suplimentar?
Teste, vă reamintesc, produc acest serviciu: , unde mi s-au dat sfaturi specifice cu privire la JavaScript și CSS:
După cum puteți vedea, aceasta este cea mai mare problemă a mea, 8 scripturi sunt încărcate deodată și, din această cauză, primul ecran nu se încarcă atât de repede pe cât ne-am dori. Există, de asemenea, 10 fișiere css care, de asemenea, nu sunt optimizate. Ei bine, hai să rezolvăm problema!
Cu privire la această problemă, afirmațiile sunt cam așa:
Eliminați JavaScript care blochează afișarea:
- https://prostolinux.ru/…-includes/js/jquery/jquery.js?ver=1.10.2
- https://prostolinux.ru/...s/jquery/jquery-migrate.min.js?ver=1.2.1
- https://prostolinux.ru/...query-ui-1.8.10.custom.min.js?ver=1.8.10
- https://prostolinux.ru/...ial-textboxes/js/wstb.js.php?ver=3.10.60
- https://prostolinux.ru/wp-includes/js/tw-sack.min.js?ver=1.6.1
Am găsit recent o soluție interesantă: în function.php, trebuie să inserați un cod care va instrui scripturile pe care trebuie să le încărcăm nu imediat:
funcția jquery_in_footer() ( wp_register_script('tie-tipsy', get_template_directory_uri() . '/js/jquery.tipsy.js', array('jquery')); wp_register_script('tie-easing', get_template_directory._() js/jquery.easing.1.3.js', array('jquery')) ; )
În exemplu, sunt adăugate două scripturi, dar adăugăm câte ne place, iar acestea sunt cele care încetinesc încărcarea paginii. Am încercat să aplic această soluție - nu a funcționat pentru mine, poate am greșit ceva?
Google însuși recomandă să insereze atributul asincron în script, ceea ce ar face încărcarea sa asincronă. Dar această soluție este potrivită numai pentru scripturi externe, de exemplu, acest atribut asincron poate fi inserat în scriptul publicitar Yandex Direct dacă aveți anunțul afișat pe primul ecran. Yandex are și cod asincron, dar mi-a cauzat probleme - dacă un bloc are încărcare asincronă, iar al doilea nu, atunci va fi afișat doar unul dintre ele. Dar acum nu este vorba despre asta...
Este dificil să optimizați pluginurile în acest fel, trebuie să intrați în codul fiecărui plugin și să prescrieți acest atribut sau alternativa lui. Nu sunt programator și nu voi face asta. În plus, dacă actualizați în mod constant pluginurile, atunci toată munca dvs. se va pierde după actualizare.
Spre surprinderea mea, am găsit o altă soluție, foarte simplă, la această problemă - am instalat pluginul Asynchronous Javascript. După ce l-am instalat, am obținut următorul rezultat:
După cum puteți vedea, a mai rămas un singur script și acesta este scriptul pluginului în sine. După instalare, personal nu am avut probleme cu afișarea temei site-ului, dar dacă aveți un fel de jamb și aveți nevoie de un script care să fie încărcat imediat, atunci îl puteți adăuga la excepții în setările pluginului:
Așa este rezolvat primul punct, dar după cum puteți vedea, acest lucru încă nu este suficient, trebuie să optimizați css, cum să faceți acest lucru?
Iată lista revendicărilor:
Optimizați performanța CSS pe următoarele resurse:
- https://prostolinux.ru/...wp-special-textboxes.css.php?ver=3.10.60
- https://prostolinux.ru/...plugins/wp-ds-blog-map/wp-ds-blogmap.css
- https://prostolinux.ru/...t/themes/rockwell_new/rockwell/style.css
În mod ideal, trebuie să faceți acest lucru: luați toate datele din aceste fișiere css și mutați-le în stile.css principal și dezactivați solicitarea acestora în pluginurile în sine. Dar, după cum înțelegeți, aceasta este o afacere lungă și plictisitoare, plină de multe capcane. Poate pe viitor o voi face, dar până acum nu am atât de mult timp și experiență.
Puteți rezolva problema instalând un plugin care va combina toate stilurile într-un singur fișier. Nu am găsit un plugin care să îndeplinească doar această funcție, așa că vă voi spune despre un plugin care face totul deodată, elimină scripturi și optimizează css.
Cum să optimizezi totul deodată?Am decis să instalez pluginul Autoptimize, care optimizează atât scripturile, cât și css în același timp. După instalarea pluginului, trebuie doar să mergeți la setările acestuia și să bifați casetele în locul potrivit:
După aceea, Viteza paginii Google oferă următoarele:
Nu sunt încărcate scripturi, doar două fișiere CSS care includ toate stilurile și toate scripturile sunt mutate în zona de subsol. Dacă vă uitați acum la codul sursă al paginii, atunci există un terci optimizat, pe care nu îl puteți da seama fără o sticlă.
La început am crezut că acest plugin nu îmi va rezolva complet problemele, dar după cum sa dovedit, a fost pentru că nu l-am configurat complet! După ce am bifat casetele în locul potrivit, am obținut un rezultat MARE! TOATE PROBLEMELE AU DISPARUT! 
Pentru a face acest lucru, trebuie să faceți clic pe butonul din partea de sus Afișare setări avansate și apoi vor apărea setări suplimentare. Trebuie să bifați casetele pentru:
Optimizați codul HTML?
Optimizați codul JavaScript?
Căutați scripturi numai în ? (depreciat)
Optimizați codul CSS?
Inline toate CSS?
Salvați scriptul/css agregat ca fișiere statice
După aceea, adevărul este că pluginul care fixează widget-ul a încetat să funcționeze pentru mine, dar asta nu este deloc o problemă, viteza de încărcare a site-ului este mult mai importantă. Și chiar mai important să-i mulțumesc unchiului Google...
De asemenea, vreau să menționez o nuanță: am un șablon adaptiv pe acest site, iar dacă îl utilizați, atunci pluginul, atunci când afișează versiunea pentru mobil, nu poate elimina complet toate problemele. Când activez pluginul pentru versiunea mobilă, nu rămân erori. Încă o dată am fost convins că este mai bun decât designul adaptiv.
Un alt plugin similar este WP Minify Fix, face același lucru, dar mi-a plăcut mai puțin, sau poate pur și simplu nu l-am înțeles pe deplin.
Înțeleg că este ideal să faci toate acestea fără plugin-uri, manual, dar este foarte lung și trist și chiar nu merită, pentru că chiar dacă ai obținut un scor de 100, nu vei aduce site-ul în top - viteza de încărcare a site-ului este doar UNU din sutele de factori de clasare, mod și suficient de importanți. Dar fă tot ce poți - trebuie!
Eliminarea codului JavaScript și CSS Google PageSpeed
Nu ai găsit un răspuns? Utilizați căutarea pe site
Optimizarea codului HTML și a foilor de stil în cascadă (CSS) este necesară pentru a accelera procesul de încărcare a site-ului și a conținutului găzduit pe acesta. Economiile de timp și trafic, în general, după o perioadă lungă de timp după optimizare, se vor dovedi a fi semnificative, chiar dacă modificarea vitezei nu este foarte vizibilă extern.
Optimizarea codului HTMLPentru ca codul HTML să contribuie la încărcarea rapidă a site-ului, acesta trebuie să îndeplinească câteva condiții:
- Fii simplu și informativ. După verificarea validității, trebuie să remediați erorile, astfel încât roboții să le poată analiza mai ușor. Codul ar trebui să reprezinte clar structura paginii.
- Componentele principale ale paginilor, cum ar fi titlurile, indexurile, blocurile de informații ar trebui să fie ușor și rapid identificate.
- Eliberarea codului de informații inutile, punerea lui în fișiere separate (de exemplu, puteți pune CSS și JS) va crește viteza de descărcare, ceea ce simplifică și munca roboților.
După îndeplinirea acestor condiții, site-ul poate fi realizat mai rapid, mai convenabil și eficiența indexării acestuia de către roboții motoarelor de căutare poate fi crescută.
Reducerea codului și optimizarea CSS
Puteți face codul site-ului mai ușor reducându-i volumul. Pentru a face acest lucru, trebuie să efectuați mai multe operații.
În primul rând, ar trebui să evitați tehnologiile flash, JavaScript, cadrele, textul reprezentat de o imagine. Toate elementele, dacă este posibil, ar trebui redate în fișiere externe separate (de exemplu, CSS și JS, după cum s-a menționat mai sus). Pluginurile speciale vor ajuta la optimizarea codului. De exemplu, puteți instala pluginul Autoptimize, care optimizează automat codul HTML, CSS, JS (dacă bifați casetele corespunzătoare). Este necesar să se configureze o navigare pe site competentă și convenabilă, care să fie înțeleasă de utilizatori și recunoscută corect de motoarele de căutare. Acest lucru va crește viteza, calitatea încărcării și indexării site-ului.
În ceea ce privește optimizarea CSS, o puteți face singur sau o puteți încredința unei resurse sau unui program special. Optimizarea manuală este un proces consumator de timp și consumator de timp, în plus, puteți rata unele erori. Un program sau serviciu pentru optimizare va elimina mai bine deficiențele, dar poate perturba unele dintre funcțiile care funcționau pe site, iar după verificarea conținutului poate să nu fie afișat corect, așa că munca lor trebuie corectată.
Câteva moduri de a îmbunătăți manual structura CSS:
- Eliminați spațiile suplimentare și întreruperile de rând care supraîncărcați fișierul CSS și îngreunează funcționarea roboților;
- Scrieți proprietăți de generalizare în loc să repetați comenzi similare de mai multe ori;
- Folosiți descrieri concise, ușor de înțeles în comentarii;
- Scrieți fonturi neobișnuite folosind stiluri, nu imagini;
- Pentru imagini, creați alt și titlu (diferit pentru fiecare imagine), astfel încât conținutul acestora să fie recunoscut de roboții motoarelor de căutare;
- Aplicați instrumentele H1 la titluri - și așa mai departe, astfel încât acestea să fie recunoscute corect în timpul indexării;
- Prescrie in cuvinte cheie doar acele cuvinte cheie care sunt folosite pe pagina, minimizati numarul acestora;
- Utilizați metaetichete variate și concise.
Optimizatoare CSS și HTML
Puteți optimiza comod și rapid direct în browser folosind servicii speciale, de exemplu:
- CleanCSS.com;
- CSS Optimizer;
- Compresor CSS
- CYPR.com;
- plugin de optimizare automată.
Experții în SEO și IT vă sfătuiesc să folosiți CleanCSS.com, deoarece vă permite să alegeți nivelul de compresie de la scăzut la ridicat sau să alegeți setări individuale. După niveluri ridicate și cele mai înalte de optimizare, codul site-ului devine aproape ilizibil și va fi aproape imposibil să-i faci modificări. Prin urmare, pentru început, ar trebui să utilizați optimizarea standard. Puteți alege moduri de compresie pentru conținut specific sau puteți optimiza parametrii individuali: comprimarea fonturilor, imaginile, eliminarea spațiilor.
CY-PR.com are și un instrument de optimizare similar care ușurează structura CSS cu 25-30%, dar nu există nicio modalitate de a genera un fișier de cod după operație.
Restul serviciilor pot schimba radical codul astfel încât unele funcții de pe site să nu mai funcționeze. Prin urmare, cu ajutorul lor, este mai bine să faceți doar modificări locale în parametrii specifici ai site-ului.
După optimizare, ar trebui să verificați performanța site-ului, afișarea corectă a designului și viteza de descărcare. Normal este situația în care paginile și opțiunile de utilizator ale site-ului sunt încărcate nu mai mult de 3-5 secunde.
Pentru a verifica gradul de optimizare și a înțelege cât de eficient este acum scris codul HTML, puteți utiliza servicii precum:
- optimization.com;
- Lista de verificare seo portal;
- plugin firebug.
Aceste instrumente vă vor ajuta să verificați dacă totul a fost făcut pentru a reduce cantitatea de cod HTML și a îmbunătăți structura acestuia. Pe resursa listei de verificare SEO, puteți verifica lista cu ceea ce a fost deja făcut pentru optimizare și cu ceea ce nu a fost încă făcut și să puneți un punct asupra faptelor finalizate.
Puteți verifica codul site-ului pentru erori folosind serviciile de verificare a validării - validatoare. Validarea eficientă a codului se face cu validator.w3c.org
Dacă sistemul generează mai mult de jumătate de mie de erori în timpul primei verificări, nu ar trebui să fii supărat. După corectarea unui anumit defect, puteți rula din nou verificarea și vor fi mult mai puține erori, deoarece un defect implică altele, iar atunci când este corectat, acestea vor dispărea.
Un site cu cod corectat și optimizat are mai multe șanse să se claseze mai sus în rezultatele căutării decât o resursă cu cod HTML supraîncărcat care conține erori.
Acesta este procesul de eliminare a codului inutil sau redundant din fișierele CSS pentru a reduce dimensiunea fișierului pentru a crește viteza de încărcare a paginii.
Iată 10 instrumente de optimizare CSS care vă pot ajuta să vă organizați și să vă optimizați CSS rapid și ușor.
Cu toții ne-am confruntat cu problema așteptării redării paginii până când toate pluginurile și stilurile s-au încărcat. Uneori, pe site-uri grele, este nevoie de mult timp pentru a încărca toate fișierele. Folosind serviciul Critical Path CSS Generator, puteți rezolva această problemă. Vă permite să generați cod CSS în așa fel încât atunci când pagina este deschisă, partea de până la așa-numita îndoire a ziarului (primul ecran) este încărcată instantaneu. Această metodă are un efect pozitiv asupra optimizării motoarelor de căutare.
Bună ziua, dragi cititori ai blogului. Continuăm să studiem în detaliu posibilitățile de accelerare a site-ului urmând recomandările, care oferă adevărate sfaturi practice pentru corectarea erorilor.
Am scris deja despre implementarea compresiei imaginii folosind acest instrument, acum următorul pas este optimizarea CSS și a scripturilor (javascript), ceea ce poate face un plus serios, de foarte multe ori chiar decisiv, la creșterea vitezei de încărcare a paginilor site-ului.
În articolul de astăzi, voi descrie toți pașii practici în legătură cu acest aspect și voi încerca să iau în considerare toate posibilele nuanțe care pot apărea în procesul pas cu pas de implementare a unor astfel de evenimente.
Eliminați codul CSS și scripturile din partea de sus a paginii și îmbinați-le într-un singur fișierAșadar, pentru a înțelege exact ce acțiuni ar trebui să includă optimizarea stilurilor și scripturilor special pentru site-ul dvs., cel mai simplu mod este să utilizați serviciile binecunoscutului instrument PageSpeed , despre care am menționat la începutul articolului.
Înainte de a continua, aș dori să spun următoarele. Marea majoritate a proprietarilor de site-uri folosesc CMS pentru proiectele lor (). Din păcate, nu există o instrucțiune universală pentru efectuarea acțiunilor necesare cu privire la absolut toate CMS, deoarece fiecare dintre ele are propriile subtilități.
Vom analiza toate nuanțele practice ale CSS și optimizării scripturilor pe baza blogului WordPress (), deoarece această formă de resursă web este una dintre cele mai populare.
Pentru a sistematiza verificarea și a economisi timp, ar fi înțelept să alegeți una dintre cele mai „încărcate” pagini, în raport cu care sunt executate majoritatea stilurilor și scripturilor de pe site (dacă eliminați principalele erori în legătură cu acesta, apoi cu un grad mare de probabilitate restul va primi un rating mare de la Page Speed).
Întrucât avem în vedere un blog WP (această resursă web aparține și de acest tip de site), voi explica ce tip de pagini pentru testare și un exemplu ilustrativ am ales. Nu este un secret pentru nimeni că pe un blog standard, sarcina principală cade pe paginile postărilor (articolelor), deoarece acestea conțin cea mai mare cantitate de conținut descărcabil (inclusiv imagini), comentarii ale utilizatorilor și sunt, de asemenea, expuse la diferite extensii.
De exemplu, pe paginile de articole, site-ul acționează cu propriile stiluri și scripturi. Și în unele postări, folosesc adesea funcțiile Syntaxhighlighter Evolved, datorită cărora sunt afișate fragmente frumoase din diferite coduri cu evidențiere.
Este una dintre aceste pagini pe care o voi oferi spre testare și arăta măsurile ulterioare luate de mine pentru a elimina neajunsurile. Deci, pe pagina de analiză, introduceți URL-ul paginii web dorite și în câteva secunde veți obține rezultatul. Iată câteva erori de stil și scripting pe care le-a găsit Page Speed:
Mai întâi, să aruncăm o privire la primul sfat de scriptare al lui Paige Speed, care este „Eliminați JavaScript care blochează afișarea”:
//site/wp-includes/js/jquery/jquery.js?ver=1.12..min.js?ver=1.4..js?ver=4.8.2
După cum a recomandat Page Speed, codurile JavaScript responsabile pentru funcții suplimentare ar trebui să fie executate după ce sunt afișate elementele din zona de sus a paginii, ceea ce va grăbi încărcarea paginii.
Primele două rânduri, referitoare la ieșirea bibliotecii, și a treia, care reflectă acțiunea scriptului pluginului Subscribe to Comments menționat mai sus, sunt doar necesare pentru a oferi o astfel de funcționalitate. Prin urmare, este de dorit să plasați linkuri către aceste resurse în partea de jos a codului HTML. Dar simpla editare manuală a șabloanelor () nu este suficientă aici.
Remarc că mai devreme Page Speed, pe baza rezultatelor analizei, a emis adesea o recomandare separată pentru combinarea scripturilor și stilurilor. Dacă am înțeles bine, acum, atunci când evaluez o pagină, un astfel de sfat nu este direct disponibil, dar cu siguranță este subînțeles.
Faptul este că atunci când se testează cu alte instrumente pentru a determina timpul de încărcare a paginilor web ale unui site, această direcție specială de optimizare este una dintre cele mai eficiente și obligatorii, cu excepția cazului în care, desigur, acest lucru va dăuna funcționalității site-ului.
Prin urmare, în ceea ce privește scripturile și stilurile, vom efectua întregul set posibil de măsuri (inclusiv nu numai eliminarea lor din zona capului, ci apoi îmbinarea lor într-un singur fișier comun). Pentru a face acest lucru, WordPress are mai multe funcții care îndeplinesc următoarele sarcini:
- wp_deregister_script, wp_deregister_style- anulează înregistrarea stilurilor și, respectiv, fișierelor CSS;
- wp_register_script, wp_register_style— înregistrează scripturi și fișiere de stil;
- wp_enqueue_script, wp_enqueue_style— conectează scripturile și CSS pentru a funcționa.
Utilizarea acestor funcții va face posibilă controlul tuturor acestor resurse, ținând cont de dependența una de cealaltă și eliminarea conflictului dintre ele. Pe această bază, vom rezolva problema pusă în fața noastră.
Cum să încărcați biblioteca jQuery de pe Google CDNPentru început, voi spune că JQuery este o colecție de scripturi care conține un set de funcții gata făcute și îi ajută pe dezvoltatori să scrie cod JavaScript. În stadiul actual, mulți webmasteri folosesc această bibliotecă, deoarece vă permite să implementați niște „cipuri” pe site. Să spunem pe acest blog, unul dintre elementele executate cu jQuery este deasupra antetului.
Nu este o coincidență că în cele mai recente versiuni de WordPress, dezvoltatorii au adăugat capacitatea de a conecta și încărca biblioteca din coșurile motorului însuși. Acest lucru este evidențiat de apariția URL-urilor găsite ca urmare a analizei de către instrumentul Viteza paginii:
//site/wp-includes/js/jquery/jquery.js?ver=1.12..min.js?ver=1.4.1
În acest caz, „ver=1.12.4” înseamnă versiunea. Al doilea link este interesant, care, după cum probabil ați ghicit, este legat și de bibliotecă. Acesta este un script ("jquery-migrate.min.js") care este utilizat în mod special pentru a migra de la versiunile vechi și pentru a rezolva problemele de incompatibilitate.
Adică, dacă aveți un plugin vechi care rulează pe site-ul dvs. care necesită una dintre versiunile anterioare, atunci jquery-migrate.min va contribui la funcționarea corectă a codului pentru această extensie împreună cu noua modificare a bibliotecii.
Din obișnuință, încerc să scap de plug-in-urile care nu au fost actualizate de mult și să aplic codurile corespunzătoare, al căror conținut satisface cea mai recentă versiune a bibliotecii. Prin urmare, am decis să dezactivez acest script suplimentar, despre care voi discuta mai jos.
Dacă vă amintiți, pe baza rezultatelor analizei PageSpeed , trebuie să eliminați scripturile din zona de cap a codului HTML al paginii. Pentru a face acest lucru, WP are o funcție adecvată care vă va ajuta să mutați linkul la subsol. Apropo, în același timp, am decis să reconfigurez încărcarea bibliotecii în așa fel încât să fie încărcată nu din folderul WP, ci din rețeaua Google CDN în sine.
Vă reamintesc că, din motive de securitate, la modificarea oricăror fișiere de site, este indicat să faceți copii de rezervă ale acestora, precum și să folosiți software specializat, de exemplu, editorul NotePad ++, care vă permite să reveniți cu cât mai mulți pași înapoi. iti place.
Această decizie sa bazat pe faptul că utilizarea CDN ( Rețeaua de livrare a conținutului sau Rețeaua de distribuție a conținutului- rețeaua de livrare a conținutului) oferă o serie de avantaje și anume:
- se va asigura că JQuery este transferat de pe serverul cel mai apropiat (geografic) de computerul dvs., ceea ce va grăbi descărcarea;
- există o mare probabilitate ca biblioteca să fie prezentă în memoria cache a browserului utilizatorului dacă acesta a vizitat anterior site-ul dvs.;
- fișierul este dat într-o formă comprimată, ceea ce îi reduce greutatea;
- biblioteca va fi încărcată într-un fir separat.
Pentru a scoate cea mai recentă versiune a jQuery CDN de la Google în conformitate cu intențiile de mai sus, trebuie să anulați înregistrarea bibliotecii în WP (rețineți că analizăm optimizarea în legătură cu acest CMS) și apoi să o reînregistrați folosind următoarele funcția, care trebuie scrisă în fișierul magic functions.php:
Funcția my_scripts_method() ( wp_deregister_script("jquery"); wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", false, null, true); wp_enqueue_script ("jquery"); ) add_action ("wp_enqueue_scripts", "my_scripts_method");
Acesta este designul pe care l-am folosit când am urmat recomandările lui Paige Speed. Dezactivând înregistrarea JQuery, dezlegam automat jquery-migrate la acesta, după care va apărea un singur link către bibliotecă în partea de jos a codului HTML al paginii:
Mișcarea acestei resurse în subsol este determinată de ultimul argument „adevărat” din linia de înregistrare a scriptului:
Wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", false, null, true);
Trebuie avut în vedere aici că scriptul bibliotecii va apărea în partea de jos a paginii numai dacă o astfel de poziție nu interferează cu interacțiunea cu pluginurile, a căror funcționare corectă depinde de aceasta. În caz contrar, argumentul „adevărat” nu va funcționa și jQuery va fi plasat în zona head.
Este foarte posibil ca cea mai recentă modificare a bibliotecii să nu funcționeze cu unele scripturi de pe site-ul dvs., apoi încercați să utilizați această opțiune indicând versiunea dorită (desigur, 1.8.3 poate fi înlocuită cu oricare alta):
Funcția my_scripts_method() ( // anulează înregistrarea jQuery wp_deregister_script("jquery"); wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver= 1.8 .3", fals, null, true); wp_enqueue_script("jquery"); ) add_action("wp_enqueue_scripts", "my_scripts_method");
Chiar dacă structura site-ului dvs. și setul de scripturi existente nu vă permite să plasați codul de ieșire în partea de jos a paginilor HTML, în ciuda prezenței atributului „adevărat”, veți obține totuși un rezultat pozitiv în creșterea vitezei de site-ul datorită faptului că biblioteca va fi încărcată din rețeaua Google CDN.
Dezactivați înregistrarea stilurilor și a scripturilor pentru a le îmbinaBiblioteca JQery, pe care am dezregistrat-o și apoi am reînregistrat-o, am încercat doar să trecem la subsol, astfel încât să nu încetinească încărcarea elementelor din partea de sus a paginilor. Dar alte scripturi, precum și fișierele în stil CSS, după ce au fost dezactivate sub forma de anulare a înregistrării lor, le vom combina într-un singur .
Pentru a minimiza timpul de încărcare a paginilor unui site WordPress, este recomandat să plasați toate scripturile într-un fișier special creat cu extensia .js în directorul temei și să adăugați stiluri CSS individuale la fișierul de stil style.css existent al fișierului. aceeași temă.
Pentru această resursă web, am creat și un astfel de fișier (codes.js) pentru JavaScript, calea către care m-am înregistrat în șablonul footer.php înainte de eticheta body de închidere (puteți arunca o privire în codul HTML din partea de jos a paginii). orice pagină de blog făcând clic pe):
În ea inserez nu numai toate scripturile de plugin înregistrate după dezînregistrare, ci și JavaScript pe care îl adaug manual (coduri de butoane sociale, contoare etc.). Prin urmare, în rezultatele verificării, PageSpeed a indicat doar scriptul pluginului Subscribe to Comments, pe care încă nu am avut timp să-l optimizez corespunzător.
Deci, ca prim pas, creați un fișier JavaScript unificator cu o extensie .js. Îl poți plasa direct în directorul de teme WordPress (/your_theme/codes.js), din anumite motive l-am plasat și în subfolderul „js” (/tiny-forge/js/codes.js).,
Apoi includeți fișierul creat inserând construcția de mai sus în șablonul footer.php înainte de . Desigur, în calea către fișier, nu uitați să înlocuiți „site-ul” cu domeniul dvs. și, de asemenea, să introduceți numele temei în loc de „tiny-forge”. Urmăriți și videoclipul despre îmbinarea scripturilor:
");">
După aceea, trebuie să anulați înregistrarea scripturilor tuturor pluginurilor la care a indicat Page Speed. Dar, spre deosebire de biblioteca JQuery, care nu poate fi plasată într-un fișier comun, nu vom înregistra aceste scripturi conform noilor reguli, deoarece pur și simplu le vom combina mai târziu. În aceste scopuri, trebuie să adăugați o funcție mică la aceleași funcții.php:
Funcția my_deregister_javascript() ( wp_deregister_script("ID-1"); wp_deregister_script("ID-2"); wp_deregister_script("ID-3"); ) add_action("wp_print_scripts", "my_deregister_javascript", 100);
Dar cum să găsiți aceleași ID-uri (nume de înregistrare) pentru fiecare dintre extensii? Voi demonstra acest lucru folosind SyntaxHighlighter ca exemplu. Acest exemplu va fi cel mai versatil, deoarece acest plugin are o structură de fișiere complexă și mai multe scripturi active, a căror locație poate fi găsită din căile afișate în codul HTML al paginii:
//site/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/shCore..js //site/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/shBrushCss.js
În ciuda faptului că aceste resurse nu încetinesc încărcarea conținutului principal (deoarece sunt încărcate în partea de jos a paginii) în funcție de Page Speed, combinația lor este foarte de dorit, ca, într-adevăr, orice alte scripturi. Folosind URL-urile de mai sus, puteți determina toate folderele care aparțin pluginului SyntaxHighlighter în care se află.
Fișierele oricărui plugin WP conțin de obicei înregistrarea (wp_deregister_script) a scriptului inclus și includerea acestuia (wp_enqueue_script). Cu ajutorul acestor rânduri puteți căuta numele registrelor din folderele incluse în directorul de pluginuri folosind, de exemplu, NotePad++ ():
Astfel, pentru pagina testată, trei scripturi SyntaxHighlighter ar trebui să fie dezactivate pentru copierea și lipirea ulterioară a conținutului lor în fișierul de unire pe care l-am creat deja:
Funcția my_deregister_javascript() ( wp_deregister_script("syntaxhighlighter-core"); wp_deregister_script("syntaxhighlighter-brush-php"); wp_deregister_script("syntaxhighlighter-brush-css"); ) "add_action("syntaxhighlighter-brush-php");
Cu toate acestea, SyntaxHighlighter are o structură complexă, așa că după lipirea conținutului copiat într-un fișier partajat, evidențierea sintaxei pe pagină nu mai funcționează. Desigur, puteți dezactiva scripturile și apoi utilizați pentru a selecta culoarea codului afișat pe pagină, dar nuanța în acest caz va fi uniformă.
Pe Internet, am întâlnit mai multe opțiuni pentru a rezolva această problemă, dar toate nu vă permit să salvați funcționalitatea completă și, prin urmare, sunt inacceptabile pentru mine. Prin urmare, deocamdată, am lăsat totul în „forma originală” cu privire la acest plugin, mai ales că PageSpeed a sugerat doar comprimarea unuia dintre scripturile sale, pe care îl putem implementa. Dar mai multe despre asta mai jos când ajungem la următorul pas de optimizare.
Cât despre Reloaded, a trebuit să fiu inteligent, drept urmare am determinat ID-ul acestui plugin (cel puțin am reușit să-l dezactivez, ceea ce era obligatoriu). În consecință, funcția de anulare a înregistrării, care din nou ar trebui să fie plasată în funcțiile.php al temei WP, în cazul meu arată astfel (puteți copia și utiliza complet acest cod dacă Google PageSpeed a indicat necesitatea de a optimiza acest script) :
Funcția my_deregister_javascript() ( wp_deregister_script("stcr-plugin-js"); ) add_action("wp_print_scripts", "my_deregister_javascript", 100);
Deci, după dezactivarea tuturor scripturilor care urmează să fie optimizate (determinați locația fișierelor de-a lungul căii indicate în rezultatele verificării Viteza paginii), copiați conținutul acestora și inserați-l în fișierul comun creat anterior. Vă atrag atenția asupra faptului că trebuie să introduceți coduri de script în forma lor pură, omițând în același timp etichetele și, altfel niciunul nu va funcționa.
După aceea, includeți fișierul de îmbinare folosind codul furnizat chiar la începutul acestei secțiuni. Ca urmare, JavaScript nu ar trebui să mai blocheze încărcarea elementelor principale de conținut din partea de sus a paginii.
Ne-am dat seama de scripturi, acum să vedem la ce resurse CSS ne înjură Page Speed:
Pașii pentru optimizarea stilurilor CSS sunt în general similari cu cei pe care i-am descris pentru JavaScript. Adevărat, fișierul principal style.css al temei va acționa ca un fișier unificator, unde vom adăuga conținutul copiat al restului fișierelor de stil. Mai mult, nu are sens să includeți style.css în subsol, altfel afișarea corectă a paginii poate fi încălcată. Se pare că optimizarea CSS va consta doar în combinarea stilurilor.
Pentru pagina testată a blogului meu sunt indicate recomandări, din nou referitoare la pluginul StCR, care are propriul fișier de stil (stcr-plugin-style.css), precum și biblioteci de fonturi, dintre care una este înregistrată și inclusă în același Abonați-vă la Comentarii reîncărcate, iar celelalte două au fost activate în tema WP în sine. Nu am nevoie de ele pentru acest blog, setul standard este suficient, așa că am decis să le dezactivez.
Acum aș dori să ating pluginul SyntaxHighlighter menționat deja în acest articol, ale cărui scripturi am decis să le las în forma lor originală, dar aici stilurile sale sunt prezente în secțiunea de rezultate ale testului „Minimizarea codului CSS”, care este identică cu procedura de compresie:
În principiu, putem comprima aceste resurse separat, dar pentru o optimizare maximă, așa cum am spus, este mai bine să le copiam conținutul și să le lipim în fișierul de bază style.css al temei, care va fi comprimat după lipirea tuturor stilurilor CSS care au nevoie. optimizare. Dar mai întâi, ar trebui adăugate la lista celor 4 resurse deja disponibile pentru dezactivare, excluzând fișierul principal style.css (vezi a doua captură de ecran de aici în sus).
Pentru a dezactiva înregistrarea stilului, utilizați aceeași funcție prin care am dezactivat scripturile folosind metoda descrisă mai sus:
Funcția my_deregister_styles() ( wp_deregister_style("stcr-plugin-style"); wp_deregister_style("stcr-font-awesome"); wp_deregister_style("tinyforge-fonts"); wp_deregister_style("elusive-iconfont-style("_deregister");_ wp_deregister_style("tinyforge-fonts"); syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core"); ) add_action ("wp_print_styles", "my_deregister_styles", 100);
Apropo, ID-urile de stil înregistrate pot fi găsite și în căutarea NotePad++ folosind expresiile „wp_register_style” și „wp_enqueue_style”, dar, spre deosebire de JavaScript, acest lucru este mult mai ușor de făcut. Cel puțin am găsit rapid toate numele de registru necesare.
După cum am spus, fonturile ("stcr-font-awesome", "tinyforge-fonts", "elusive-iconfont-style"), tocmai le-am dezactivat, dar conținutul fișierelor CSS plugin ("stcr-plugin-style" , „ syntaxhighlighter-theme-default”, „syntaxhighlighter-core”) copiat și lipit în style.css. Permiteți-mi să vă reamintesc că locația tuturor fișierelor de stil care trebuie optimizate este indicată în rezultatele analizei Viteza paginii.
Dar aici există o nuanță foarte importantă. Înainte de a transfera regulile de stil ale oricărei extensii la style.css, asigurați-vă că verificați dacă există proprietăți de fundal sau imagini de fundal, al căror parametru poate fi o adresă URL cu o cale către imaginea utilizată, care este afișată folosindu-l ca un element de design (căutarea lor se poate face folosind același Notpad ++):
Imagine de fundal: url(images/image-1.png)
Dacă există astfel de proprietăți, atunci toate adresele URL relative ar trebui convertite în cele absolute (complete) conform acestui model:
Imagine de fundal:url(http://domeniul_dvs./wp-content/plugins/plugin-1/images/image-1.png)
Adică, în acest exemplu, trebuie să specificați , care va duce la folderul cu imaginile plugin, unde se află fișierul grafic dorit. În caz contrar, WordPress nu va putea găsi imaginea și, prin urmare, nu va fi afișată.
Comprimăm fișierele CSS și JavaScript onlineÎnainte de etapa finală de optimizare, rezumăm într-un fel pașii pe care i-am parcurs, acest lucru va aduce o oarecare claritate procesului, în descrierea căruia a trebuit să facem tranziții pentru a sublinia diversele scenarii inițiate de situații non-standard:
- ca urmare a activităților descrise mai sus, a fost creat un fișier JS comun, în care am plasat conținutul copiat al tuturor scripturilor dezactivate de funcția „wp_deregister_script”;
- a dezactivat înregistrarea stilurilor care încetinesc încărcarea paginii prin activarea „wp_deregister_style”, conținutul unora dintre ele (necesar) a fost copiat și adăugat în fișierul de stil principal al temei style.css;
Înainte de a continua, permiteți-mi să vă reamintesc că în ceea ce privește pluginul SyntaxHighlighter, am decis să fac o alegere în favoarea păstrării întregii funcționalități și a nu combina scripturile sale, deoarece acestea nu funcționează ca parte a unui fișier comun. Cu toate acestea, Page Speed a subliniat necesitatea urgentă de a scurta (comprima) unul dintre scripturile responsabile pentru evidențierea sintaxei codului CSS:
Dar va fi posibil să-l comprimați împreună cu fișierul JavaScript comun și style.css. Pentru a face acest lucru, trebuie să testați din nou această pagină în PageSpeed:
În treacăt, vreau să observ că măsurile luate pentru eliminarea scripturilor și stilurilor din zona capului codului paginii, precum și eforturile de îmbinare a fișierelor, nu au trecut neobservate.
Scorul pentru optimizare a crescut serios și a ajuns la 82 de puncte din 100 pentru telefoanele mobile, dar pentru PC s-a dovedit a fi în zona verde (90), care caracterizează implementarea aproape a tuturor recomandărilor principale pe care le-a prezentat Google.
Din cele 8 resurse (3 scripturi și 5 documente CSS), rămâne doar una, și acesta este fișierul principal style.css, a cărui cale trebuie lăsată în partea de sus a paginii web pentru a se asigura că browserul își afișează elementele constitutive. corect.
În principiu, acesta este deja un rezultat demn, deși poate fi îmbunătățit dacă se dorește. Trebuie doar să descărcați resursele deja optimizate de Google (în captura de ecran de mai sus, link-uri către ele în partea de jos), inclusiv documente CSS și JavaScript ambalate într-o arhivă ZIP.
Pentru pagina analizată, pe baza testului căreia i-am efectuat optimizarea, printre cele comprimate s-au numărat style.css, un fișier JavaScript comun și chBrushCss.js pe care l-am menționat, pe care nu le-am combinat cu alte scripturi din motivele exprimate. de mai sus.
Voi, cu siguranță, veți avea o alcătuire diferită a dosarelor care au suferit reduceri, totuși, cred că ideea și procedura necesară într-o astfel de situație sunt clare. După descărcarea pe computer, ar trebui să despachetați arhiva și să înlocuiți conținutul originalelor de pe server cu versiuni comprimate.
Este important să acordați atenție la următoarele. Viteza paginii limitează capacitatea de a obține fișiere trunchiate. Dacă greutatea totală a documentelor optimizate depășește 10 MB (acest lucru este rar, dar se întâmplă), atunci unele dintre resurse nu vor fi comprimate, totuși, informațiile despre ele și locația lor (URL) vor fi prezentate într-un fișier special Manifest , care este, de asemenea, ambalat în ZIP -archive:
Pe baza acestor informații, puteți comprima singur scripturile și fișierele CSS folosind servicii online, dintre care există multe în rețea. Apropo, nu confundați reducerea stilurilor și JavaScript, care presupune eliminarea comentariilor, spațiilor, întreruperilor de rând, separarea blocurilor, cu , timp în care se aplică alți algoritmi.
Puteți scurta CSS online folosind servicii specializate. De exemplu, pentru a reduce stilul.css al unuia dintre proiecte, am ales acest instrument, deoarece vă permite să alegeți dintre trei niveluri de compresie („Light” - ușor, „Normal” - standard și „Super Compact” - maxim) aveți nevoie de:
Din punct de vedere al productivității și eficacității influenței, aceasta din urmă pare a fi cea mai preferată. Cu toate acestea, rețineți că atunci când utilizați Super Compact, codul CSS optimizat va fi pliat într-o singură linie, fără spații, ceea ce va înrăutăți clar lizibilitatea și, prin urmare, va face editarea mai dificilă în viitor.
În acest caz, deoarece schimb regulat actualul și adaug noi proprietăți CSS, pentru a oferi comoditate atunci când fac ajustări la stilul site-ului, am ales „sweet spot”-ul meu preferat sub forma nivelului Normal.
Personal am fost mulțumit de condițiile standard de compresie. Tocmai am bifat opțiunea „Șterge toate comentariile” pentru a elimina complet comentariile. Dar poate fi necesar să faceți o reglare fină înainte de a rula operația de reducere a codului. Apoi deschideți opțiuni suplimentare, care pot fi accesate prin linkul „Mod avansat”.
După ce vă decideți asupra setărilor, copiați codul de stil care urmează să fie scurtat, inserați-l în câmpul situat chiar sub setări și apăsați butonul „comprimați-l” (vezi captura de ecran de mai sus). Obțineți codul actualizat în câteva secunde:
După finalizarea compresiei (ca urmare a căreia, de exemplu, conținutul fișierului sursă pentru site-ul meu „a pierdut” cu 29%), puteți selecta codul rezultat folosind butonul „Cod de evidențiere” și copiați și apoi lipiți în loc de original folosind Notepad ++.
Doar nu uitați să verificați corectitudinea afișării elementelor paginilor site-ului după ce compresia CSS online este finalizată și stilurile sunt actualizate. Mai mult, trebuie să verificați toate browserele populare ().
Pentru a vă fi mai clar, din cauza a ceea ce este comprimat acest sau acel fișier CSS, folosind următoarea imagine de mai jos, voi oferi o vedere a versiunii originale:
Și iată cum arăta după compresie:
Acest eșantion era inițial doar stilurile incluse în fișierul style.css principal al unei teme WordPress, fără a fi combinat cu alte stiluri, inclusiv cu pluginuri. Odată ce ați combinat toate proprietățile CSS, câștigul de compresie poate fi mult mai mare.
Pentru fișierele JS, am decis să folosesc compresia (reducerea) maximă, deoarece eu însumi nu le editez pentru că nu este nevoie de aceasta (este extrem de rar să schimbi conținutul scripturilor, în orice caz, este mai ușor de înlocuit întregul cod).
De asemenea, puteți scurta fișierele JS utilizând servicii online, unul dintre cele mai de încredere dintre care este Online YUI Compressor:
Totul aici este similar cu prescurtarea CSS. După ce apăsați butonul „Comprimați”, copiați rezultatul și înlocuiți-l cu conținutul fișierului sursă. La sfârșitul tuturor activităților descrise în acest articol, vom testa din nou pagina de test în Page Speed:
Care este primul lucru care îți atrage atenția? Desigur, faptul că scorul a mai crescut cu câteva puncte și a ajuns în zona verde (atât pentru PC, cât și pentru dispozitive mobile). Sfatul „Scurtare JavaScript” a dispărut din lista de recomandări (dacă vă amintiți, a fost asociat cu unul dintre scripturile pluginului SyntaxHighlighter).
În ciuda faptului că există încă sugestii pentru îmbunătățirea acestei pagini și a altor pagini similare ( , eliminarea codului din zona de sus, ), implementarea lor completă nu este posibilă din simplul motiv că astfel de pași vor fi asociați cu dezactivarea unei părți a funcționalității site-ului, ceea ce pentru mine, de exemplu, este inacceptabil.
În plus, găsirea scorului în zona verde sugerează că acțiunile ulterioare nu vor duce la niciun progres semnificativ în accelerarea site-ului, dar vor dura mult timp prețios. Deci, dacă ați reușit să obțineți un scor de 85-90 de puncte, atunci operațiunile legate de recomandările Viteza paginii pot fi finalizate în acest moment.
Mai mult, există modalități suplimentare de a crește viteza de încărcare a paginilor, despre care puteți afla în timp util dacă vă abonați la actualizările blogului prin e-mail. Urmăriți încă 2 videoclipuri care vorbesc despre optimizarea scripturilor și stilurilor WordPress folosind pachetul de pluginuri de cache WP Fastest Cache și extensia Autoptimize: Denis
Toata sanatatea. INDICATORI ÎN GOOGLE SITE-UL MEU 100/100 http://sibvaleogroup.ru
Testează de mult. Ce metode și tehnici nu s-au aplicat, încercări și erori lungi și un rezultat plăcut sub formă de bonus;). Tema site-ului este la mare căutare: Cum să începi o afacere? Și prevenirea și tratarea bolilor! Produs natural ECO!
Bun venit la Afișați valorile! Dacă ceva, vă rog să mă contactați, vă pot ajuta, doar țineți minte, sunt doar un amator cu multă experiență! Respect tuturor!
Bună ziua, dragi cititori ai blogului. Astăzi vreau să încalc tradiția (scrieți uniform în toate rubricile) și să vă aduc în atenție partea a doua a articolului despre.
Faptul este că este mult mai ușor să scrii, așa cum se spune, în căutarea fierbinte și să nu-ți amintești mai târziu: „cum aș putea face asta?”, ceea ce poate fi destul de dificil, mai ales după ce a trecut ceva timp.
Să încercăm în continuare să creștem viteza cu ajutorul unui instrument precum Page Speed, care este instalat ca supliment pentru Mazila sau Chrome. În principiu, probabil în zadar, am spus într-un articol anterior că acest plugin în sine nu poate face nimic pentru a vă accelera proiectul, ci doar oferă recomandări la ce anume ar trebui să acordați atenție în primul rând. Se dovedește că el însuși poate face ceva.
Optimizarea și comprimarea CSS în viteza paginiiÎn ultimul articol, am discutat în detaliu cum să instalați pluginul Page Speed și cum să configurați în mod optim stocarea în cache a obiectelor statice (imagini, scripturi, stiluri) în browserele utilizatorilor.
După setările serverului Web pe care le-am făcut, acest plugin a încetat deja să mai înjure la o scădere puternică a vitezei din cauza „Leverage browser caching”:
De fapt, Page Speed subliniază că aproape toate fișierele de stil care sunt încărcate în browserul vizitatorului împreună cu pagina web a blogului meu pot fi optimizate (comprimate) în mod semnificativ pentru a le reduce greutatea.
Dacă faceți clic pe semnul plus de lângă „Minify CSS”, se va deschide o listă de obiecte pe care ar fi de dorit să le optimizați (comprimați):
Dar cel mai remarcabil lucru este că pluginul în sine va face toată munca de optimizare (compresie). Priviți cu atenție, la sfârșitul rândului cu numele fiecărui fișier de stil neoptimizat în fereastra acestuia, vi se va solicita să vizualizați versiunea optimizată (comprimată) și, dacă doriți, descărcați fișierul foaie de stil în cascadă care este la fel de liber de gunoi cât mai posibil, ceea ce va permite, deși puțin, dar crește viteza de descărcare a site-ului.
Optimizarea constă în eliminarea tuturor spațiilor și comentariilor inutile din acestea, care nu afectează în niciun fel funcționarea resursei dumneavoastră, dar cu greutatea lor, deși mică, dar totuși suplimentară, încetinește încărcarea acesteia.
De exemplu, style.css-ul meu neoptimizat care a venit cu tema mea WordPress era de aproape 2.000 de linii, iar după optimizare, am reușit să reduc numărul de linii din el la 400, iar fișierul în sine a pierdut o cincime din greutatea sa inițială. Și după aceea îmi place mult mai mult aspectul proprietăților prescrise în el.
Judecă-te singur, așa arăta înainte să reușesc să-l comprim în Page Speed:
Și așa arată după optimizare:
Deci, pentru aceasta va trebui doar să descărcați versiunea comprimată din linkul „Salvare ca”. Descărcat?
Acum conectați-vă prin FTP, mergeți la folderul în care aveți fișierul original al foii de stil (vezi calea în fereastra Viteza paginii) și înlocuiți-l pe cel vechi necomprimat cu cel nou (cel care a fost optimizat pentru dvs.), amintindu-vă că dați-i același nume ca și originalul, altfel foile de stil în cascadă nu vor funcționa. Mustață, bucură-te de acele milisecunde cu care s-a accelerat încărcarea site-ului tău.
Dar, pe lângă fișierul CSS principal care vine de obicei cu tema pe care o utilizați, în fereastra Viteza paginii puteți vedea și acele fișiere de stil care sunt folosite de pluginurile și extensiile dvs. instalate pentru WordPress (sau orice alt motor pe care îl utilizați) . În principiu, le puteți comprima în același mod, așa cum am discutat mai sus.
Cum să îmbinați CSS extern într-un fișier comunDar cea mai bună opțiune ar fi să combinați toate CSS-urile externe într-unul singur și abia apoi să le comprimați folosind Page Speed. Aceasta ar fi opțiunea perfectă pentru a câștiga încă câteva milisecunde în viteza de descărcare. De fapt, pluginul în sine sugerează o astfel de opțiune în câmpul „Combină CSS extern”:
Aici el ne oferă să combinăm toate fișierele externe pe care le-a găsit (scripturile externe pot fi, de asemenea, combinate într-unul singur - „Combină JavaScript extern”), încărcate în browserul vizitatorilor, într-unul comun, dar va fi necesar să dezactivăm toate cele inutile fișiere de stil. Problema este că multe dintre ele creează și includ pluginuri sau alte extensii la motorul tău.
Puteți, desigur, să intrați în codul pluginului și să dezactivați stilurile de acolo, dar dacă actualizați această extensie, este posibil să trebuiască să cercetați din nou elementele interne ale pluginului pentru a-l dezactiva din nou. Pentru WordPress, există o modalitate de a rezolva această problemă la nivel central, prin cele cunoscute de tine, care ar trebui să fie prezente în folderul cu tema pe care o folosești:
/wp-content/themes/Numele temei WordPress/functions.php
Dacă nu găsiți functions.php, îl puteți crea pur și simplu, de exemplu, în editorul Notepad++ și îl puteți încărca în folderul cu teme WordPress. Dar, cu siguranță, el va fi în continuare acolo. În el, va trebui să adăugați o mică bucată de cod PHP ca acesta:
Add_action("wp_print_styles", "my_deregister_styles", 100); funcția my_deregister_styles() ( wp_deregister_style("google-ajax-translation"); wp_deregister_style("syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core"); wp_deregister_style("wp-style_cfdere"_wp-pagenavister"); );)
Procedând astfel, anulăm înregistrarea stilurilor unor plugin-uri în WordPress. Ca rezultat, fișierele CSS individuale ale acestor plugin-uri nu vor fi încărcate în browserele vizitatorilor.
Și chiar dacă actualizați vreuna dintre ele, nimic nu se va schimba și nu va trebui să re-sapă în codul lor. Ei bine, de când sunt actualizate destul de des, apoi într-un mod atât de viclean de a opri ne vom economisi mult timp și nervi.
Totul pare a fi simplu - l-au oprit și gata, poți uita de asta. Da, nu așa. În prealabil, mai trebuie să găsiți în codul fiecărui plugin WP (în care dezactivăm încărcarea stilurilor) registrul care este responsabil de conectarea acestora.
Dacă aruncați o privire mai atentă la codul de mai sus, veți observa liniile în care sunt listate chiar aceste registre:
wp_deregister_style("google-ajax-translation"); wp_deregister_style("syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core"); wp_deregister_style("wp-pagenavi"); wp_deregister_style("cfq");
Adică, de exemplu, pentru un plugin WordPress minunat, registrul se va numi „wp-pagenavi”, iar pentru pluginul Comment Form Quicktags va fi „cfq”. Dacă utilizați aceleași extensii ca și mine, atunci nu puteți urca în codul lor PHP, ci împrumutați registre din codul de mai sus.
Dar, odată cu dezactivarea tuturor pluginurilor care au propriile fișiere de stil, trebuie să vă amintiți să copiați tot conținutul acestor CSS cele mai dezactivate pentru a fi îmbinat într-un fișier comun din folderul teme (eu îl numesc style.css). De înțeles, nu?
Probabil că ai o idee despre ce este în joc. O astfel de proprietate CSS ar putea, de exemplu, să arate astfel:
Translate_links .translate_flag(background:url(flags.png) no-repeat;border:0;margin:0;padding:0;)
Intrarea url(flags.png) înseamnă că imaginea numită flags.png va trebui căutată în același folder ca și fișierul foaie de stil în cascadă. Dar adevărul este că atunci când copiați conținutul tuturor stilurilor de plugin, atunci probabil că vor folosi astfel de căi relative către imagini.
Și acest lucru va duce la faptul că WordPress nu va putea găsi imaginile dorite în calea relativă specificată. La urma urmei, au rămas încă în folderele cu pluginuri. Prin urmare, atunci când combinați CSS, este imperativ să înlocuiți căile relative către imaginile de fundal cu unele absolute care arată cam așa:
După ce faceți acest lucru, toate imaginile de fundal utilizate de pluginurile pe care le-ați dezactivat propriile stiluri vor reveni la pozițiile inițiale. Da, cred că te descurci.
Apropo, după ce aveți tot codul de stil într-un singur fișier comun, nu uitați să-l comprimați din nou prin Page Speed găsind o linie numită Minify CSS în fereastra sa și făcând clic pe semnul plus de lângă această inscripție și apoi copierea fișierului optimizat „Salvare ca”. Apoi, înlocuiți fișierul original din folder cu tema dvs. WordPress cu acesta.
Să folosim acum un exemplu specific pentru a arăta unde trebuie să căutați numele registrului pluginului WordPress, care vă permite să dezactivați încărcarea stilului acestuia. De fapt, pentru a găsi registrul potrivit, vom avea nevoie de un fișier cu extensia PHP din folderul cu acest plugin. În general, toate locuiesc în același folder:
/wp-content/plugins
Prin urmare, aici ar trebui să căutați directorul dorit. Să luăm SyntaxHighlighter Evolved ca exemplu, deoarece are situația destul de neobișnuită de a folosi mai multe foi de stil în funcție de opțiunile de stil pe care le-ați selectat în setările pluginului.
După cum puteți vedea, am selectat vizualizarea care era în a doua versiune a pluginului, iar schema de culori SyntaxHighlighter este utilizată implicit. Acum va trebui să merg la folderul lui conectându-mă la blog prin FTP:
/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/styles
copiați conținutul celor două fișiere CSS pe care intenționăm să le dezactivăm: shCore.css și shThemeDefault.css , deoarece pe ele ne arată Page Speed cu un deget (ei bine, în setări am ales tema implicită, pentru care, destul de logic, avem nevoie de CSS cu numele corespunzător).
După aceea, deschideți pentru editare:
/wp-content/plugins/syntaxhighlighter/syntaxhighlighter.php
Apoi caută și citește. Căutați ceva care să conțină „CSS”. În syntaxhighlighter.php acesta ar fi fragmentul de cod:
// Înregistrați foile de stil teme wp_register_style("syntaxhighlighter-core", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shCore.css"), array(), $this->agshver); wp_register_style("syntaxhighlighter-theme-default", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeDefault.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-django", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeDjango.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-eclipse", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeEclipse.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-emacs", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeEmacs.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-fadetogrey", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeFadeToGrey.css"), array("syntaxhighlighter-core"), $ver;->agsh); wp_register_style("syntaxhighlighter-theme-midnight", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeMidnight.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-rdark", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeRDark.css"), array("syntaxhighlighter-core"), $this->agshver);
Ne uităm la ce registre ne vor permite să dezactivăm încărcarea stilurilor shCore.css și shThemeDefault.css. Copiem numele lor (în cazul meu, acestea vor fi: syntaxhighlighter-theme-default și syntaxhighlighter-core) și adăugăm două linii suplimentare la functions.php (din folderul cu tema dvs.) la fragmentul de cod descris mai sus:
wp_deregister_style("syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core");
Și repeți acest lucru pentru fiecare plugin WordPress pentru care intenționați să dezactivați încărcarea stilului. Sper că totul a devenit clar și de înțeles pentru tine. Dacă nu, atunci încearcă să-l recitești din nou, pentru că subiectul nu este prea ușor de înțeles, deși încerc să nu complic inutil sau să nu fac textul mai greu (cine are nevoie de detalii, pentru că cu cât este mai simplu, cu atât mai bine).
Ca rezultat al tuturor manipulărilor, veți avea o listă întreagă de linii cu registre plugin în functions.php, ale căror stiluri trebuie dezactivate. Și într-un fișier CSS comun, din folderul cu teme, acesta va conține tot codul de stil al site-ului tău. Permiteți-mi să vă reamintesc încă o dată - nu uitați să comprimați sau, cu alte cuvinte, să optimizați style.css prin Page Speed în modul descris mai sus.
Multă baftă! Ne vedem curând pe site-ul paginilor blogului
S-ar putea să fiți interesat
Fișierul functions.php din folderul cu teme WordPress și exemple reale de utilizare a acestuia 
Cum să maximizați viteza de încărcare a site-ului și să optimizați încărcarea serverului teme și șabloane WordPress gratuite - Unde să le descărcați 
Cum să obțineți un site rapid - optimizarea (comprimarea) imaginilor și scripturilor, precum și reducerea numărului de solicitări Http 
Cum să găsiți și să eliminați șirurile de stil neutilizate (selectori suplimentari) din fișierul CSS al site-ului dvs 
Optimizarea temei (șablon) WordPress pentru a-și reduce sarcina pe serverul de găzduire, plugin-ul WP Tuner și numărul de solicitări de baze de date 
Crearea de sprite-uri CSS în generatorul online Sprites Me pentru a reduce numărul de solicitări către server 
Teme pentru WordPress - din ce șabloane constau și cum funcționează totul 
Reducerea consumului de memorie în WordPress la crearea paginilor - plugin WPLANG Lite pentru înlocuirea fișierului de localizare 
Cum să scrieți articole în WordPress - Editore vizuale și HTML, titluri și evidențierea cuvintelor cheie 
Comprimarea Gzip pentru a accelera încărcarea site-ului - cum să o activați pentru Js, Html și Css folosind fișierul .htaccess
