Continui, acum mai am un articol in fata pe care mi-a spus Google: Eliminare din partea de sus a paginii Cod JavaScriptși CSS care blochează randamentul. Acum voi încerca să îmi dau seama ce este de prisos acolo și cum să elimin JavaScript și CSS inutile?

Permiteți-mi să vă reamintesc că efectuez teste cu acest serviciu: unde mi s-au oferit sfaturi specifice privind JavaScript și CSS:

După cum puteți vedea, îl am pe acesta mare problema, 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!

Afirmațiile cu privire la această problemă sunt cam așa:

Eliminați codul JavaScript care împiedică 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

Găsit recent solutie interesanta: în function.php trebuie să inserăm codul care va comanda 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, au fost adăugate două scripturi, dar adăugăm câte dorim și cele care încetinesc încărcarea paginii. Am încercat să aplic această soluție - nu a funcționat pentru mine, poate am făcut ceva greșit?

Google însuși sfătuiește să-l insereze în script atribut asincron, 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 de publicitate Yandex Direct dacă publicitatea dvs. este afișată pe primul ecran. Yandex are și cod asincron, dar mi-a cauzat probleme - dacă un bloc este cu încărcare asincronă și 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ă scrieți acest atribut sau alternativa acestuia. 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ă - instalat plugin-ul Asynchronous Javascript. Dupa ce l-am instalat am obtinut urmatorul 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 problemă și aveți nevoie de un script care să se încarce imediat, atunci în setările pluginului îl puteți adăuga la excepții:

Așa se rezolvă cu ușurință 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?

Permiteți-mi să vă reamintesc lista de reclamații:

Optimizați-vă 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 sarcină lungă și plictisitoare, plină de multe capcane. Poate că în viitor voi face asta, dar deocamdată 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 putut găsi 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.

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 la locul potrivit:

După care Pagina Google Viteza dă asta:

Nu sunt încărcate scripturi, doar două fișiere CSS care includ toate stilurile și toate scripturile sunt mutate în zona de subsol. Dacă te uiți acum la cod sursă pagini, apoi există un PORridge 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 s-a dovedit, asta a fost pentru că nu l-am configurat complet! După ce am bifat casetele în locul potrivit, am primit rezultat EXCELENT! TOATE PROBLEMELE AU DISPARAT!

Pentru a face acest lucru, trebuie să faceți clic pe butonul din partea de sus Afișați setările avansate și apoi pe butonul setări suplimentare. Următoarele elemente trebuie bifate:

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, este adevărat că pluginul care remediază 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 este și mai important să-i mulțumim unchiului Google...

Aș dori să menționez și o nuanță: pe acest site am șablon receptiv, iar dacă îl utilizați, atunci pluginul la afișare versiunea mobilă nu poate elimina complet toate problemele. Când activez pluginul pentru versiunea mobilă, nu rămân erori. Am fost din nou convins că designul responsive este mai bun decât responsive.

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 astea fără plugin-uri, manual, dar este foarte lung și plictisitor și chiar nu merită, pentru că chiar dacă obții un scor de 100, nu vei aduce site-ul în top - site loading viteza este doar UNU dintre sutele de factori de clasare, cale și destul de important. Dar trebuie să faci tot ce poți!

SFAT PENTRU WEBMASTER: Capacitatea de a face bani pe Internet este doar jumătate din luptă, cealaltă jumătate este capacitatea de a încasa bani electronici PROFITABLE. Iată o listă de carduri bancare offshore din care puteți retrage fonduri și apoi să retrageți facturi clare de pe ele:

1. Payoneer - Cel mai popular sistem de plată din lume pentru freelanceri. Emite carduri, situate în SUA.

2. EpayService - sistem de plată american, foarte popular în multe țări, oferă gratuit Card MasterCardîn EVRO pentru rezidenții din CSI și din Europa.

3. Skrill - Singurul sistem de plată care funcționează cu criptomonede și în același timp emisiuni gratuite carduri bancare MasterCard.

