Aquí hi ha una història que us encantarà si voleu agilitzar el vostre lloc de WordPress.
L’altre dia vaig construir una web brillant. Vaig sortir tot i vaig afegir WooCommerce, Google Tag Manager, OneSignal, assistència tècnica, Yoast, ràdio en directe (sí, ho vaig fer), Cookie Notice, xarxes socials i un munt d’altres plugins..
Igual que tu, em vaig dedicar a impressionar els meus visitants, o així vaig pensar. Però llavors les coses es van fer insuportablement lentes. Després de molta angoixa, em vaig disparar GTMetrix per solucionar el problema.
Per la meva consternació, vaig veure això:
Vaig quedar impressionat? Infern a la NAW! Volia anotar una A perfecta i reduir el temps de càrrega de la pàgina a menys de dos segons.
Per tant, he premut el botó de re-prova, però suposa què? No deixa de ser el mateix resultat. Estava horroritzat, enfadat fins i tot. Però no renuncio fàcilment perquè aquest tipus de coses és inacceptable.
Sabeu què vaig fer després? Vaig provar el lloc web a Pingdom perquè GTMetrix pot aspirar-lo. Però, a continuació, es mostren els resultats desagradables, una vegada més:
Estava exasperat. La proverbial espina de la meva carn va ser les errants peticions HTTP veient com podia arreglar moltes altres qüestions ràpidament.
Per empitjorar, estava utilitzant un tema de WordPress de comerç electrònic que va carregar un mil milions elements per crear la pàgina principal. En la meva defensa, semblava increïble. Alguns usuaris van coincidir que el disseny també era puntual, així que sí, no em va reprendre pel sol truc ��
Però el gran disseny visual i les velocitats lentes no van de la mà. Necessitava una solució i ràpid.
Contents
Com puc reduir les sol·licituds HTTP al meu lloc de WordPress?
Cada vegada que visiteu un lloc web de WordPress, moltes dades es mouen entre el navegador i els servidors del lloc web. És a dir, WordPress fa peticions HTTP a diversos servidors per crear el que veuen els usuaris quan carreguen el vostre lloc.
Si el vostre lloc de WordPress requereix molts elements per carregar, tindreu més peticions HTTP i viceversa. Més sol·licituds HTTP suposen un lloc web lent, una mala experiència d’usuari (UX), unes puntuacions de SEO incorrectes i un percentatge de conversions baix.
Els llocs web de WordPress solen ser dinàmics, per la qual cosa es requereixen moltes parts diferents per presentar el vostre lloc web en un navegador. La bona notícia és que podeu reduir les peticions HTTP i accelerar el vostre lloc de manera significativa.
I a la publicació d’avui, s’aprèn exactament com!
Els informes de GTMetrix i Pingdom solen mostrar-vos on es troba el problema. Com a tal, proveu el vostre lloc mitjançant les dues eines per esbrinar les àrees que heu de millorar. Amb els vostres informes a punt, us detallem com reduir les sol·licituds HTTP / S i accelerar el vostre lloc de WordPress.
Pas 1: Declutter
Nois, si teniu moltes coses al vostre lloc web de WordPress, tindreu moltes peticions HTTP. No és una idea molt bona. El primer pas per reduir les sol·licituds HTTP és la disminució.
Per tant, vull dir desfer-se de tots els complements que no necessiteu. Els complements de WordPress tenen molts fitxers, ja siguin PHP, CSS o JavaScript (JS). Cada fitxer que s’encengui cada connector crearà una sol·licitud HTTP.
Si teniu un munt de connectors, segurament tindreu més sol·licituds HTTP. Quants menys plugins, menys sol·licituds. És senzill.
Què fer?
Realitzeu una auditoria dels vostres complements. Quins complements heu de tenir per executar el vostre lloc web? Hi ha plugins que no necessiteu? Teniu connectors que es col·loquin en servidors de tercers? Podeu prescindir d’aquests plugins?
Per reduir les sol·licituds HTTP, desinstal·leu tots els complements que no necessiteu. Si necessiteu un complement ocasionalment, instal·leu-lo només quan ho necessiteu. Després, desinstal·leu el connector.
El mateix passa amb els temes i continguts de WordPress que no feu servir. Netegeu totes les coses. Elimineu tot el que no necessiteu; és bo per a la seguretat i la velocitat del vostre lloc web.
Podeu anar a la milla addicional i carregar plugins de manera selectiva. Per exemple, si només necessiteu carregar el formulari de contacte 7 a la pàgina de contacte, podeu deixar que es carreguin altres complements a aquesta pàgina específica..
Seria fantàstic, no hi esteu d’acord? I per pensar només cal que Complement WordPress Net Asset CleanUp.
El complement és fàcil d’utilitzar i força eficient. O com ho diu el desenvolupador:
“Asset CleanUp” escaneja la vostra pàgina i detecta tots els recursos que es carreguen. Tot el que heu de fer quan editeu una pàgina / publicació només heu de seleccionar el CSS / JS que no cal carregar, d’aquesta manera es redueix l’obstrucció.
Netegeu la instal·lació ja home; desfer-se de la brossa: inclou el correu brossa de comentaris. Oh, sí, elimineu els enllaços trencats i optimitzeu la vostra base de dades. Són àrees importants a considerar en la mesura que es pot augmentar la velocitat del lloc, però crec.
Tornem a reduir les sol·licituds HTTP.
Pas 2: optimitza les imatges
Un lloc web sense imatges és, bé, boig. Diuen que una imatge parla mil paraules i que és fantàstic. Però totes les imatges representen una sol·licitud HTTP. Per afegir sal a les lesions, les imatges se situen entre els elements que triguen molt a carregar-se.
Tot i així, no podem ignorar el fet que la majoria de temes de WordPress (llocs de lectura) es basen en imatges i moltes imatges per això. Així, a la vista d’això, com podeu reduir les sol·licituds HTTP optimitzant les vostres imatges?
Per començar, desfer-se de totes les imatges que no utilitzeu. Sigui despietat; desfer-se de tot això, no en necessiteu. Després d’això, comprimiu i optimitzeu les imatges per eliminar dades de fitxers innecessaris.
Tot i que hi ha diversos plugins per triar, ens agrada molt la WP Compress. Tot i que es tracta d’un servei premium, la potent optimització automàtica d’imatges, compressió sense pèrdues, processament en núvol per reduir la càrrega del vostre servidor, suport d’imatges WebP, redimensionament automàtic i molt més val la pena la inversió (consulta la nostra revisió per obtenir més informació). A més, es pot indicar amb 100 imatges de forma gratuïta, i almenys podeu provar-ho.
L’optimització d’imatges no redueix les sol·licituds HTTP per si mateix, però redueix la mida dels fitxers d’imatges, cosa que es tradueix en una velocitat de pàgina millor a la línia.
Alternativament per reduir les sol·licituds HTTP, aprofiteu la potència de Sprites d’imatges CSS. Per als no iniciats, un sprite és una col·lecció d’imatges posades en un sol fitxer d’imatges.
A continuació, utilitzant trucs CSS, podeu triar quina part de la imatge mostrar. Però, com això redueix les peticions HTTP? Aquí teniu una analogia.
Diguem que necessitava cinc imatges a la pàgina principal. Per carregar el vostre lloc, la vostra instal·lació de WordPress farà cinc viatges al servidor per obtenir les imatges. Ara, si poseu les cinc imatges en un sol fitxer d’imatges (sprite), la vostra instal·lació de WordPress us farà només un viatge.
Veus cap a on vaig amb això? Com menys viatges, menys sol·licituds HTTP. El millor és que no heu suat per crear i implementar sprites d’imatges CSS. Podeu utilitzar una eina com CSS Sprite Generator. La implementació de sprites d’imatges CSS és fàcil, sempre que coneguin el camí que envolta CSS.
Consell tip: Podeu oblidar-vos de tots els sprites d’imatges CSS si el vostre lloc web utilitza HTTP / 2 que admet la càrrega asíncrona d’imatges i scripts. GTMetrix no té en compte HTTP / 2 quan tingui en compte el rendiment, així que no us preocupeu si sembla que les vostres imatges creen una tona de sol·licituds HTTP..
Però dic: Si els sprites d’imatges CSS poden reduir les sol·licituds HTTP de manera significativa al vostre lloc i sabeu com implementar-ho, aneu a buscar-lo i pegueu aquests segons més del temps de càrrega de la vostra pàgina. Si teniu o no HTTP / 2.
Al cap i a la fi, un sol fitxer d’imatge requereix una sola sol·licitud HTTP. Deu imatges separades necessiten 10 sol·licituds HTTP i així successivament. Sé que obtens la deriva.
Pas 3: Combina i minimitza HTML, CSS i JavaScript
La causa principal de moltes peticions HTTP al meu lloc web de WordPress van ser els fitxers CSS i JavaScript externs. Sí, he estat disputant 43 scripts JS i 22 fitxers CSS. Es tracta d’una excel·lent 66 sol·licituds HTTP.
De les prop de 130 sol·licituds HTTP, les peticions CSS externes i JavaScript representaven al voltant del 51% del problema! Això només és ridícul. Gràcies, GTMetrix, punxa el meu puny.
Si combino i minimo els fitxers 44 JS i 22 CSS, puc reduir les sol·licituds HTTP de manera significativa, la mida del lloc web i el temps que es necessita per carregar-se. Però, què és això de “combinar” i “minvar” els negocis?
Segons Raelene Morey de Words by Birds (sóc un gran fan ��), la minificació és el procés de “… eliminar tots els caràcters innecessaris, com ara comentaris, formatació, espai blanc i línies noves de fitxers HTML, CSS i JavaScript que no són necessaris per a codi a executar. “
Minifying redueix la mida del fitxer eliminant tots els altres caràcters per deixar només el codi. Però si teniu més de 64 scripts externs, la minificació no farà molt per minimitzar les sol·licituds HTTP. Per això, heu de combinar els fitxers CSS i JavaScript.
De nou, Raelene diu:
Mentrestant, combinar fitxers és com sembla. Per exemple, si la vostra pàgina web carrega 5 fitxers CSS externs i 5 fitxers JavaScript externs, combinant el vostre CSS i JavaScript en un sol fitxer separat cadascun suposaria només 2 sol·licituds en lloc de 10.
Ho aconsegueixes? Segur que ho espero. Si es combinen fitxers es redueixen les sol·licituds HTTP. Per contra, la reducció redueix la mida del fitxer. Combina els dos, i mata dos ocells amb la mateixa pedra.
Hi ha plugins? Sí, per suposat!
Hi ha un munt de complements de WordPress per combinar i minificar els vostres fitxers. Un bon exemple és el connector WP Rocket. És bàsicament un dels millors plugins en memòria cau que us ofereix funcions per combinar i minificar fitxers en pocs clics.
Un altre popular (i gratuït) l’opció és Autoptimitza connectar.
Per cert, mentre hi esteu, reduïu el nombre de fitxers CSS i scripts JS externs? Per exemple, i no esmentem noms aquí, realment necessiteu una plataforma de comentaris de tercers? Necessiteu un complement de ràdio en directe?
No importa el que dic, eliminar tots els scripts i fitxers externs que no necessiteu.
Pas 4: ajusteu fitxers CSS i JavaScript de bloqueig de rendibilitat
En alguns casos, combinar fitxers pot no ser una opció, especialment per a fitxers i scripts de tercers que canvien freqüentment. En aquests casos, podeu diferir la càrrega d’aquests actius. HTTP / 2 admet la càrrega asíncrona de fitxers, cosa que significa que tots els fitxers es carreguen simultàniament.
Si no teniu cap càrrega asíncrona per algun motiu (potser no feu servir HTTP / 2 o els scripts no són asíncrons), aquests fitxers poden retardar el vostre lloc web significativament..
Tingueu en compte que les vostres pàgines web es carreguen de dalt a baix. Si teniu CSS i JS que bloqueja el renderització a la part superior de la pàgina, el navegador deixarà de carregar-se fins que no s’hagin carregat completament els fitxers. Per tant, els usuaris veuran una pàgina en blanc fins que es carreguen els scripts, que triguen temps.
Com? Desplaceu tots els scripts de bloqueig de renders de la part superior a la part inferior de la pàgina web. Però vés amb compte aquí; no haureu de desplaçar tots els scripts al final. Ho dic perquè la vostra pàgina pot necessitar CSS i JS per oferir una experiència atractiva.
Si ajorneu alguns fitxers CSS o JavaScript, els usuaris podrien veure una versió distorsionada de la pàgina web fins que la pàgina no es carregui del tot, exactament al contrari del que voleu aconseguir.
Per tant, només ajornar els scripts que no són necessaris per carregar la pàgina. D’aquesta manera, els vostres usuaris no esperaran les edats que es carreguen. Per què? Perquè necessitareu menys sol·licituds HTTP per enviar el vostre missatge.
No redueix les sol·licituds HTTP per si mateixes (perquè es carregaran eventualment tots els scripts i fitxers), però redueix el nombre de peticions HTTP necessàries per mostrar la vostra pàgina..
S’assembla molt a la càrrega mandrosa d’imatges; la imatge només es carrega quan és a la vista, no quan la resta (i les parts més importants) de la pàgina es carrega.
Per cert, arreglar CSS i JS amb bloqueig de renders pot revelar fitxers i scripts que no necessiteu per construir una pàgina web..
Per exemple, si algun script JS de compartició social extern triga molt a carregar-se, podeu diferir-lo. A més a més, podeu eliminar-lo i crear compartir informació social al vostre tema.
Eliminareu les sol·licituds HTTP i accelereu el lloc mentre conserveu la mateixa funcionalitat. Entenc que les funcions de codificació del vostre tema són un ordre alt per a la majoria dels principiants, així que consulteu un usuari o desenvolupador avançat del WP.
Com a alternativa, podeu utilitzar el complement WP Rocket per arreglar scripts de bloqueig de renders, però aneu amb compte. Llegiu la documentació perquè si trasteu les coses, podeu trencar el vostre lloc web fàcilment.
Hi ha opcions gratuïtes? És clar! Estem treballant amb WordPress, recordeu? Podeu utilitzar el botó Async JavaScript, entre altres plugins.
Pas 5: utilitzeu la memòria cau i el CDN
Sabíeu que la memòria cau i els CDN poden reduir les vostres sol·licituds HTTP? Al principi, no sembla un fet, però quan considereu el que passa entre escenaris, podeu utilitzar la memòria cau i el CDN al vostre avantatge..
La memòria cau consisteix a emmagatzemar fitxers estàtics en un navegador per tal que els usuaris no descarreguin els fitxers en visites posteriors. Digueu que teniu un complement de memòria cau i que l’usuari descarregui el vostre contingut en memòria cau a la seva primera visita.
En les visites posteriors, el vostre lloc no farà cap sol·licitud al servidor. En canvi, servirà els recursos en memòria cau del navegador, reduint les sol·licituds HTTP i augmentant la velocitat del vostre lloc.
Un CDN (o Content Deliveria Network) és una xarxa de servidors ubicats a tot el món. Un CDN també utilitza caché, però per a velocitats encara més ràpides, el proveïdor de CDN us serveix a la memòria cau contingut d’un servidor més proper al visitant.
Les distàncies més curtes signifiquen l’enviament de contingut més ràpid, i la memòria cau significa que el vostre lloc web no ha de tornar a descarregar el mateix contingut del servidor central de nou. Té sentit per a vosaltres?
I el millor de tot, hi ha diverses opcions de CDN gratuïtes (o, almenys, proves gratuïtes perquè pugueu veure literalment la diferència que comporta). A WPExplorer utilitzem i recomanem molt CLoudflare, però trieu el CDN que creieu que funciona millor per a vosaltres.
Bonus: Assegureu-vos que HTTP / 2 és compatible
Potser estigueu fent tot per reduir les sol·licituds HTTP, però el vostre host web podria ser la causa dels vostres problemes. No us sorprengui; preguntant i pensant, qui – en aquest temps i època – utilitza qualsevol cosa menys HTTP / 2?
Probablement ni sabreu què HTTP / 2 és tot. Bé, per començar, HTTP / 2 admet la càrrega asíncrona d’arxius, entre altres coses. Té altres avantatges sobre HTTP 1.0, però això és una lliçó per a un altre dia.
Si utilitzeu HTTP 1.0 o inferior, notareu un nombre considerable de peticions HTTP.
No tinguis pressa de jutjar; He vist proveïdors d’allotjament web que encara utilitzen HTTP 1.0 i versions anteriors de PHP. Sí, fins i tot amb els aparents avantatges d’HTTP / 2 i PHP 7. Ni tan sols estic bufant; alguns dels seus clients arriben a mi quan alguns dels seus plugins no funcionen i és irritant!
Però, realment, per què? El fet que alguns proveïdors d’allotjament web no es molestin en el fet que PHP 5.6 estigui obsoleta i tingui vulnerabilitats de seguretat és una altra cosa. I si no admeten HTTP / 2, aquest és un desglossador d’ofertes per al vostre.
Poseu-vos en contacte amb el vostre host o utilitzeu-lo L’eina de KeyCDN per comprovar si el vostre servidor admet HTTP / 2. El millor host web admet HTTP / 2 i la versió més recent de PHP. Si el vostre host finalitza en els dos casos, demaneu-los que actualitzin o trien un amfitrió web millor.
Paraules finals
Reduir les sol·licituds HTTP al vostre lloc de WordPress es tracta d’eliminar les coses que no necessiteu. Si teniu moltes coses al vostre lloc web de WordPress, tindreu moltes sol·licituds HTTP i velocitats de pàgina relativament lentes.
Per reduir les sol·licituds HTTP, declutar el vostre lloc, optimitzar les imatges, arreglar scripts de bloqueig de renders, utilitzar la memòria cau i assegurar-vos que el vostre host suporti HTTP / 2. A més d’això, intenteu crear llocs web senzills i nets que no necessitin carregar cap tona d’actius.
Si teniu preguntes, comuniqueu-nos-ho a la secció de comentaris que hi ha a continuació. Salutacions per a llocs web més ràpids i un gran futur!
