Recent, Google și-a asumat serios sarcina de a „accelera” internetul. Astăzi, corporația este asociată cu aproape toate dezvoltările care vizează optimizarea resurselor web, dacă ați uitat, vă reamintesc: crearea unui CDN, manifeste CSS, dezvoltarea unei platforme javascript, DNS public și multe altele. Astăzi vom vorbi despre noul serviciu Google PageSpeed, care vă permite să optimizați datele și să le încărcați mult mai rapid.

Ce este serviciul PageSpeed?

Principiul de funcționare al noului serviciu este incredibil de simplu. După ce vă configurați site-ul pentru a funcționa cu serviciul, robotul de căutare Google va intercepta toate datele de pe serverul dvs., va optimiza conținutul și va stoca un cache pe serverul său. Când un utilizator accesează orice pagină de pe site-ul dvs., Google vă înlocuiește datele cu cele stocate pe serverele sale, ceea ce duce la o încărcare mai rapidă a paginii.

Cerințele de PageSpeed?

Există câteva lucruri pe care ar trebui să le știți înainte de a începe să utilizați un serviciu nou. Viteza paginii.

1. În prezent, serviciul nu acceptă lucrul cu domenii „nude” prefixul www trebuie să fie prezent în domeniul site-ului. Adică, http://example.com nu va funcționa cu noul serviciu, dar http://www.example.com se va lansa fără probleme. Poate că acest defect va fi corectat în viitorul apropiat.

2. Trebuie să aveți acces complet la panoul de control al numelui de domeniu. Pentru ca PageSpeed ​​să funcționeze, va trebui să modificați înregistrarea CNAME. Dacă ați înregistrat un domeniu la un hoster, va trebui să îl contactați pentru ca suportul tehnic să poată schimba înregistrările CNAME pentru dvs.

Configurarea unui site pentru a funcționa cu PageSpeed

1. Pentru a începe, mergeți și faceți clic pe butonul de înregistrare.

Întrucât PageSpeed ​​​​este în prezent testat, puteți deveni unul dintre testeri doar prin invitație. După ce vă înregistrați, va trebui să așteptați un timp cât experții Google vă procesează cererea. În funcție de ora din zi și de calitatea site-ului dvs., așteptarea poate dura o oră sau mai mult.

2. După ce vi s-a trimis o invitație, mergeți și faceți clic pe butonul evidențiat din bara laterală - Serviciul Viteza paginii.

S-ar putea să existe o ușoară problemă în această etapă. Dacă nu ați adăugat anterior site-ul dvs. la panoul Google Webmaster, acum este momentul să faceți acest lucru. Sistemul va oferi exact acest scenariu.

După ce adăugați un site la secțiunea pentru webmasteri, trebuie să modificați înregistrările pentru domeniu și anume să setați adresa corectă CNAME, pe care serviciul o va folosi pentru a vă verifica și a crea pagini CACHE.

4. Modificările valorii CNAME se fac prin intermediul panoului de domeniu de la registrator. Pentru a ajunge la setările de la registratorul NameCheap, trebuie să mergeți la All Hosts Record și apoi să urmați calea de gestionare a gazdelor. Registratorul internațional GoDaddy stochează valoarea CNAME în managerul său DNS. În general, panourile de control de domeniu ale tuturor registratorilor au același principiu și, prin urmare, concentrându-vă pe exemplul de mai jos, vă puteți da seama.

Aproape întotdeauna, intrarea adresei IP și intrarea alias-ului de e-mail sunt identice.

Când accesați panoul de gestionare a înregistrărilor CNAME, veți vedea un formular similar:

Ce trebuie schimbat?

Lăsăm neschimbată intrarea cu e-mailul „@”, dar în rândul adresei IP, schimbăm valoarea numerică în pagespeed.googlehosted.com. În unele cazuri, va trebui să adăugați un punct (fără ghilimele) la sfârșitul numelui de domeniu: „pagespeed.googlehosted.com”.

De asemenea, în câmpul Tip de înregistrare, trebuie să selectați valoarea Aliasului CNAME. După efectuarea ajustărilor, salvați formularul făcând clic pe butonul corespunzător.

Asta este. Acum va trebui să așteptați aproximativ o zi pentru ca DNS-ul domeniului să se schimbe în toate browserele. Dacă nu ați putut afla pe cont propriu cum să schimbați DNS-ul unui domeniu, scrieți la asistența tehnică a registratorului, cu siguranță vă vor ajuta.