4. AdvCash - bancă offshore situată în Belize, puteți deschide un cont în dolari, euro, lire sterline și ruble.

5. Payeer - Sediul acestui sistem de plată este situat în Georgia, puteți deschide și un cont în dolari, euro și ruble.

Aceasta este una dintre cele mai frecvente probleme pe care le văd atunci când analizez site-uri web. Rezolvarea acestei probleme este unul dintre cele mai dificile momente în care se optimizează viteza de încărcare a paginii, deoarece necesită cunoștințe tehnice aprofundate.

Aș dori să vă atrag atenția asupra faptului că fiecare site este individual. Și dacă unele soluții sunt utile pentru un site, ele pot avea un impact negativ asupra altuia.

Acest avertisment este declanșat atunci când se face referire la fișiere externe javascript și css. Și până când sunt încărcate, nu va mai avea loc nicio redare a paginii. Astfel, ele blochează afișarea conținutului pe pagină.

•   În primul rând, trebuie să ne asigurăm că JavaScript nu este implicat în procesul de redare a paginii.
•   Am plasat scripturi mici în conținutul în sine Pagini HTML. De exemplu:
•  
•   Verificăm scripturile pentru dependențe și ordinea de încărcare. Dacă nici una, nici alta nu sunt disponibile, atunci adăugați atributul „async”:
•  
•   Datorită acestui atribut, astfel de scripturi vor fi încărcate asincron.

Această instrucțiune nu poate fi aplicată bibliotecii JQuery, care este utilizată în marea majoritate a site-urilor. În continuare, să ne uităm la soluția corectă pentru JQuery.

Dacă plasați jquery.js înaintea etichetei de închidere sau încercați să o încărcați asincron, atunci scripturile dependente pur și simplu nu vor mai funcționa și multe funcții ale site-ului vor cădea. Decizia corectă V în acest caz, Utilizarea evenimentului onload poate ajuta:

funcția asyncjs() (
 … 
}

Pe cms populare Pluginurile sunt folosite pentru a rezolva astfel de probleme. Principiul lor este oarecum diferit de cel descris mai sus. Să ne uităm la exemplul de Autoptimize pentru Wordpress:

•   Pluginul combină toate scripturile *.js și inline într-un singur fișier. În acest caz, ordinea de încărcare este menținută.
•   Un singur fișier este inclus în subsolul paginii cu atributul asincron.

De asemenea, puteți utiliza această metodă pentru cms-uri scrise de sine sau site-uri HTML pur:

Pe în acest moment Cea mai nouă modalitate de a rezolva această problemă este utilizarea directivei standardizate de preîncărcare. Permite browserelor să preia style.css fără a bloca randarea.

Descoperitorul acestei metode a fost Scott Jehl, designer și dezvoltator la The Filament Group.

Fără îndoială, viitorul stă în această soluție. Dar, din păcate, nu toate browserele acceptă în prezent preîncărcarea.

Prin urmare, nu vom discuta acum această metodă mai detaliat, ci vom lua în considerare o metodă conservatoare.

Scopul acestei metode este de a plasa în secțiunea de cap cele mai importante fragmente de stiluri (css critice), care sunt necesare pentru redarea inițială a paginii. La rândul său, principalul fișiere css va fi încărcat după ce conținutul este încărcat. Majoritatea începătorilor fac o greșeală gravă în această etapă și inserează toate stilurile disponibile în document. Acest lucru nu numai că nu rezolvă situația, ci și o agravează.

Solutia corecta:



