Cum să opriți încărcarea fișierelor inutile și să reduceți solicitările HTTP ale site-ului web – Sfaturi de optimizare pentru WordPress
Publicat: 2020-09-08
Pe Crunchify, am publicat mai multe tutoriale de optimizare a vitezei pe care să le consultați în orice moment.
Folosim MaxCDN ca furnizor de conținut. Au trecut aproape 4 ani si pana acum merge prea bine. Genesis WordPress Framework și MaxCDN sunt cea mai bună combinație. În mod implicit, Genesis Framework vine cu o mulțime de optimizare, Google Markup Schema, structură prietenoasă cu dispozitivele mobile și multe altele.
Săptămâna trecută m-am uitat la contul meu MaxCDN și am observat brusc resurse de descărcare de top. După cum vedeți în imaginea de mai sus, top 9 out of 10 resource files au fost descărcate de peste ~ 5 millions de ori în ultima săptămână.
Am fost surprins și m-am gândit că ar trebui cu adevărat nevoie de aceste resurse? Trebuie să încărc acele fișiere separat? Cum să scăpați de acele fișiere dacă nu sunt necesare, cu excepția fișierului style.css , care este absolut necesar pentru ca site-ul să se încarce.
Să începem cum am scăpat de toate acele 9 fișiere cu trucuri simple
Nu pentru toți cititorii
Acești pași nu sunt pentru toți cititorii WordPress. Pe Crunchify, folosim Crayon Syntax Highlighter și imagini personalizate specifice temei, deci se aplică utilizatorilor limitati
Pasul 1
Să list all of those 9 files . A doua coloană arată de câte ori a fost descărcat.
|
1 2 3 4 5 6 7 8 9 |
/ wp - includes / js / wp - embed . min . js 12 , 626 , 575 2.41 GB / wp - content / plugins / crayon - syntax - highlighter / themes / neon / neon . css 11 , 406 , 345 2.61 GB / wp - content / plugins / crayon - syntax - highlighter / css / min / crayon . min . css 11 , 259 , 474 4.50 GB / wp - content / themes / crunchify / images / bg . png 9 , 268 , 221 3.45 GB / wp - content / themes / crunchify / images / bg - pattern . png 9 , 135 , 288 3.41 GB / wp - content / themes / crunchify / images / h3 . png 6 , 289 , 690 1.18 GB / wp - content / themes / crunchify / images / crunchify - logo . png 5 , 476 , 295 7.05 GB / wp - content / themes / crunchify / images / crunchify - sprite . png 5 , 334 , 562 7.45 GB / wp - content / plugins / crayon - syntax - highlighter / js / min / crayon . min . js 4 , 344 , 704 2.60 GB |
Pasul 2
Să grupăm fișierele Plugin pentru Crayon Syntax Highlighter .
Sunt 3 fisiere:
neon.css , crayon.min.css și crayon.min.js . Am scris un tutorial separat complet, cu un total de 7 pași detaliați pentru a scăpa de acele fișiere. Vă rugăm să treceți peste el și să-mi spuneți dacă vedeți vreo problemă.
Pasul 3
Acum treceți peste wp-embed-min.js . Vă rugăm să vizitați tutorialul Cum să dezactivați Scriptul de încorporare automată pentru WordPress 4.4+. Se va opri încărcarea fișierului încorporat la front-end.
Pasul-4
Să trecem peste 3 more .png :
bg-pattern.png
Încărcam această imagine în fundal antet și subsol. Am scăpat de el folosind în schimb culoarea #333 .
crunchify-sprite.png
Încărcam această imagine sprite pentru a afișa butoanele de urmărire socială în bara laterală. L-am înlocuit cu fonturi fontawesome .
h3.png
Încărcam acest lucru pentru a afișa bifa pentru postările H3 pe unele dintre locații. L-am înlocuit cu fonturi fontawesome . Mai jos este un echivalent fontawesome.
Pasul-5
Acum am rămas cu doar 2 fișiere. crunchify-logo.png și bg.png , pe care m-am gândit să le păstrez. Deci, în loc să apelez ca imagine, am adăugat echivalentul imaginii base64 pentru acele fișiere.
Inainte de:
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( images / crunchify - logo . png ) no - repeat ; } |
După:
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( data : image / png ; base64 , iVBORw0KGgoAAAANSUhEUgAAAmIAAACACAYAAAHfQjXQAABi3UlEQVR42u1dCXhVxfXPQlhcUBEEAQUheQmEPTtucV9xAcLm2r91qYraWnetkR2Sl7AoikutXbRSq9ba1qot1rpVcamKVVFBUZGEbCQkJG + 5 //O778xjMrlbFpJHmPN957vv3WXu3Llzz/zmnDPnxMVp0hQTVF6Sd3zowaONsAPrVpJomz8nuL00x3DjwsK4hM6uW1VVVdjDOcHq6upgp1WqekWu4aXBZk3cb3BnNxg1xF+oQULyPsMw4pUGM2pra0d1WqUa75/sqcHo1Jld8QWgQaz2Ec/jRv0XelmnVaiiNOdxLw0298RBzzmV09TUhIcIoAdUVlbW46F27NhhNDQ0mA8cDAYN6YHrsaXzjqYHXoTrampqkqXjgZ07dxpKA4WpJ0X3id91dXWGuFcoFDLEfvn6DicvDfbyz9K3uvSEEDVAQyAQwANsFD1DbKkhE6R9YWqok6TGeB4PTvuMtWvXJqrXogehAWh7p7TveblnYT9RIpVRJD5j3heVvZXFKc/RxeYnXVmU8qohyeVKf8qrVX7feM+NVliQ3lPwmisykgrz83tckRHZ4r/XzwcVFHIGDyAehD8fAw8u9qufndhWVFTkyo2B8uTGo3KeUD9X3v+JXA/aPieXs2tlqrF+TUZSwwqfQY0XXlsQl0hbo9rvW1J7/7jD8Nvg454abfHMLMONl87KrndptAD3GvMTlXqR4KDyHxyihy2Tz1Wvo+PredSMl/YtU89XPuPoMfQm6kF+NFRVccou2n6ABqos9tXVlZoNiPPiA/emGqH7Uo0qf8qXnhrtqhPTNnlquJnZf3EqB71I9CxlX7T3SfsS5E9HvVb8l0dI+Rx8xtxrvxafI/3vSb+/Id7OjVse2R/5JI21BYnikzTWxkXqUhDXvL50judPdImHRgPffNaYUXExRKJHicGA+D2IAgw0xH/a4xVYNjvbU8PFYqNBJNDoeYkdPNmjtGhmZshLw3XFjEAlgijoURNVeUaQY0CnVyZ7RP+XSfCT8M8yGZ+uYKm3jdCTTk2aNMUqAZ/UrcqtV/VmUb3amqMNTOp1S7Vi7ll3b16nNxjhre1i2uSiJMDMYume71mFhQleGqtyRU64K16kPG+1IlYMhDrnM6R5lpfGKivpmsbatm3bQCsNrTq/lKdge/wzLg==) no-repeat; } |
Am convertit ambele imagini în imagini base64. Avantajul pe care îl vom obține, nu trebuie să deschidem altă conexiune și să facem o cerere HTTP către server pentru imagine.
Mai puțină solicitare = timp de încărcare a paginii mai bun
Există unele avantaje de a utiliza SVG (Scalable Vector Graphic) image deoarece imaginile se scalează la orice dimensiune fără a pierde claritatea (cu excepția celor foarte mici), ceea ce arată grozav pe ecranele retină.
Aceste Data URIs nu sunt limitate la .png sau imagini, ci pentru orice resurse. Iată un instrument simplu de conversie .png în .svg pe care l-am folosit online.
rezumat
Acest tutorial face parte din secțiunea Cum să accelerați WordPress și să creșteți performanța. Veți găsi acolo toate trucurile și sfaturile de optimizare WordPress.
Făcând acești pași, am scăpat de toate cele 9 resurse nedorite din 10. Ceea ce înseamnă că pagina mea se încarcă mult mai repede, deoarece vor fi cu 9 mai puține cereri pe fiecare pagină.
Anunțați-mă dacă aveți alte sfaturi care vor îmbunătăți viteza paginii site-ului. La Crunchify, viteza este principalul criteriu și acesta este motivul pentru care folosim foarte puține pluginuri. Toate paginile se încarcă within half a second .
