Optimitzar WordPress pot semblar una tasca descoratjadora. La col·locació de connectors ho trenca tot. Es pot convertir en un embolic molt ràpidament. Alguns connectors de qualitat d'imatge fan que les imatges siguin lletges, petites i inutilitzables. Acabeu perdent la qualitat del lloc web pel rendiment. No us preocupeu, us ensenyarem pas a pas sobre com optimitzar wordpress i on cal anar amb compte.
Requisits
- Autooptimitzar. Obteniu el connector aquí
- Memòria cau de LiteSpeed instal·lada al servidor (opcional)
- PerfMatters. Obtén el connector aquí
- ShortPixel (Podeu utilitzar Litespeed per substituir aquest connector)
Us recomano que utilitzeu aquests connectors per optimitzar el vostre lloc de WordPress. Poden ser extremadament útils i optimitzar les pàgines del vostre lloc web a un cost econòmic.
ADVERTÈNCIA: això pot trencar el vostre lloc de WordPress. Creeu un sandbox per provar aquesta configuració abans d'aplicar-vos a un lloc web en execució.
Optimitzar automàticament
Autooptimize és el millor complement per generar CSS crítics, és a dir, eliminarà la majoria de les parts inútils dels codis CSS. També optimitza els codis JS i els minimitza.
Opcions de JavaScript
Algunes opcions poden trencar el vostre lloc web. He posat amb colors els paràmetres que probablement voldreu aplicar al vostre lloc web. És menys probable que les verdes trenquin el vostre lloc web i les vermelles. Si sabeu que el vostre lloc web no funciona, mireu el fitxer .js que està malmès i intenteu afegir-lo per "excloure de l'optimització automàtica". Això solucionarà la majoria dels problemes.
| També agregueu JS en línia? | |
|---|---|
| Voleu agregar fitxers JS? | Voleu agregar tots els fitxers JS enllaçats per carregar-los sense bloqueig de renderització? Si aquesta opció està desactivada, els fitxers JS individuals romandran al seu lloc però es reduiran. |
| També agregueu JS en línia? | Deixeu que l'optimització automàtica també extregui JS de l'HTML. Advertiment: això pot fer que la mida de la memòria cau d'Autoptimize creixi ràpidament, de manera que només activeu això si sabeu què feu. |
| Força JavaScript ? | Carregueu JavaScript aviat, això pot solucionar alguns errors JS, però fa que el bloqueig de renderització JS. |
| Excloeu scripts de Optimització automàtica: | Una llista d'escriptures separats per comes que voleu excloure de l'optimització, per exemple "whatever.js, another.js" (sense les cometes) per excloure aquests scripts de la possibilitat d'agregar-los per Autoptimize. Important: els fitxers no minificats exclosos encara són minimitzats per Autoptimize tret que aquesta opció de "misc" estigui desactivada. |
| Voleu afegir un embolcall de prova? | Si els vostres scripts es trenquen a causa d'un error JS, és possible que vulgueu provar-ho. |
Opcions de CSS
Opcions de CSS
| CSS en línia i diferit? | |
|---|---|
| Voleu agregar fitxers CSS? | Voleu agregar tots els fitxers CSS enllaçats? Si aquesta opció està desactivada, els fitxers CSS individuals romandran al seu lloc però es reduiran. |
| També agregueu CSS en línia? | Marqueu aquesta opció per optimitzar automàticament per agregar CSS a l'HTML. |
| Voleu generar dades: URI per a imatges? | Activeu aquesta opció per incloure petites imatges de fons al propi CSS en lloc de descàrregues independents. |
| CSS en línia i diferit? | Introduïu "a sobre del CSS de plec" mentre carregueu el CSS principal optimitzat automàticament només després de carregar la pàgina. Consulteu les PMF per a més informació. Això es pot automatitzar completament per a diferents tipus de pàgines de CriticalCSS fitxa. |
| Voleu incloure tots els CSS? | Incloure tots els CSS és una manera senzilla d'evitar que CSS bloquegi la renderització, però generalment no es recomana perquè la mida de l'HTML augmenta significativament. A més, pot empènyer les metaetiquetes fins a una posició on, per exemple, Facebook i Whatsapp ja no les trobin, trencant les miniatures en compartir-les. |
|---|
No es recomana "incloure tots els css" perquè augmenta els temps de càrrega. Tot i que es podria carregar "asíncronament", es carrega a la pàgina i pot retardar el temps per pintar primer.
Optimització HTML
| Voleu optimitzar el codi HTML? | |
|---|---|
| Voleu conservar els comentaris HTML? | Activeu aquesta opció si voleu que els comentaris HTML es mantinguin a la pàgina. |
No suggereixo que no guardeu comentaris html, ja que solen no tenir cap funcionalitat.
Optimització d’imatges
Feu que el vostre lloc sigui molt més ràpid simplement marcant un parell de caselles de selecció per optimitzar i carregar mandrosament les vostres imatges, inclòs el suport de WebP.
| Optimitzeu les imatges | Optimitzeu les imatges sobre la marxa i publiqueu-les des del CDN global de Shortpixel. Obteniu més amor a Google i milloreu la velocitat de càrrega del vostre lloc web optimitzant instantàniament les vostres imatges disponibles públicament (també en el format d’imatge WebP “next-gen”) ShortPixel i, a continuació, emmagatzema a la memòria cau i es publica ràpidament des del CDN global de Shortpixel. Inscriviu-vos ara per rebre una bonificació de 1.000 + 50% més crèdits d'optimització d'imatges independentment del trànsit utilitzat. Es poden comprar més optimitzacions d'imatges a partir de l'$4.99.Preguntes? Feu una ullada al Preguntes freqüents sobre ShortPixel! Només funciona per a llocs o imatges disponibles públicament. L'ús d'aquesta funció està subjecte a la de Shortpixel Condicions d'ús i Política de privacitat. |
|---|---|
| Imatges de càrrega mandrosa? | La càrrega mandrosa d’imatges retardarà la càrrega d’imatges no visibles per permetre al navegador carregar de manera òptima tots els recursos de la pàgina “sobre el plec”. |
Això us hauria de configurar el lloc web. Fàcil i no hi ha molts problemes. Aquest connector també és gratuït.
Com he dit, assegureu-vos de provar a fons. Això pot trencar algunes funcionalitats.
Optimitzacions addicionals
| Google Fonts | Deixa com està Elimineu Google Fonts Combina i enllaça al cap (les fonts es carreguen ràpidament, però bloquegen la representació), inclou pantalla: intercanvi.Combina i precarrega al cap (les fonts es carreguen tard, però no es bloquegen), inclou pantalla: intercanvi.Combineu i carregueu tipus de lletra de manera asíncrona amb webfont.js |
|---|---|
| Elimina els emojis | Elimina el CSS en línia dels 'emojis bàsics' de WordPress, el JavaScript en línia i un fitxer JavaScript que no s'optimitza d'una altra manera. |
| Elimineu les cadenes de consulta dels recursos estàtics | Eliminació de cadenes de consulta (o més concretament de ver paràmetre) no millorarà el temps de càrrega, però pot millorar les puntuacions de rendiment. |
Ara, arriba la part complicada. Aquesta part només s'hauria de fer si esteu segur del que esteu fent.
Aneu a tools.pingdom.com i proveu el vostre lloc web.
Veureu una cosa així. Ara, això us indicarà quins enllaços, si n'hi ha cap, haureu de tornar a connectar o dns prefetch. Aquest és un bon exemple, perquè el nostre lloc web només es torna a connectar a google fonts. Això significa que s’utilitzarà menys temps per fer cerques de DNS a altres llocs web. En aquest cas, no és gaire rellevant, però en aquest exemple podria posar:
fonts.gstatic.com, fonts.googleapis.comAssegureu-vos també d’escoltar les estadístiques de velocitat de Google, ja que us indicarà si cal precarregar una sol·licitud. Si us suggereixen que precarregueu qualsevol fitxer .js o .css, poseu-lo a "Precarrega sol·licituds específiques" i escriviu-lo. En el meu cas, posaré el tipus de lletra tal com suggereixen que es carregui primer per millorar el temps fins a la primera representació.
Un dels avantatges afegits d’utilitzar l’optimització automàtica és que us dóna l’oportunitat de generar fitxers de memòria cau. Això pot crear molts fitxers, així que assegureu-vos que sigui útil per al vostre lloc web. A més, cada vegada que suprimiu la memòria cau, caldrà més carregar el vostre lloc web. Si teniu moltes visites al vostre lloc web, això pot provocar un bloqueig i utilitzar quantitats anormals de CPU.
Perfmatters
Aquest complement costa. Però val la pena.
Opcions
Seleccioneu quines opcions de rendiment voleu activar.
| Desactiva els emojis | Activa |
|---|---|
| Desactiva incrustacions | Activa |
| Elimineu les cadenes de consulta | Activa |
| Desactiveu XML-RPC | Activa |
| Elimina jQuery Migrate | Activa |
| Amaga la versió de WP | Activa |
| Elimina l'enllaç wlwmanifest | Activa |
| Elimina l'enllaç RSD | Activa |
| Elimina Shortlink | Activa |
| Desactiva els canals RSS | Activa |
| Elimineu els enllaços del canal RSS | Activa |
| Desactiveu els autopingbacks | Activa |
| Desactiveu l'API REST | Activa |
| Elimineu els enllaços de l'API REST | Activa |
| Desactiva Dashicons | Activa |
| Desactiveu Google Maps | Activa |
| Desactiveu Google Fonts | Activa |
| Desactiva el mesurador de força de contrasenya | Activa |
| Desactiva els comentaris | Activa |
| Elimina els URL de comentaris | Activa |
| Lazy LoadingBETA | Activa |
| Utilitzeu Natiu | Activa |
| Desactiva els batecs del cor | Per defecte Desactiva a tot arreu Permet només quan editeu publicacions / pàgines |
| Freqüència de batecs del cor | 15 segons (per defecte) 30 segons 45 segons 60 segons |
| Limitar les revisions de publicacions | Defecte Desactiva les revisions de publicacions 123451015202530 |
| Interval de desat automàtic | 1 minut (per defecte) 2 minuts3 minuts4 minuts5 minuts |
| Canvia l'URL d'inici de sessió | Podria ser útil per motius de seguretat. |
Això dependrà molt del vostre lloc web. Si teniu google maps o no necessiteu fonts de google, feu el que és millor per al vostre lloc web. Feu una prova completa i assegureu-vos que no afecta cap funcionalitat.
A la pestanya Extres s'activa el "gestor de scripts".
Aquesta part és molt útil, ja que a google sovint reps una alerta que diu "elimina els fitxers CSS que no s'utilitzen" o "elimina els fitxers js que no s'utilitzen"
En aquest exemple, veureu alguns fitxers gairebé totalment inutilitzats. Diuen que té un possible estalvi de 10,3 sobre 10,6 KB, això vol dir que probablement és segur eliminar-lo. Proveu a fons quan ho feu. Perfmatters ens ajuda aquí perquè podeu desactivar-los directament.
Aneu a http://yourwpdomain.com/yourwpdirectory/fileyouwanttoedit? perfmatters
o simplement afegir ? perfmatters a la pàgina que voleu optimitzar.
Aquí veureu els scripts que s'estan carregant.
Alguns tindran la informació següent:
Allà el podeu associar amb els suggeriments de google de .css no utilitzats. Desactiveu tots els css no utilitzats que considereu que no afectaran el vostre lloc web. Feu-ho també amb els fitxers .js. Però, com he dit abans, gairebé heu de comprovar la configuració per configuració i pàgina per pàgina per veure quina funciona i quina no. Aquest connector eliminarà tots els fitxers .js i .css no utilitzats que augmentaran dràsticament el vostre rendiment.
Shortpixel: optimització d’imatges
Shortpixel és un dels millors optimitzadors d’imatges del mercat. Aquesta és la meva configuració:
En el meu cas personal, m’importa molt la qualitat de la imatge. En conseqüència, decideixo canviar la mida de les meves imatges a 1025 × 1024. La majoria de la configuració que es presenta aquí serà molt útil per al vostre lloc web.
A la configuració de pàgina avançada, us suggereixo que activeu aquestes opcions:
| Conversió CMYK a RGB | Ajusteu els colors de les imatges per a la pantalla de l'ordinador i la pantalla mòbil. Les imatges per al web només necessiten format RGB i convertir-les de CMYK a RGB les fan més petites. |
|---|---|
| Imatges de WebP: | Entregueu les versions WebP de les imatges a la portada: Crea també Versions de WebP de les imatges, de franc. Utilitzant el Global (processa tot el buffer de sortida abans d'enviar l'HTML al navegador) |
| Optimitzeu les imatges de Retina | Optimitzeu també les imatges Retina (@ 2x) si existeixen. Si teniu un connector Retina que genera imatges específiques de Retina (@ 2x), ShortPixel també les pot optimitzar, juntament amb les imatges i miniatures habituals de la Biblioteca multimèdia. Més informació |
| Optimitzeu altres polzes | També optimitzeu els polzes no llistats si es troben. Alguns connectors creen miniatures que no estan registrades a les metadades, sinó que només les creen junt amb les altres miniatures. Deixeu que ShortPixel també els optimitzi. |
| Optimitzeu PDF | Optimitzeu automàticament els documents PDF. |
Heu de tenir molt de compte si voleu activar "Converteix imatges PNG a JPEG", ja que de vegades pot manipular les imatges que vulgueu amb un fons transparent.
També heu d'activar aquests:
| Optimitzeu els mitjans de comunicació en penjar-los | Optimitzeu automàticament els elements de la biblioteca multimèdia després de penjar-los (recomanat). Per defecte, ShortPixel optimitzarà automàticament totes les imatges i els fitxers PDF acabats de penjar. Si desmarqueu aquesta opció, haureu d'executar Bulk ShortPixel o anar a la Biblioteca multimèdia (a la vista de llista) i fer clic al botó dret "Optimitza ara". |
|---|---|
| Procés al front-end | Optimitzeu automàticament les imatges afegides pels usuaris a la portada. Marqueu-ho si teniu usuaris que afegeixen imatges o documents PDF de formularis personalitzats a la portada. Això podria augmentar la càrrega al vostre servidor si teniu molts usuaris connectats simultàniament. |
Memòria cau de LiteSpeed
Aquest connector només s’ha d’utilitzar si teniu un servidor Litespeed. Redueix dràsticament els temps de resposta.
Aneu a Memòria cau i activeu tots els paràmetres de "Configuració de control de memòria cau". Activeu igualment els paràmetres de control de memòria cau. Per obtenir més informació, aneu a Lloc web Litespeed.