/*css critic*/
h1 (alinierea textului: centru; culoare: #ccc)



Conținutul paginii
...



$(document).ready(funcție() (
$("cap").append("");
});

O altă greșeală comună este crearea cantitati mari reguli pentru css critice. Acest lucru este tipic pentru site-urile cu un număr mare conținutul paginii - diverse glisante, widget-uri etc. Dacă reducem numărul de reguli, pagina se va smuci. Dacă o creștem, vom primi avertismentul „Optimizează încărcarea conținutului vizibil”. În acest caz, aș recomanda combinarea tuturor stilurilor într-un singur fișier și conectarea lor în mod tradițional.

În concluzie, aș dori să adaug că Viteza paginii Google – un instrument bun pentru a identifica zonele cu probleme de pe site-ul dvs. Dar atunci când îl analizezi nu ține cont de el caracteristici individuale. Prin urmare, cel mai important sfat: luați o abordare atentă în implementarea recomandărilor sale!

Bună ziua, dragi colegi webmasteri! Puțini dintre noi nu ne-am verificat site-ul web pentru viteza de încărcare folosind binecunoscutul serviciu PageSpeed ​​​​Insight de la Google și nu am întâlnit recomandarea - " ".

Nu este nici măcar o chestiune de complexitate a implementării, ci de perspectiva tristă de a fi nevoit să efectueze operația de fiecare dată după următoarea actualizare a pluginului. Toate JavaScript și CSS extensii instalate, mutat manual din partea de sus a paginii va reveni imediat după actualizarea acestor extensii.

Deci, de ce toate aceste dificultăți atunci când problema poate fi rezolvată prin instalarea unui plugin care va face munca necesară pentru tine o dată pentru totdeauna. Jocul merită lumânarea, deoarece câștigul în viteză va depăși de multe ori pierderea din sarcina de expansiune.

Așadar, pentru a urma recomandările Google de a elimina codul javascript și CSS din partea de sus a paginii, am contractat pluginul Autoptimize, care combină scripturi și stiluri într-un singur fișier și îl mută din partea de sus a paginii, ceea ce realizăm de fapt. În plus, pluginul scurtează HTML, JS și CSS (un alt plus pentru noi de la PageSpeed ​​​​Insight).

Astfel vom ucide multe păsări dintr-o singură lovitură :-).

Pluginul poate fi găsit după nume printr-o căutare în panoul de administrare al site-ului sau descărcat din depozitul WordPress la - https://ru.wordpress.org/plugins/autoptimize/

Bifați casetele.

Pentru a finaliza cu succes misiunea pe site, tot ce trebuia să fac a fost să bifez a șasea casetă Inline toate CSSîn opțiunile CSS ca în captura de ecran de mai jos și atât.

În cazul tău, lucrurile pot fi puțin mai complicate. De exemplu, unele plugin-uri care folosesc biblioteca jQuery, pur și simplu nu mai funcționează și trebuie să mânuiești mai îndeaproape setările. După cum știți, cazurile sunt diferite, așa că să ne uităm la toate setările pluginului Autoptimize.

1 Activați opțiunea " Optimizați codul HTML" dacă PageSpeed ​​​​Insight o solicită.

2 Comentarii HTML Nu l-am salvat pentru că nu era necesar.

Dacă după activarea pluginului sub recomandarea „Remove from the top...” a dispărut din lista JS și site-ul continuă să funcționeze ca înainte, fără distorsiuni, fără conflicte de plugin etc., lăsați setările aici așa cum sunt. În caz contrar, experimentați cu următoarele opțiuni:

Unele scripturi necesită încărcare doar din partea de sus a paginii (de care tocmai scăpăm), altfel nu vor funcționa corect sau chiar vor intra în grevă. Opțiunea le oferă această condiție, spre nemulțumirea PageSpeed ​​​​Insight. Activați-l ca ultimă soluție, numai dacă funcțiile de mai jos nu vă ajută.

Vorbim despre integrarea JS în HTML. Odată activată, asigură dezvoltatorul, viteza site-ului ar trebui să crească semnificativ. Opțiunea este activă implicit.

Introduceti in camp, separate prin virgula, numele de fisiere ale acelor scripturi care nu ar trebui integrate in HTML, asta in cazul unor conflicte cu operatia JS dupa integrare.

Dacă vreun script nu funcționează corect, nu va da viață celorlalți. Opțiunea vă permite să ocoliți JS rupt și să continuați să lucrați.