Întrucât Page Speed ​​​​nu acceptă în prezent domenii simple precum (http://example.com), va trebui să redirecționați către un domeniu cu un prefix, adică http://www.example.com, pentru a funcționa. Acest lucru este foarte ușor de făcut pe serverele Apache. Doar adăugați următoarea intrare în fișierul principal .htaccess (în folderul rădăcină al site-ului):

RewriteEngine On RewriteCond %(HTTP_HOST) ^example.com RewriteRule (.*) http://www.example.com/$1

Nu uitați să schimbați „example.com” cu numele de domeniu al site-ului dvs.

Beneficiile utilizării vitezei paginii

Puteți verifica creșterea vitezei de încărcare a paginii folosind capabilitățile standard Google API. După ce au fost făcute toate setările și DNS-ul este actualizat, faceți clic pe butonul „Run Speed ​​​​Test”.

Sistemul vă va redirecționa automat către o pagină în care aplicația vă va afișa rezultatele. În medie, viteza de încărcare crește cu 24%, iar viteza de indexare a conținutului cu 40%. Apropo, timpul petrecut cu descărcări poate fi redus puțin mai mult dacă configurați memoria cache a imaginilor.

Viteza de încărcare a site-ului web este unul dintre cei mai importanți indicatori ai utilizării resurselor și, mai important, este unul dintre sutele de factori de clasare. Într-adevăr, un utilizator modern care face clic pe un link nu așteaptă mai mult de 5 secunde până se încarcă pagina. Prin urmare, cu cât site-ul dvs. durează mai mult pentru încărcare, cu atât veți pierde mai mulți clienți potențiali.

Peste 50% dintre utilizatorii de internet de pe dispozitive mobile se așteaptă la încărcare aproape instantanee a site-ului. Pe baza acestor statistici, acest articol va discuta cum să obțineți 100/100 în Google PageSpeed ​​​​Insights pentru desktop și dispozitive mobile, folosind ca exemplu site-ul Monitor Backlinks.

Motivația

Site-ul de probă se încarcă deja destul de repede, așa că în acest caz rezultatele vor fi îmbunătățite la maximum.

Într-o zi, în timp ce lucra cu PageSpeed ​​​​Tool, s-a observat că site-ul web al Google a avut un scor surprinzător de scăzut pentru dispozitivele mobile - 59/100. Situația cu versiunea pentru dispozitive desktop a fost mai bună - 92/100.

S-ar părea că ar fi trebuit să-și folosească propriul instrument pentru a-și optimiza site-ul, nu? Deci rezultatul 100/100 este de neatins?

Acesta este ceea ce ne-a motivat să realizăm cel mai rapid timp de încărcare posibil pentru site, să demonstrăm că se poate obține rezultate 100/100, iar dacă vrei, poți să o faci și tu. Nu este o obsesie, este doar o dorință de a atinge perfecțiunea.

Indicatorii de pornire ai site-ului experimental sunt 87/100.

Drept urmare, după aplicarea anumitor manipulări, s-au obținut următoarele rezultate:

Citiți mai departe pentru a afla cum am reușit să obținem aceste rezultate.

Cum se accelerează încărcarea paginii?

Înainte de a continua cu instrucțiunile pas cu pas, permiteți-mi să observ că instrumentul PageSpeed ​​​​este doar un ghid pentru webmasteri pe calea spre optimizarea resurselor. În plus, instrumentul conține recomandări pentru accelerarea încărcării paginilor site-ului dvs., iar obținerea de rezultate pozitive depinde în mare măsură de setările serverului.

Vă rugăm să rețineți că unii dintre pașii din instrucțiuni pot necesita cunoștințe tehnice, indiferent de sistemul de management al conținutului (CMS) utilizat.

Asadar, haideti sa începem:

Pasul #1: Optimizarea imaginilor

Pentru a face imaginile să se încarce mai rapid, Instrumentul PageSpeed ​​​​Insights a sugerat optimizarea lor prin reducerea dimensiunilor fișierelor. Pentru a rezolva această problemă, trebuie să faceți două lucruri importante:

• Comprimați toate imaginile folosind instrumente precum Compressor.io și TinyPNG. Acestea sunt instrumente gratuite care vă pot ajuta să reduceți dimensiunea unui fișier grafic cu mai mult de 80% și, în unele cazuri, fără a compromite calitatea imaginii în sine.
• Reduceți dimensiunile imaginii la minimum fără a le reduce calitatea. De exemplu, dacă pe site avem nevoie de o imagine de 150x150px, atunci pe server imaginea trebuie să fie de dimensiunea corespunzătoare. Parametrii imaginii nu trebuie ajustați folosind etichete CSS sau HTML.

Conform regulilor de mai sus, fiecare imagine de pe site a fost încărcată și comprimată și dimensionată manual. Și pentru a nu vă deranja cu optimizarea imaginilor după ce sunt încărcate pe site, este mai bine să vă dezvoltați obiceiul de a optimiza inițial toate imaginile noi încărcate pe server. Fiecare imagine nouă trebuie să fie comprimată și ajustată la parametrii necesari.

PageSpeed ​​​​Insights oferă opțiunea de a descărca imagini deja optimizate, astfel încât acestea să poată fi încărcate pe server direct din serviciu. Același lucru se poate face cu JavaScript și CSS.

Pasul 2: Minimizează JavaScript, CSS și HTML

În exemplu, Google sugerează reducerea cantității de fișiere JavaScript și CSS.

Procesul de minificare vă permite să reduceți dimensiunile fișierelor prin eliminarea spațiilor inutile, pauzele, rândurile, caracterele și comentariile din fișierele JavaScript și CSS. Programatorii lasă adesea mult spațiu și comentarii în timpul codificării, ceea ce poate dubla dimensiunea fișierelor JavaScript și CSS.

Pentru a remedia această problemă, Gulpjs a fost instalat pe server. Acesta este un instrument care creează automat un nou fișier CSS și elimină toate spațiile inutile. De asemenea, creează automat un nou fișier CSS de fiecare dată când faceți noi modificări. În exemplul de mai sus, acest lucru a ajutat la reducerea dimensiunii fișierului CSS principal de la aproximativ 300Kb la 150Kb. Această diferență de dimensiune se datorează caracterelor inutile.

Puteți reduce și mai mult dimensiunea JavaScript și CSS prin redenumirea variabilelor, cu condiția ca selectoarele să funcționeze corect și HTML-ul să fie actualizat.

Puteți optimiza JavaScript folosind Closure Compiler, JSMin sau YUI Compressor. Puteți crea un program special care, folosind instrumentele de mai sus, va redenumi fișierele și le va salva în directorul de lucru.

Puteți reduce CSS folosind YUI Compressor și instrumentele cssmin.js.

Puteți minimiza codul HTML folosind PageSpeed ​​​​Insights. Analizați pagina și selectați „Scurtați HTML”. Pentru a optimiza codul, faceți clic pe „Vedeți conținut optimizat”.

Puteți afla mai multe despre optimizarea fișierelor JavaScript și CSS la următorul link:

De asemenea, puteți descărca fișiere optimizate direct din PageSpeed ​​​​Tool.

Iată rezultatele obținute după minimizarea JavaScript și CSS:

Pasul #3: Utilizarea browserului cache

Pentru mulți webmasteri, pasul de utilizare a stocării în cache a browserului este cel mai dificil.

Pentru a rezolva această problemă, a trebuit să mutăm toate fișierele statice de pe site în CDN (rețea de livrare a conținutului).

Un CDN este o rețea de servere situate în diferite locații din lume. Acestea memorează în cache versiuni statice ale site-urilor web, cum ar fi imagini, fișiere JavaScript și CSS. Serverele CDN stochează copii ale conținutului site-ului, iar atunci când vizitați acest site, conținutul static este descărcat de pe cel mai apropiat server.

De exemplu, dacă serverul principal al site-ului este situat în Texas, atunci fără un CDN, un vizitator din Amsterdam va trebui să aștepte până când conținutul site-ului călătorește până la un server situat în SUA. Cu un CDN, site-ul se va încărca mult mai repede de pe serverul cel mai apropiat de utilizator, în acest caz din Amsterdam. Astfel, distanța de acces la date este redusă și site-ul se încarcă aproape instantaneu.

Iată o vizualizare a modului în care funcționează CDN-ul:

Pe site-ul de testare, toate imaginile, fișierele JavaScript și CSS au fost transferate pe CDN și doar fișierele HTML au rămas stocate pe serverul principal. Găzduirea imaginilor pe un CDN joacă un rol important în cât de repede se încarcă paginile site-ului dvs. pentru vizitatori.

După manipulările de mai sus, instrumentul PageSpeed ​​​​a continuat în mod enervant să sugereze utilizarea memoriei cache a browserului pentru resurse individuale terțe. Iată o captură de ecran:

Pentru a rezolva această problemă, a trebuit să reparăm scripturile rețelelor sociale prin înlocuirea contoarelor cu imagini statice găzduite pe un CDN. În loc de scripturi terțe care încercau să acceseze date de pe Twitter, Facebook sau Google Plus pentru a număra abonații, a fost instalat un contor autonom, care a ajutat la rezolvarea acestei probleme.

Dar ceea ce a fost mai frustrant a fost că, pe lângă problemele cu scripturile de social media, site-ul era încetinit de codul Google Analytics.

Rezolvarea unei probleme cu un script Google Analytics este o sarcină destul de dificilă. Deoarece Analytics era necesar și nu poate fi eliminat de pe site, a trebuit să căutăm alte soluții.

Google modifică codul Analytics destul de rar, o dată sau de două ori pe an. Prin urmare, Razvan a creat un script special care verifică cele mai recente actualizări de cod Analytics la fiecare opt ore și, dacă se găsesc actualizări, le descarcă. În acest fel, puteți găzdui codul JavaScript Analytics pe server, eliminând nevoia de a-l descărca de pe serverele Google de fiecare dată când vizitați.

Dacă nu există actualizări, codul Analytics va fi încărcat din versiunea stocată în cache pe CDN.

Și când Google actualizează codul JavaScript, serverul va descărca automat noua versiune și o va actualiza pe CDN. Acest script a fost folosit pentru toate scripturile externe ale terților.

Iată o captură de ecran din Pingdom Tools care arată toate descărcările de pe CDN, inclusiv codul Google Analytics. Singurul fișier de descărcare de pe server este fișierul paginii de pornire, care are doar 15,5 Kb. Eliminarea tuturor scripturilor terță parte a îmbunătățit considerabil viteza generală de încărcare.

Pasul #4: Eliminarea codurilor de blocare

Eliminarea blocantelor este, de asemenea, un pas destul de dificil în procesul de îmbunătățire a vitezei de încărcare a paginii, care necesită cunoștințe tehnice bune. Principala problemă care trebuia rezolvată a fost revizuirea întregului cod JavaScript începând de sus de la „header” și „body” până la „footer” situat în partea de jos a tuturor paginilor site-ului.

Dacă site-ul dvs. se află pe platforma Wordpress, pluginul Autopmize vă va ajuta cel mai probabil să rezolvați această problemă. Verificați setările și apoi Debifați „Forțare JavaScript” și setați-l la „Inline all CSS”.

Pasul #5: Activați compresia

Pasul #6: Optimizarea formatului mobil

Analiza formatului mobil arată adaptabilitatea versiunii mobile a site-ului pentru diferite tipuri de rezoluție, utilizarea fonturilor adecvate și prezența unui sistem de navigare bun.

Folosind Google Chrome, puteți vedea cum arată site-ul dvs. în diferite versiuni mobile. Pentru a face acest lucru, faceți clic pe pictograma de meniu (hamburger) a setărilor și comenzilor browserului din colțul din dreapta sus, apoi selectați „Mai multe instrumente → Instrumente pentru dezvoltatori”. Pe bara de instrumente, selectați pictograma cu imaginea dispozitivelor mobile. Asta e tot, uite:

În cazul exemplului, nu au fost necesare modificări radicale.

Concluzie

Drept urmare, au fost parcurși cei mai importanți 6 pași, care au ajutat la obținerea unui scor ideal de 100/100 în Google PageSpeed ​​​​Tools pentru site-ul Monitor Backlinks. Drept urmare, nu numai pagina principală a fost optimizată, ci și toate paginile interne.

Dintre toate acțiunile întreprinse pentru optimizarea site-ului, pot fi identificate cele trei cele mai importante:

1. Folosind un CDN.
2. Eliminarea codurilor de blocare. (Evitați JavaScript în corpul codificării; mutați-l în partea de jos a fișierelor.)
3. Optimizarea și compresia dimensiunii imaginii.

Aș dori să vă reamintesc încă o dată că Google PageSpeed ​​​​Tools este doar un instrument auxiliar pentru optimizarea resurselor. Instrumentele sunt concepute pentru a reduce timpul dintre solicitare (click pe un link) și răspunsul paginii site-ului (afișarea primelor elemente ale paginii), astfel încât vizitatorii să nu părăsească site-ul fără să aștepte încărcarea acestuia. De asemenea, recomandările oferite de instrument trebuie folosite cu prudență, astfel încât utilizatorilor să nu li se arate un aspect rupt sau un set nestilizat de blocuri.

Notă. Încărcarea rapidă a paginilor site-ului afectează indirect clasarea resursei în motoarele de căutare, adică: viteză mai mare de încărcare → vizite mai multe și mai lungi → clasare mai mare.

Dacă ați folosit Google PageSpeed ​​​​Insights pentru a vă optimiza site-ul, vă rugăm să vă împărtășiți rezultatele în comentarii.

De asemenea, nu uita ca specialistii UAWEB sunt intotdeauna pregatiti sa ofere asistenta necesara in crearea, optimizarea si promovarea resursei tale web, astfel incat fiecare secunda petrecuta de utilizatori pe site-ul tau sa iti aduca beneficii!

Viteza de încărcare a site-ului web este cea mai importantă componentă a unei experiențe pozitive de utilizator, precum și unul dintre factorii de clasare a site-ului web în rezultatele căutării. Adevărul este că utilizatorii de astăzi nu vor să aștepte mai mult de 5 secunde până se încarcă o pagină. Dacă site-ul dvs. nu se încarcă suficient de repede, pierdeți clienți potențiali.

Având în vedere că 50% din traficul online provine de pe dispozitivele mobile, utilizatorii se așteaptă la încărcare aproape instantanee a site-ului în versiunea mobilă. În acest articol, veți învăța cum să obțineți nota 100 din 100 cu instrumentul Google PageSpeed ​​​​Insights atât pentru versiunile mobile, cât și pentru cele desktop ale site-ului dvs. web.

Motivația

La verificarea site-ului Google cu instrumentul său PageSpeed ​​​​Insights, s-a observat că nu există probleme cu versiunea desktop a site-ului - 100/100, dar rezultatele versiunii mobile lasă de dorit - 71/100.

Înseamnă asta că un rezultat de 100/100 nu este atins?

Cum să faci paginile să se încarce mai repede

Primul lucru de remarcat este că instrumentul PageSpeed ​​​​este doar un ghid pentru îmbunătățirea calității site-urilor web. Instrumentul oferă recomandări pentru optimizarea site-ului web care ajută la îmbunătățirea vitezei de încărcare a paginii, dar obținerea rezultatului dorit depinde de setările serverului.

Unii dintre acești pași necesită expertiză tehnică, alții nu. Aceste instrucțiuni pot fi urmate în orice sistem de gestionare a conținutului.

Pasul unu: optimizați-vă imaginile

Instrumentul PageSpeed ​​​​Insights oferă optimizarea imaginilor prin reducerea dimensiunii fișierului. Pentru a face acest lucru, puteți lua următoarele măsuri:

· Comprimați toate imaginile folosind instrumentele Compressor.io și TinyPNG (sau orice alte instrumente gratuite). În unele cazuri, aceste instrumente pot reduce dimensiunea imaginilor cu mai mult de 80% fără a le compromite calitatea.

· Reduceți dimensiunea imaginilor la parametrii necesari fără a le compromite calitatea. Să presupunem că dacă aveți nevoie de o imagine de dimensiunea 150x150px, aceasta este dimensiunea imaginii care trebuie încărcată pe server. Nu este recomandat să folosiți imagini mai mari decât doriți să încapă pe site sau să le reduceți dimensiunea folosind etichete CSS sau HTML.

Puteți descărca imagini, le puteți comprima și formata manual sau puteți utiliza serviciul PageSpeed ​​​​Tool și puteți descărca o imagine deja optimizată. Același lucru se poate face cu JavaScript și CSS.

Pasul doi: Reduceți resursele CSS și JavaScript

Dimensiunea resursei poate fi redusă prin eliminarea octeților care nu sunt necesari, cum ar fi spații suplimentare, întreruperi de linie și indentare. Când creează coduri, programatorii lasă adesea spații goale și comentarii. Uneori, ștergându-le, puteți reduce dimensiunea fișierelor la jumătate.

Pentru a rezolva această problemă, puteți instala instrumentul Gulpjs pe server. Instrumentul creează automat un nou fișier CSS și elimină toate spațiile albe. De asemenea, creează automat un nou fișier CSS pentru orice modificări pe care le faci. În acest caz, dezvoltatorul a reușit să reducă dimensiunea fișierului CSS principal de la 300 kb la 150 kb.

Dacă utilizați WordPress, este o idee bună să instalați pluginul Autoptimize.

De asemenea, puteți descărca fișiere deja optimizate sugerate de PageSpeed ​​​​Tool.

Pasul trei: Optimizați timpul de răspuns al serverului

Pentru a îmbunătăți timpul de răspuns al serverului, puteți muta toate fișierele statice de pe site-ul dvs. pe un CDN.

Un CDN este o rețea de servere răspândite în întreaga lume care optimizează livrarea și distribuirea conținutului (imagini, fișiere CSS și JavaScript) către utilizatorii finali de pe Internet. Un CDN stochează copii ale conținutului site-ului dvs. pe serverele sale. Când un utilizator vă vizitează site-ul, conținutul static este încărcat de pe serverul cel mai apropiat de el.

Să presupunem că serverul principal al site-ului dvs. este în Texas și nu utilizați un CDN. Un utilizator din Amsterdam, de exemplu, va trebui să aștepte până când serverul încarcă un site din America. Dacă utilizați un CDN, site-ul dvs. se va încărca de pe serverul cel mai apropiat de Amsterdam, ceea ce va dura mult mai puțin.

Mai jos este o diagramă a funcționării CDN cu GTmetrix.

Puteți transfera toate imaginile, fișierele JavaScript și CSS în CDN și lăsați doar fișierul HTML pe serverul principal. Găzduirea imaginilor pe un CDN poate îmbunătăți semnificativ viteza de încărcare a paginilor site-ului.

Pasul patru: Folosiți browserul cache

Folosirea unui cache de browser înseamnă că fișierele de pe site-ul dvs. - imagini, fișiere CSS și JavaScript - sunt descărcate de pe server o singură dată, iar browserul le stochează pe computer. Data viitoare când paginile sunt încărcate, toate fișierele necesare vor fi „trase” din computerul utilizatorului.

Pentru a utiliza memoria cache a browserului, trebuie să creați un fișier .htaccess și să scrieți directivele necesare în el folosind modulul expires. Durata în care datele sunt stocate în cache poate fi setată în funcție de timp, de ultima modificare a fișierului sau de timpul de acces al clientului.

Pasul cinci: eliminați resursele care blochează afișarea din partea de sus a paginii

Principala provocare cu care trebuie să se confrunte dezvoltatorii în acest caz este mutarea codului JavaScript din partea de sus și din corpul paginii în partea de jos pe tot site-ul.

Dacă utilizați WordPress, pluginul Autoptimize menționat mai devreme vă poate ajuta în acest sens. Pentru a face acest lucru, trebuie doar să modificați setările pluginului.

Pasul șase: Activați compresia

Puteți activa compresia în setările serverului dvs. Dacă vă îndoiți de competența dvs. în această chestiune, solicitați asistența tehnică pentru a activa compresia GZIP pentru serverul dvs.

Pasul șapte: optimizați versiunea mobilă

O versiune adaptivă a unui site mobil necesită utilizarea unei rezoluții corecte de imagine, setări de font și un sistem de navigare bun.

Puteți vedea cum arată site-ul dvs. pe diferite dispozitive în Google Chrome. În meniul din dreapta sus, faceți clic pe „Instrumente suplimentare”, apoi pe „Instrumente pentru dezvoltatori”.

Concluzie:

Deci, cei mai importanți patru pași pe care trebuie să-i faceți pentru a îmbunătăți calitatea site-ului dvs. web sunt:

1. Utilizați un CDN.

2. Utilizați memoria cache a browserului.

3. Eliminați resursele care blochează afișarea din partea de sus a paginii.

4. Optimizați dimensiunea imaginilor și comprimați-le.

Serghei Arseniev

Creșteți viteza de încărcare a site-ului în Google Page Speed ​​​​cu propriile mâini

Pentru a obține poziții înalte în căutări, serviciul trebuie Viteza paginii Google a evaluat viteza site-ului dvs. ca mare

Am observat că viteza site-ului în Google este decisivă, alți factori principali fiind egali, precum linkurile externe, optimizarea internă și vârsta domeniului.

Prin urmare, pentru SEO normal, acesta este un pas foarte important care trebuie făcut după crearea unui site web.

Ei bine, începem prin a verifica valorile curente.

În opinia dvs. personală, site-ul dvs. poate zbura, dar acest lucru nu înseamnă nimic pentru Google.

Are propriile criterii pentru verificarea vitezei site-ului, așa că accesați aici https://developers.google.com/speed/pagespeed/insights/

Introduceți adresa site-ului web și faceți clic pe verifica.

Introdu adresa de pe http sau https și asigură-te că site-ul este pornit în modul normal (nu în modul de întreținere) și permite indexarea tuturor elementelor importante ale site-ului.

Cu cât rezultatul este mai aproape 100 de puncte cu atât mai bine

Norma este de 80 de puncte și mai mult.
Dacă ai mai multe, grozav.
Adică, dacă rezultatul tău este de 90 de puncte, atunci zvâcnirea și încercarea de a obține 100 prin orice mijloace nu este o sarcină foarte plină de satisfacții.

Deci, dacă aveți 80 de puncte și mai mult, atunci nu vă faceți griji, dar fiți fericit: majoritatea proiectelor au 40-50 de puncte înainte de optimizarea vitezei de încărcare.

Personal cred că pentru proiectele cu funcționalitate mare, chiar și 70 de puncte pe Google Page Speed ​​​​este destul de acceptabil.

Ei bine, dacă aveți mai puțin de 70 de puncte și cu atât mai mult 20-30, atunci ar trebui să vă gândiți serios la optimizarea vitezei site-ului pentru Google.

Voi începe cu cele mai simple metode și voi încheia cu cele complexe, care sunt potrivite pentru cei mai meticuloși proprietari de site-uri care au nevoie de 100 din 100.

Activați compresia

Cel mai simplu mod de a accelera încărcarea site-ului pentru Google este să activați compresia GZIP. Acesta este un mecanism special de arhivare a datelor din mers, care este acceptat de 99,99% dintre hosteri.

Dacă hosterul dvs. nu îl acceptă, atunci schimbați hosterul (pe cine).

Puteți activa compresia GZIP în WordPress folosind un plugin de cache Cel mai rapid cache WP.
În Opencart folosind un plugin NitroPack

Dacă nu doriți să instalați pluginuri, puteți modifica datele direct în fișierul .htaccess, care se află în folderul rădăcină al site-ului ().

Adăugați acolo codul pe care aceste plugin-uri îl generează. La sfârșitul articolului, voi posta aceste coduri complet de pe site-urile mele, pentru a nu le posta aici bucăți la fiecare punct, altfel vă veți încurca.

Reduceți timpul de răspuns al serverului

Depinde de serverele hosterului tău, de încărcarea acestora și de lăcomia proiectului tău.

Uneori, doar acest indicator poate anula toate eforturile dumneavoastră de a optimiza SEO-ul proiectului dumneavoastră.

Este important să verificați această setare viteza site-ului în funcție de viteza paginii Google la diferite ore ale zilei sau nopții- este foarte posibil ca serverul hosterului să fie pur și simplu supraîncărcat cu solicitări în acest moment.

Dacă alteori totul este în cea mai mare parte în regulă, atunci puteți ignora volumul de muncă ocazional de o singură dată pentru moment.

Dacă acest indicator este constant rău, atunci are sens:

• instalați module de cache (recomand să le instalați pentru fiecare proiect în orice caz!) pentru a reduce încărcarea pe găzduire slabă și timpul necesar pentru a genera paginile site-ului.
• Gândiți-vă să vă schimbați hosterul cu unul care are cea mai rapidă găzduire posibilă sau treceți pur și simplu la . Acest lucru este de obicei suficient pentru dezvoltarea proiectelor în majoritatea cazurilor.
• Dacă ai un ban în plus, comandă-l (reducere de 20% cu codul promoțional „moytop”). Acest lucru va oferi o funcționare foarte stabilă și rapidă a site-ului.
• cea mai dificilă cale este optimizarea internă a scripturilor site-ului (până la o reproiectare completă a întregului site). Vă recomand să faceți acest lucru din urmă, deoarece este foarte dificil și este aproape imposibil să găsiți un specialist normal pentru bani rezonabili.

Utilizați memoria cache a browserului

Aceasta este, de asemenea, o modalitate ușoară de a vă crește rapid scorul Google Page Speed ​​​​.

La fel ca și în cazul compresiei GZIP, se rezolvă prin adăugarea de cod la htaccess. Puteți să-l adăugați manual sau folosind aceleași pluginuri de cache.

La sfârșitul articolului, voi furniza întregul cod, îl puteți copia și încerca să îl adăugați manual în fișierul dvs. prin .

Mai bine, utilizați pluginurile dovedite pe care le-am sugerat deja mai sus.

Optimizați-vă imaginile

Cea mai profitabilă metodă de optimizare pe care oricine o poate face cu ușurință cu propriile mâini.

Scopul este de a reduce calitatea imaginilor de pe site, astfel încât acestea să ocupe mai puțin spațiu și să se încarce mai rapid.

Cel mai inteligent mod de a face acest lucru este prin Google Page Speed ​​​​însuși.
Însă trebuie să o faci manual, ceea ce înseamnă că trebuie să mânuiești!

De mai bine de un an caut un program normal care să comprima automat imaginile folosind algoritmul Google și să păstreze structura folderului.

Din păcate, nu am găsit un astfel de program. Am revizuit tot felul de vizualizatori precum XnView, Infran, programe precum Caesium, FileOptimizer, Ibatch, ImageOptim, servicii precum TinyPng etc. - fara automatizare.

Daca stie cineva un astfel de program, scrie in comentarii.

Cerințe primare:

• compresie folosind algoritmul Google (astfel încât după descărcarea imaginilor finalizate, acestea să îndeplinească cerințele Google pentru viteza de încărcare)
• pierdere minimă de calitate
• lucrul cu menținerea structurii folderelor
• eliminarea metadatelor etc. gunoi.
• detectarea automată a formatului de intrare și ieșire

Ei bine, deși nu există niciun program, va trebui să o faci manual.

Descărcați și despachetați.

Și apoi petrecem mult timp și schimbând plictisitor fișierele prin FTP pe site, înlocuind versiunea veche cu una nouă.

Din păcate, calitatea imaginilor JPG se pierde semnificativ.
PNG - calitatea rămâne foarte bună, aproape ca originalul, iar dimensiunea este redusă de 2-3 ori. Deci, dacă aveți o mulțime de fișiere PNG, vor fi economii foarte mari.

Vă recomand să salvați fișierele originale înainte de a face upgrade; este posibil să nu vă placă întregul rezultat al reducerii Google; Ei bine, comparați pozele în vizualizator înainte de a le încărca, pentru a nu comanda o poză sincer urâtă.

Nu există nicio ieșire pentru a obține o viteză mare a site-ului în Google va trebui să sacrificeți calitatea unor imagini.

Reduceți CSS + HTML + JS

În acest caz, Google Page Speed, prin analogie cu imaginile, vă cere să eliminați tot ce nu este necesar din fișierele de aspect, scripturi și codul paginii - spații, comentarii etc.

Astfel încât fișierul în sine cântărește mai puțin și site-ul se încarcă mai repede.

Când utilizați pluginuri de cache, totul se face automat din mers. Acesta este cel mai convenabil mod, deoarece nu vă schimbă codul, ci creează fișiere CSS și HTML separate - minimizate, care sunt predate Google și toată lumea este mulțumită.

Dacă reduceți fișierele într-un serviciu, rețineți că mai târziu va fi problematic să faceți modificări la astfel de fișiere tăiate.

Puteți descărca fișierele reduse „de pe Google” în același loc cu imaginile - acestea vor fi într-o arhivă.

Dar depinde de dvs. să reîncărcați fișierele originale cu ele, în orice caz, păstrați o copie de rezervă a fișierelor vechi.

Optimizați încărcarea conținutului vizibil

În cele mai multe cazuri, nu veți putea face nimic în privința asta, cu excepția poate reface site-ul de la zero.

Prin urmare, aș încerca să nu deranjez prea mult aici și să mă concentrez pe alți factori ai vitezei site-ului în Google.

Eliminați codul JavaScript și CSS

Un punct dificil care necesită cunoștințe și practică.

Desigur, puteți adăuga o etichetă asincronă lângă încărcarea fiecărui fișier JS sau puteți instala un script Google pentru extsrc=, dar conform observațiilor mele, în 90% din cazuri, acest lucru fie nu face nimic, fie rupe site-ul!

Avem nevoie de un specialist JavaScript care va zgudui întregul site și va analiza toate scripturile astfel încât acestea să se poată încărca asincron fără a deteriora nicio funcționalitate.

Și întrucât în ​​WordPress, de exemplu, de obicei 9 din 10 scripturi sunt pluginuri externe, este puțin probabil să faci ceva acolo, deoarece acestea sunt încărcate din propriile foldere și actualizate de 3 ori pe săptămână.

Iar modificările dvs. vor fi pur și simplu suprascrise.

Bună ziua, dragi cititori ai site-ului blogului. Astăzi vreau să vă vorbesc despre un subiect atât de important precum viteza de încărcare a site-ului. Probabil ați auzit deja că, alături de mulți alți factori care influențează promovarea unui proiect Web, motoarele de căutare au început recent să ia în considerare și acest lucru. Iar franele de pe site chiar irita vizitatorii, mai ales pe cei obisnuiti cu el.

Dar, cu toate acestea, pentru mulți webmasteri, viteza de încărcare nu este un subiect pe care ar trebui să-ți începi să-ți dezvolți imediat, de obicei, este amânată pentru mai târziu, iar problemele presante legate de umplerea resursei cu materiale unice și de îmbunătățirea acesteia cu optimizare internă; în prim-plan, dar întregul set de factori care influențează. După cum se spune, un lanț este atât de puternic cât veriga lui cea mai slabă...

Servicii online pentru măsurarea vitezei de încărcare a site-ului web

În orice caz, așa am simțit până de curând când am încercat să-mi grăbesc resursele. Dar mi-a trecut prin minte că este mai bine să nu aștept tendințe neplăcute (și anume o scădere a traficului de la , pentru că este mai critic la viteza de încărcare), ci să corectez chiar acum neajunsul evident.

Trebuie doar să realizezi asta viteză, de pe care se încarcă site-ul, blogul sau forumul dvs., este un indicator foarte important. Dacă proiectul dvs. nu merge bine cu acest indicator, atunci acest lucru poate duce la consecințe destul de neplăcute. Și cel mai important dintre ele este că vizitatorii pot refuza să lucreze cu resursa dvs., deoarece... Este nevoie de foarte mult timp pentru a încărca paginile. În plus, motoarele de căutare, în special Google, iau în considerare acest lucru atunci când evaluează utilitatea generală a unei anumite resurse.

Pentru a înțelege cât de repede se încarcă paginile resursei dvs., puteți utiliza, de exemplu, capacitățile acesteia, descrise în detaliu în articolul de la linkul furnizat. Sau puteți utiliza serviciile care sunt concepute pentru aceasta. Mai jos voi da câteva exemple din acestea.

1. Pingdom— aici trebuie doar să indicați adresa paginii a cărei viteză de încărcare doriți să o măsurați (aceasta nu trebuie să fie pagina principală, deoarece viteza de încărcare a paginilor interne nu este mai mică, și adesea chiar mai importantă).

   

   Ca rezultat, va fi prezentată o diagramă a timpului de descărcare a obiectelor individuale ale paginii web, precum și adresa URL și greutatea acestora. Cu cât vor fi încărcate mai puține obiecte și cu atât va cântări mai ușor fiecare dintre ele, cu atât mai bine. De exemplu, în acest scop:

   1. a combinat câteva imagini din tema site-ului în
   2. și, de asemenea, dacă este posibil, redus cu
   3. in afara de asta are sens

   

   De fapt, puteți urmări unele probleme și istoricul măsurării vitezei site-ului dvs. în filele adiacente din meniul de sus al Pingdom.

   Într-o fereastră pop-up, vi se va solicita să copiați linkul permanent către testul finalizat și, de asemenea, să îl trimiteți prin e-mail sau Twitter. De asemenea, vă puteți abona la disponibilitate în partea de jos a ferestrei. Dacă resursa dvs. scade (devine indisponibilă pentru vizitatori), atunci vi se va trimite un mesaj prin e-mail sau SMS pe telefonul mobil. Dar acest serviciu este plătit, deși există posibilitatea unei încercări gratuite.

   Pentru site-ul dvs., precum și pentru a vizualiza Traceroute, va trebui să selectați fila „Ping și Traceroute” din partea de sus a paginii. Introduceți adresa URL fără http în formularul propus, bifați caseta de selectare „Traceroute” sau „Ping” de sub acest formular și faceți clic pe „Testați acum”.

2. WebPageTest— ca de obicei, introduceți adresa URL a paginii pe care o verificați (nu neapărat pagina principală). Serviciul durează ceva timp pentru a calcula viteza de încărcare a tuturor elementelor site-ului, după care produce o diagramă foarte vizuală (mai precis, chiar două - pentru prima trecere și pentru a doua, când unele dintre elementele site-ului sunt încărcate din browser cache):

   

   În prima diagramă, acordați atenție poziției liniei verticale violete - aceasta va fi timpul de finalizare a redării site-ului. A doua linie verticală (albastru) va însemna timp de încărcare completă. Este bine dacă prima linie este la 1-1,5 secunde de la încărcarea site-ului, iar a doua linie este înainte de 4 secunde. Apoi următoarele paragrafe pot fi citite „pentru referință”. Dacă site-ul durează mai mult de 4 secunde pentru a se încărca, atunci trebuie să vă faceți griji cu privire la corectarea acestei situații.

3. Google PageSpeed ​​​​Insights este un instrument pentru dezvoltatori de la Google însuși. Oferă o evaluare a vitezei de încărcare a site-ului dvs. (sau mai bine zis, optimizarea acestei viteze) pe o scară de o sută. 100 este un ideal de neatins, dar obținerea de 80-90 este destul de posibilă, mai ales că serviciul oferă recomandări foarte detaliate pentru corectarea deficiențelor identificate.

   

   După cum puteți vedea din captura de ecran de mai sus, Google PageSpeed ​​​​Insights oferă o evaluare cuprinzătoare - pentru un browser de computer și pentru unul mobil. În plus, mai jos veți găsi o evaluare a ușurinței de utilizare a resursei dvs. pe diverse gadget-uri. Dacă nu v-ați deranjat încă, atunci scorul va fi foarte scăzut (și pe captura de ecran a site-ului dvs. din dreapta în fereastra smartphone-ului, totul va fi vizibil clar).

   Dar cel mai important lucru este că Google PageSpeed ​​​​Insights oferă recomandări despre cum să creșteți scorul site-ului dvs, adică cum să o accelerezi. Trebuie să începeți, firește, de la vârf, deoarece aceste corecții vor aduce cea mai mare contribuție la accelerare.

   De exemplu, am avut o problemă cu setarea compresiei gzip și setarea timpului de stocare în cache pentru fișierele statice (imagini, fișiere css și scripturi) în browserele utilizatorilor, deoarece Apache funcționează împreună cu nginx, dar nu știu cum să lucrez cu aceasta. A trebuit să scriu la asistența tehnică Infobox cu o solicitare de a configura totul - au făcut-o și nici măcar nu au luat banii (mulțumesc lor!). Apropo, inițial au setat timpul de stocare în cache la 1 oră, dar Google PageSpeed ​​​​Insights s-a plâns în continuare:

   

   A trebuit să mă aprofundez în instrucțiunile pentru acest serviciu online și să citesc acolo că minimul necesar este 1 zi de stocare a staticii în cache. Am cerut suportului tehnic de găzduire să furnizeze 1 săptămână de rezervă, ceea ce au făcut. Acum ratingul a crescut puțin și Google nu are nicio plângere majoră cu privire la resursa mea în ceea ce privește viteza de încărcare, ceea ce este bun.

4. Testează-mi site-ul- un serviciu nou, din nou de la Google. Practic, el se concentrează pe evaluarea versiunii mobile a site-ului tău, inclusiv după criteriul vitezei de încărcare a acestuia:

   

   Simplu și cu gust, după cum se spune. Vă puteți abona la newsletter pentru modificări.

5. GTmetrix- din nou, „fără alte prelungiri” introduceți adresa URL a paginii dorite și așteptați puțin până la finalizarea analizei. Ca urmare, veți primi un raport generat pe baza datelor de la două plugin-uri de browser - Viteza paginii (citiți despre lucrul cu acesta mai jos) și YSlow. De fapt, în ce date să aveți încredere și ale cui recomandări să urmați depinde de dvs.

   

   Am scris deja despre asta în detaliu și, prin urmare, nu mă voi repeta, pentru a nu aglomera un articol deja greoi (dacă citești până la sfârșit, te poți considera un erou).

6. Ping Administrator- o resursă online similară pentru măsurarea timpului de răspuns al serverului din diferite părți ale vastei noastre planete.
   
   
7. Localizare gazdă- aproape același lucru, doar țări diferite.
8. ByteCheck— vă permite să măsurați valoarea TTFB (Time To First Byte) pentru site-ul dvs., căruia i se acordă adesea atenție în timpul optimizării. Acesta este momentul în care browserul primește primul octet de date de la server. Cu cât valoarea TTFB este mai mare, cu atât serverul procesează mai lent resursele, ceea ce este rău. Citiți sfaturi pentru optimizarea încărcării site-ului.
9. Impactul sarcinii- nu este vorba în totalitate de viteză, dar este și un serviciu important. Vă permite să testați capacitatea de încărcare a site-ului dvs. și dacă viteza de încărcare a paginii scade. Un lucru foarte util.
10. Viteza paginii web- un serviciu online cu un design de la începutul anilor '90, dar destul de informativ dacă te adaptezi lipsei de utilizare. Mai jos sunt recomandări generale pentru corectarea situației.

Este cu adevărat important să urmăriți viteza de încărcare a paginii?

Dar să ne întoarcem de la măsurarea vitezei la căutarea oportunităților de a o crește. , anterior a existat o filă experimentală „Performanța site-ului”, unde a fost oferită o evaluare a vitezei de încărcare a site-ului.

În general, nu există nimic criminal în viteza de încărcare indicată acolo, dar faptul că site-ul meu blog s-a încărcat mai lent de 84 la sută din toate resursele web de pe Internet este deja un clopoțel la care ar fi trebuit să i se răspundă. Dar, deoarece Google consideră că blogul meu este un străin în ceea ce privește viteza, atunci merită să luăm această problemă în serios și să abordăm problema cum să o creștem.

De fapt, nu a fost nevoie să vină cu ceva special, deoarece Google însuși sugerează cea mai optimă soluție. Mai exact, el sugerează să folosești un instrument care, la rândul său, te va ajuta să înțelegi exact ce trebuie făcut pentru a-ți accelera puțin (sau mult) site-ul. Vorbesc despre un serviciu online Viteza paginii(anterior existau și extensii de browser cu același nume pentru FireFox și Chrome, pe care le foloseam în principal).

Permiteți-mi să fac imediat o rezervare că acest instrument funcționează pe lucruri destul de complexe și nu pe deplin de înțeles pentru webmasterii obișnuiți, care sunt legate în principal de complexitățile și nuanțele funcționării serverului web. Dacă nu ați administrat niciodată un server, va fi dificil.

Există o cale de ieșire - stresează-ți gazda pe tema efectuării acțiunilor pe care le prescrie Paige Speed. Dacă el este de acord sau nu este o altă întrebare. Nu am îndrăznit, pentru că este incomod să dau acces la server oricui (așa sunt de neîncrezător).

Pe pagina principală, PageSpeed ​​​​sugerează chiar să instalați modulul pe serverul dvs. dacă rulează Apache sau Nginx (care este cazul meu):

Dar încă nu înțeleg cum se face acest lucru, pentru că nu înțeleg deloc administrarea serverului și nu am lucrat niciodată cu sisteme asemănătoare Unix. Acest lucru este mult mai dificil decât instalarea unui program sau încărcarea unui plugin în WordPress. Un alt nivel de imersiune. Nici Hoster nu a îndrăznit să-l deranjeze în privința asta. În general, nu am testat acest modul - este posibil să fi încercat deja și să ai ceva de spus...

În general, pentru prima dată am folosit Page Speed ​​​​ca extensie de browser (acum, după cum am înțeles, nu funcționează). Anterior, a fost integrat în instrumentele de dezvoltare din Firefox și Chrome. Adevărat, la început (cu câțiva ani în urmă) m-am uitat doar pe scurt la ce sfat îmi dădea și, neînțelegând aproape nimic, am decis că acest lucru nu este pentru mine, după care, cu o inimă ușoară, am șters PageSpeed ​​​​plugin-ul ca element inutil și străin pentru mintea mea.

Cert este că chiar și înțelegând la ce înjură acest plugin, chiar nu știa ce să facă, pentru a elimina toate acestea și pentru a vă grăbi cumva blogul. În general, am găsit imediat multe lucruri mai importante de făcut, în comparație cu care agitația mouse-ului cu setările serverului web (mai ales că nu le înțeleg în mod deosebit) mi s-a părut mărunte și nesemnificativă.

Adevărat, la un moment dat am lăsat și soluția la problema securității și, în consecință, am plătit-o cu pierderea tuturor acelor bani. Ținând cont de ceea ce s-a întâmplat, zilele trecute m-am hotărât să-mi înfund călcâiele și să încerc să merg mai departe cu problema creșterii vitezei de încărcare a site-ului, în ciuda cât de neînțeles și dificil a fost această problemă pentru mine.

Pe scurt, am reinstalat Page Speed ​​​​în Mazila (acum nu mai trebuie să fac asta), m-am uitat la ce anume s-a plâns cel mai mult și am reușit totuși să îmbunătățesc unele lucruri și, sper, la măcar mărește puțin viteza.

P.S. Acum, Viteza paginii poate fi folosită doar online și nu mai este necesar să fie instalat în browser (în orice caz, acest plugin este incompatibil cu noile versiuni de Chrome), deși acest lucru nu schimbă esența.

Deci, anterior trebuia să instalați un plugin în browser, dar acum trebuie doar să mergeți Aici, introduceți adresa URL a paginii pe care doriți să o analizați (diferitele tipuri de pagini pot avea probleme de viteză de încărcare diferite, așa că este logic să verificați toate opțiunile din acest instrument) și faceți clic pe butonul albastru „Analizați”.

După ce ați așteptat rezultatele procesului de verificare, veți vedea o fereastră similară cu cea pe care am arătat-o ​​deja în captura de ecran de mai sus în text (în paragraful 3 din descrierile serviciilor online de verificare a vitezei de încărcare a site-ului). Acea. ca urmare, veți vedea o listă întreagă de reclamații pe care acest serviciu online le are despre resursa dvs. și anume despre viteza de încărcare a acesteia. În același timp, el vă va oferi câteva instrucțiuni despre optimizarea funcționării serverului Web în legătură cu motorul pe care îl utilizați.

Mai mult, în partea de sus a ferestrei Viteza paginii vor exista comentarii și recomandări pe care ați dori să le vizualizați și să le modificați in primul rand(„remediați-l cu siguranță”), deoarece acest lucru va da cel mai mare efect în ceea ce privește creșterea vitezei de încărcare și nu va necesita prea mult efort din partea dvs. Permiteți-mi să vă dau un exemplu de analiză a unuia dintre proiectele mele minore, la care nu prea înțeleg:

Acestea. recomandările și problemele detectate, marcate cu un dreptunghi roșu cu semn de exclamare și situate în partea de sus a listei, sunt cele mai importante și este recomandabil să începeți optimizarea cu ele (ieftine și vesele, după cum se spune), realizând astfel cel mai mare efect.

Problemele marcate cu portocaliu vor necesita mai mult efort din partea dvs. pentru a le corecta, dar este posibil să nu aibă ca rezultat o creștere foarte semnificativă a vitezei. Vai și ah, deocamdată le puteți pune pe dos și puteți continua cu sarcinile prioritare care vor ajuta la accelerarea semnificativă a proiectului.

Poza mea inițială în urmă cu câțiva ani (chiar și când utilizați pluginul - acum același lucru poate fi văzut în http://gtmetrix.com/, deoarece folosește API-ul PageSpeed) pentru https://site a fost așa:

Apoi am decis să încep de la primul punct „Pârghie de stocare în cache a browserului” (acum se numește „Utilizați memoria cache a browserului”), pentru că după logica Page Speed, aceste recomandări ar trebui să conducă la cea mai mare accelerare a blogului meu.

Dacă dați clic pe spoilerul de lângă această inscripție, va apărea o listă cu diferite fișiere care nu îndeplinesc cerințele optime stocarea în cache a obiectelor statice(scripturi, fișiere CSS, fișiere imagine utilizate pe o pagină web) în browserele utilizatorilor (adică cititori):

Acestea. Pentru a crește viteza de încărcare, PageSpeed ​​​​Insights ne sfătuiește să configurăm în mod optim stocarea în cache a diferitelor elemente ale paginilor web în browserele utilizatorilor, astfel încât atunci când le vizualizați pe altele, aceste elemente statice să nu fie reîncărcate de pe server. În teorie, toate acestea sună destul de confuz, pentru că nu am idee despre mecanismele de stocare în cache utilizate de browsere (citiți despre asta și cum să o șterg).

În plus, vom optimiza stocarea în cache a obiectelor statice folosind mecanismele serverului dvs. de găzduire. Este destul de confuz, dar vă voi oferi soluții gata făcute găsite pe internetul rusesc și le veți încerca în acțiune și veți decide care dintre ele va funcționa cel mai bine pe găzduirea dvs.

Optimizarea stocării în cache a browserului și verificarea funcționării acestuia

Adevărat, acest lucru nu a funcționat pe găzduirea mea actuală, deoarece acum am o combinație de Apache și nginx (trebuie să-l configurez pe acesta din urmă, ceea ce hosterul mi-a făcut într-un mod necunoscut pentru mine). Dar dacă aveți Apache pur, atunci metoda sugerată mai jos poate funcționa.

În general, vom încerca să influențăm serverul pe care este găzduit proiectul dvs. în așa fel încât să emită comenzi către browsere care vizează optimizarea stocării în cache a elementelor statice. Vom face acest lucru printr-un mod destul de cunoscut instrument de gestionare a serverului la distanță - fișier .htaccess. Știți de existența unui astfel de lucru?

De obicei, locuiește în folderul rădăcină. Desigur, tot ceea ce este descris mai jos va funcționa numai pe serverele care rulează Apache, dar, de regulă, acestea sunt majoritatea. După conectarea la resursa dvs. prin FTP (), deschideți folderul rădăcină (de obicei fie PUBLIC_HTML, fie HTDOCS) și verificați dacă există fișierul .htaccess în el.

De acum înainte, faci totul pe riscul și riscul tău. Prin urmare, asigurați-vă că descărcați o copie a acestui fișier pe computer, astfel încât, dacă se întâmplă ceva, să puteți derula rapid înapoi.

Dacă .htaccess nu este vizibil, apoi încercați în programul FileZilla selectând „Server” - „Forțare fișiere ascunse” din meniul de sus. Dacă nici după aceasta nu apare la rădăcină, atunci creați un fișier text gol pe computer în orice editor convenabil pentru dvs. (folosesc NotePad Plus Plus), denumiți-l ceva și copiați-l în rădăcină.

După aceea, redenumiți acest fișier în .htaccess în FileZilla. Acum va trebui să îl deschideți pentru editare și să adăugați codul de mai jos. Dar mai întâi, permiteți-mi să vă explic puțin.

Cele mai populare modalități de a activa această opțiune pe un server web care rulează Apache sunt utilizarea modulelor mod_headers sau mod_expires. Codul de mai jos vă va ajuta să activați memoria cache statică în browser dacă serviciul online are cel puțin unul dintre aceste module Apache instalat pe serverul dvs.

Mai întâi îți voi da cod pentru modulul mod_headers. Vă rugăm să rețineți că folosește o verificare pentru a vedea dacă hosterul dvs. are acest modul. Dacă nu este găsit, codul nu va fi executat și nu va provoca erori. Cu toate acestea, vă recomand încă o dată cu tărie să copiați mai întâi fișierul .htaccess original (înainte de a adăuga codul de mai jos) pe computer pentru a evita incidentele.

#cache fișiere html și htm pentru o zi Set antet Cache-Control „max-age=43200”#cache fișiere css, javascript și text timp de o săptămână Set antet Cache-Control „max-age=604800”#cache flash și imagini timp de o lună Set antet Cache-Control „max-age=2592000”#dezactivați memoria cache Antetul dezactivat Cache-Control

Puteți șterge comentariile (liniile lor încep cu un semn hash), dar nu vor afecta în niciun fel funcționarea codului.

Va fi posibil să adăugați mai multe bloc de cod conceput pentru un modul pentru mod_expires, care verifică din nou prezența sa pe serverul dvs., ceea ce se asigură că această bucată de cod este sigură de utilizat:

ExpiresActive La #cache implicit este de 5 secunde ExpiresDefault „acces plus 5 secunde” #cache flash și imagini pentru o lună ExpiresByType imagine/pictogramă x „acces plus 2592000 secunde” ExpiresByType imagine/jpeg „acces plus 2592000 secunde” imagine/pyTpe ExpiresByTy " acces plus 2592000 secunde" ExpiresByType imagine/gif "acces plus 2592000 secunde" Aplicația ExpiresByType/x-shockwave-flash "acces plus 2592000 secunde" #cache fișiere css, javascript și text pentru o săptămână ExpiresByType text/0 plus 60ss "access text/0 60ss" ExpiresByType text/javascript „acces plus 604800 secunde” ExpiresByType aplicație/javascript „acces plus 604800 secunde” ExpiresByType application/x-javascript „acces plus 604800 secunde” #cache fișiere html și htm pentru o zi ExpiresByType 43200 secunde text „ #cache fișiere xml timp de zece minute ExpiresByType application/xhtml+xml „acces plus 600 de secunde”

Comentariile pot fi șterse din nou mai târziu.

Dacă nu funcționează, dar sperați într-un miracol, iată mai multe variante ale aceluiași cod, dar încercați-le pe rând, nu pe toate odată:

1. ExpiresActive Pe aplicația ExpiresByType/javascript „acces plus 1 an” ExpiresByType text/javascript „acces plus 1 an” ExpiresByType text/css „acces plus 1 an” ExpiresByType imagine/gif „acces plus 1 an” ExpiresByType imagine/jpeg „acces plus 1 an" ExpiresByType imagine/png "acces plus 1 an"
2. Set antet Controlul cache: privat Set antet Controlul cache: public
3. BrowserMatch „MSIE” forțat-no-varie BrowserMatch „Mozilla/4.(2)” forțat-no-vary
4. FileETag MTime Size ExpirăActiv la ExpirăDefault „acces plus 1 lună”

Acum, după ce ați introdus codul în .htaccess care vă permite să creșteți viteza prin optimizarea stocării în cache în browser din partea vizitatorului și ați salvat modificările efectuate, verificați din nou pagina de resurse în PageSpeed ​​​​Insights și asigurați-vă că problema dispare:

După cum puteți vedea, în cazul meu, „Utilizați memoria cache a browserului” nu mai este un defect critic care încetinește încărcarea, iar pictograma de lângă această notă s-a schimbat în portocaliu, dar nu în verde. Din păcate, nu pot influența serviciile terță parte de unde site-ul meu încarcă conținut static (cum ar fi Yandex, Google, Feedburner și Aptulaik).

Q.E.D. Deci, exact așa, ne-am dat seama de una dintre cele mai semnificative și semnificative probleme găsite în Page Speed.

Cum să activați compresia obiectelor statice pe server

De asemenea, o problemă foarte frecventă de care se plânge serviciul GTmetrix este lipsa compresiei fișierelor de pe server înainte de a le transfera în browserele utilizatorilor.

Este folosit în acest caz, despre care am scris deja. Dacă analizați nu direct prin PageSpeed ​​​​Insights, ci prin GTmetrix, atunci în zona PageSpeed ​​„Activați compresia” se numește „Activați compresia gzip”, iar în YSlow se numește „Comprimați componente cu gzip”.

Pentru a activa aceeași compresie Gzip pe găzduiri în care este folosit serverul Apache, va fi suficient să adăugați fragmentul corespunzătoare de cod în fișierul .htaccess (este un fișier de control al serverului de la distanță). Apache are două module pentru compresie și unul dintre ele va fi instalat de către hosterul dvs. (deși acest lucru nu este un fapt).

Cel mai comun - să începem cu el. Adăugăm din nou o verificare pentru prezența acestui modul la cod pentru a nu primi o eroare 500 pentru întregul site.

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

Puțin mai puțin popular, codul pentru activarea compresiei Gzip pentru tipurile de fișiere necesare va arăta astfel:

mod_gzip_on Da mod_gzip_dechunk Da fișierul mod_gzip_item_include \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include mime ^text\.* mod_gzip_item_include mime ^application/x-javascript_meme.* mod_gzip_clude_m.* rspheader ^ Codificarea conținutului:.*gzip.*

De fapt, încercați să verificați pagina în PageSpeed ​​​​Insights după instalarea codului. Dacă problema dispare, atunci consideră-te norocos. Din cauza prezenței Apache cu nginx, toate acestea nu m-au ajutat (hosterul a spus că nginx este responsabil pentru statică, în această situație este necesar să-l configurez - nu știu cum a făcut-o).

Multă baftă! Ne vedem curând pe paginile site-ului blogului

S-ar putea să fiți interesat

Măsurarea și creșterea vitezei site-ului în GTmetrix, precum și configurarea încărcării bibliotecii jQuery din Google CDN
Comprimarea Gzip pentru a accelera încărcarea site-ului - cum să o activați pentru Js, Html și Css folosind fișierul .htaccess
Cum să maximizați viteza de încărcare a site-ului și să optimizați încărcarea serverului
Accelerarea site-ului - ce face, cum să o măsori și cum să accelerezi singur site-ul
Crearea de sprite-uri CSS în generatorul online Sprites Me pentru a reduce numărul de solicitări către server
Optimizare și compresie CSS în Viteza paginii - cum să dezactivați fișierele externe de foi de stil și să le îmbinați într-unul singur pentru a accelera încărcarea
Cum să obțineți un site web rapid - optimizarea (comprimarea) imaginilor și scripturilor, precum și reducerea numărului de solicitări Http