Mulți webmasteri plasează în bara laterală diverse blocuri, rulând pe JS. Acestea pot fi blocuri de abonament, redirecționări de trafic programe de afiliere si altele asemenea. Pentru a împiedica scriptul de blocare să blocheze descărcarea (plugin-ul a refuzat să rezolve această problemă), amânați-l. Pentru a face acest lucru, pur și simplu introduceți atributul " asincron" în codul de script ca în captura de ecran.

După cum sa discutat deja, opțiunea scurtează toate CSS-urile și le combină într-un singur fișier. Acest lucru nu este suficient pentru a elimina CSS din partea de sus a paginii.

Dacă orice fișier CSS conține căi către imagini mici (mai puțin de 4 kb), atunci această solicitare va fi scrisă în fișierul CSS principal.

Înlocuirea fonturilor Google (care din anumite motive pentru PageSpeed ​​​​Insight nu le place dacă există) cu unele standard.

Ca și în cazul JS, opțiunea integrează acea parte a CSS în HTML pe care o consideră necesară, ceea ce ar trebui să aibă și un efect pozitiv asupra vitezei de încărcare.

Vă permite să integrați în HTML doar CSS-ul redării vizibile a site-ului cu încărcare leneră a restului codului CSS.

Dacă este activat, se va deschide un câmp în care trebuie să inserați chiar această bucată de CSS de redare vizibilă. Util pentru mega-portale cu o mulțime de fișiere CSS, pentru a nu crește HTML-ul lor la dimensiuni prohibitive.

Există mai multe servicii pentru definirea redării vizibile CSS, care sunt menționate în secțiunea „fag” a paginii de plugin. Nu am activat niciodată această funcție și nu o voi descrie încă, decât dacă întrebați în comentarii.

Spre deosebire de punctul anterior, opțiunea integrează toate stilurile în HTML. După activare, de regulă, Viteza paginiiPerspicacitatea nu mai înjură blocanțiiCSS în partea de sus a paginii.

7 Excludeți CSS din Autoptimize

Optimizarea CSS, precum JS, le poate implica operare incorectă. Adăugați aceste fișiere aici pentru a le exclude de la optimizare.

Dacă site-ul folosește un server CDN pentru a reduce timpul de încărcare la transferul datelor către distante mari, introduceți adresa URL a acestora aici.

Această opțiune va dezactiva compresia statică a scripturilor și stilurilor. Activați dacă site-ul folosește compresia Gzip.

După finalizarea sau în timp ce lucrați cu setările Autoptimize, veți dori desigur să vedeți rezultatele muncii dvs. în serviciul menționat mai sus. Salvați modificările apăsând butonul „ Salvați modificările și ștergeți memoria cache" pentru a verifica numai paginile recente.

Sper că te descurci, viteza site-ului tău va crește și motoarele de căutare cu siguranță vor observa acest lucru.

Eliminați codul javascript și CSS din partea de sus a paginii când Ajutor WordPress Plugin Autoptimize actualizat: 29 aprilie 2017 de Roman Vakhovsky

Mesajul este Recomandări Google pentru a vă accelera site-ul. O astfel de dorință de optimizare a resurselor poate fi îndeplinită dacă verificați site-ul dvs. pentru viteza de încărcare în PageSpeed ​​​​Tools.

Pe resursa sa, Google analizează site-urile și oferă recomandări de bază - ce ar trebui să facă un webmaster pentru a reduce timpul de încărcare a paginii, ceea ce înseamnă că acest lucru va duce la o creștere a poziției site-ului în rezultatele căutării.

Dacă restul recomandărilor, cum ar fi: optimizarea imaginilor, optimizarea încărcării conținutului vizibil și altele asemenea, nu vor fi o problemă, atunci „eliminați codul JavaScript și CSS care blochează afișarea în partea de sus a paginii”, care este unul dintre cele mai importante acțiuni, îi face pe proprietarii de site-uri să se scarpine în cap - cum poate fi rezolvat acest lucru.

Voi spune imediat - nu sunt bun la programare și la mine Blog WordPress Prefer scenariile schimbare manuală cod fișiere de sistem. Mă întrebam cum să o fac această recomandareși am găsit o cale de ieșire.

1) Instalați pluginul Autoptimize.

2) Configurați exact așa cum am descris în .

3) Dacă PageSpeed ​​​​Tools arată încă o eroare, uitați-vă la ce scripturi reacționează și eliminați-le din linie în setările pluginului Autoptimize (Opțiuni JavaScript - Excludeți scripturi din Autoptimize). Aceasta înseamnă că vor fi optimizate.

4) Bucură-te! PageSpeed ​​​​Tools nu se mai plânge.

V-am spus cum să rezolvați recomandarea de a elimina codul JavaScript și CSS care blochează randarea din partea de sus a paginii. Acum parte vizibilă paginile au început să se încarce mult mai repede, site-ul a ocupat poziții mai înalte în rezultatele căutării și au fost mai mulți vizitatori.

Apropo, iată o comparație a evaluării site-ului meu înainte de a începe optimizarea (la acea vreme încă foloseam prostește designer WIX) și după ce am trecut la WordPress (aici am primit o gamă largă de instrumente pentru a-mi îmbunătăți blogul). Astăzi, scorul meu este de 96%. Şi tu?

Adăugat 17.05.2017:

Am eliminat Webvisor din Yandex (deoarece încetinește foarte mult viteza de încărcare) și am schimbat codul Metrica de pe site. Acum am 98%.

Ce trebuie să faceți dacă Google PageSpeed ​​​​detectă cod JavaScript și CSS care blochează randarea părții de sus a paginii. Să ne dăm seama care este esența pretențiilor Google față de site-ul tău:

Când un utilizator deschide un site web, browserul trimite o solicitare către server, primește rezultatul și îl prezintă. Totul se întâmplă atât de simplu cu site-uri fără glisoare, elemente dinamice și stiluri. O cerere - un singur răspuns. Dacă site-ul dvs. are continut interactiv, schema devine mai complicată: sunt încărcate în codul html fișiere suplimentare(.css, .js etc.)

Viteza site-ului depinde de numărul de solicitări către servere externe (cereri JS, CSS, imagini) și de cantitatea de informații care trebuie returnată în cele din urmă. În special, codul JavaScript și CSS care blochează încărcarea paginii este asociat și cu o solicitare externă, care împiedică browserul să prezinte rapid utilizatorului primul ecran.

Dacă codul JavaScript este plasat în antetul site-ului, browserul se va opri și va aștepta un răspuns de la serverele la care scripturile se leagă. Dacă nu ar fi întâlnit scripturi js la începutul redării, ar fi încărcat rezultatul inițial mai repede.

Pentru a vă asigura că site-ul dvs. îndeplinește această cerință de optimizare:

• eliminați codul JS din etichetă (în partea de sus a paginii). Asigurați-vă că orice apeluri către resurse externe sunt situate cât mai aproape posibil de sfârșitul fișierului html. Solicitarea JavaScript trebuie plasată înaintea etichetei de închidere.

Excepția este CSS: este recomandabil să încărcați stilurile într-o etichetă, pre-lipite și minimizate. Citiți despre optimizarea codului CSS.

• utilizare încărcare asincronă javascript Încărcarea asincronă va permite browserului să nu se oprească în așteptarea unui răspuns de la serverul extern și să continue procesarea documentului HTML principal. Pentru a adăuga încărcare asincronă, utilizați atributul asincron.

Vă rugăm să rețineți

Acțiunile enumerate afectează scripturile de cod ale site-ului dvs. Acest lucru poate duce la a nu fi afișat corect în browser. Prin urmare, vă recomandăm să faceți mai întâi o copie de rezervă a site-ului. Pentru a minimiza riscurile, contactați dezvoltatorii site-ului. Specialiști suport tehnic Site-ul nu este consultat cu privire la optimizarea scripturilor site-ului.

Puteți elimina automat JavaScript și codul CSS din partea de sus a paginii folosind plugin-uri speciale CMS.