L’optimització de WordPress pot semblar una tasca descoratjadora. La col·locació de plugins trenca tot. Es pot convertir en un desastre molt ràpidament. Alguns complements 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 heu d’anar amb compte.
Requisits
- Autoptimitzar. Obteniu el connector aquí
- Instal·lada la memòria cau LiteSpeed al servidor (opcional)
- PerfMatters. Obteniu plugin aquí
- ShortPixel (Podeu utilitzar Litespeed per substituir aquest complement)
Us suggereixo fermament que utilitzeu aquests complements per optimitzar el vostre lloc de WordPress. Poden ser extremadament útils i optimitzar les pàgines del vostre lloc web amb un cost econòmic.
ADVERTIMENT: això podria trencar el vostre lloc WordPress. Creeu una caixa de sorra per provar aquesta configuració abans d’aplicar-vos a un lloc web que s’executa.
Autoptimitza
L’autoptimització és el millor plugin 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 redueix.
Opcions JavaScript
Algunes opcions poden trencar el vostre lloc web. He col·locat amb colors quina configuració és probable que vulgueu aplicar al vostre lloc web. Els verds tenen menys probabilitats de trencar el vostre lloc web i els de vermell són més propensos. Si sabeu que el vostre lloc web es trenca, busqueu els .js trencats i proveu d’afegir-lo a “excloure l’autoptimize”. Això solucionarà la majoria dels problemes.
| També agregeu JS en línia? | |
|---|---|
| Agregar fitxers JS? | Agregar tots els fitxers JS enllaçats per tenir-los carregats sense bloquejar? Si aquesta opció està desactivada, els fitxers JS individuals es mantindran al seu lloc, però es minimitzaran. |
| També agregeu JS en línia? | Deixeu que Autoptimize també extregui JS de l'HTML. Avís: això pot fer que la mida de la memòria cau de Autoptimize creixi ràpidament, així que activeu-ho només si sabeu el que esteu fent. |
| Força JavaScript ? | Carregueu JavaScript ben aviat, això pot solucionar alguns errors de JS, però fa que el render JS es bloquegi. |
| Exclusió dels scripts de Autoptimize: | Una llista de scripts separats per comes que vulgueu excloure de la seva optimització, per exemple "whatever.js, another.js" (sense cometes) per excloure que aquests guions s'agreguin per Autoptimize. Important: els fitxers no minificats exclosos continuen minant per Autoptimize, tret que aquesta opció de "misc" estigui desactivada. |
| Vols afegir embolcall de prova? | Si els vostres scripts es trenquen a causa d'un error JS, potser voldreu provar-ho. |
Opcions CSS
Opcions CSS
| CSS en línia i diferència? | |
|---|---|
| Agregar fitxers CSS? | Agregar tots els fitxers CSS enllaçats? Si aquesta opció està desactivada, els fitxers CSS individuals es mantindran al seu lloc, però es minimitzaran. |
| També agregeu CSS en línia? | Comproveu aquesta opció per a Autoptimize per agregar també CSS a l’HTML. |
| Generar dades: URI per a imatges? | Habiliteu aquesta opció per incloure petites imatges de fons en el propi CSS en lloc de descàrregues separades. |
| CSS en línia i diferència? | Inline "per sobre del CSS plegable" mentre carregueu el CSS autoptimitzat principal només després de la càrrega de la pàgina. Consulteu les preguntes freqüents per a més informació Podeu completar la seva automatització per a diferents tipus de pàgines a la web CriticalCSS fitxa |
| Inline all CSS? | Incloure tot el CSS és una manera senzilla d’impedir que el CSS no es bloqueixi, però generalment no es recomana perquè la mida de l’HTML augmenta significativament. A més, pot marcar les metaetiquetes cap a una posició en què, per exemple, Facebook i Whatsapp no els trobareu més, trencant miniatures en compartir-les. |
|---|
El "inline all css" no es recomana perquè augmenta els temps de càrrega. Si bé es pot carregar “async”, es carrega a la pàgina i pot retardar el temps per pintar-lo.
Optimització HTML
| Optimitzeu el codi HTML? | |
|---|---|
| Voleu mantenir els comentaris HTML? | Habiliteu-ho si voleu que els comentaris HTML quedin a la pàgina. |
No us suggereixo que no mantingueu comentaris en format html, perquè acostumen a no tenir cap funcionalitat.
Optimització d’imatges
Voleu que el vostre lloc sigui molt més ràpid si només marqueu un parell de caselles de selecció per optimitzar i carregar les vostres imatges, suport tècnic inclòs.
| Optimitzar les imatges | Optimitzeu les imatges sobre la marxa i serveix-les des del CDN global de Shortpixel. Obteniu més amor de Google i milloreu la velocitat de càrrega del vostre lloc web tenint les imatges disponibles al públic optimitzades sobre la marxa (també en el format d’imatge WebP “de nou gen”). ShortPixel i després es va posar en memòria cau i va servir ràpidament des del CDN global de Shortpixel. Inscriu-te ara rebre una bonificació de 1.000 000 + 50% més crèdits d’optimització d’imatges independentment del trànsit utilitzat. Es poden adquirir més optimitzacions d’imatges a partir del $4.99.Preguntes? Feu una ullada a la Preguntes freqüents de ShortPixel! Només funciona per a llocs / imatges que estiguin 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 perezosa? | La càrrega per la imatge no retardarà la càrrega d’imatges no visibles per tal que el navegador carregui òptimament tots els recursos per a la pàgina “per sobre del plec”. |
Això us permetrà configurar el lloc web. Fàcil i no gaire problemes. Aquest complement també és gratuït.
Com he dit, assegureu-vos de provar a fons. Això podria trencar algunes funcionalitats.
Optimitzacions addicionals
| Fonts de Google | Deixa com és Elimineu els tipus de lletra de Google Inclou i enllaça amb el cap (els tipus de lletra es carreguen ràpidament, però es bloquegen per renderitzar-se), inclou mostrar: intercanviar.Inclou i precarrega la capçalera (els tipus de lletra es carreguen tard, però no es bloqueja), inclou mostrar: intercanviar.Combina i carrega fonts de manera asíncrona amb webfont.js |
|---|---|
| Elimineu els emojis | Elimina CSS en línia "emojis bàsics", JavaScript inline i un fitxer JavaScript autoptimitzat d'una altra manera. |
| Elimineu les cadenes de consulta dels recursos estàtics | Eliminació de les cadenes de consulta (o més concretament la ver paràmetre) no millorarà el temps de càrrega, però pot millorar els resultats de rendiment. |
Ara, arriba la part complicada. Aquesta part només s'ha de fer si esteu segurs del que esteu fent.
Vés a tools.pingdom.com i prova el teu lloc web.
Veureu alguna cosa així. Ara, això us dirà quins enllaços haureu de tornar a connectar o desconnectar prèviament per dns. Aquest és un bon exemple, perquè el nostre lloc web només es torna a connectar als tipus de lletra de Google. 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.comTambé assegureu-vos d’escoltar les dades d’aprenentatge de velocitat de Google ja que us indicaran si cal carregar alguna sol·licitud prèviament. Si us suggereixen que pre-voleu qualsevol .js o .css, introduïu-la a "Precarregueu les peticions específiques" i escriviu-la. En el meu cas, posaré el tipus de lletra ja que suggereixen que es carregui primer per millorar el temps per presentar-lo primer.
Un dels avantatges afegits d’utilitzar l’optimització automàtica és que us dóna l’oportunitat de generar fitxers caché. Això pot crear molts fitxers, així que assegureu-vos que és útil per al vostre lloc web. Afegit, cada vegada que suprimiu la memòria cau, trigareu més a carregar el vostre lloc web. Si teniu moltes visites al vostre lloc web, això pot fer que es produeixi un bloqueig i que utilitzeu 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 les incrustacions | Activa |
| Elimina les cadenes de consulta | Activa |
| Desactiva XML-RPC | Activa |
| Elimina jQuery Migrate | Activa |
| Amagueu la versió WP | Activa |
| Elimina l'enllaç de wlwmanifest | Activa |
| Elimina l'enllaç RSD | Activa |
| Elimina la connexió | Activa |
| Desactiva els feeds RSS | Activa |
| Elimineu els enllaços del canal RSS | Activa |
| Desactiva els auto pingbacks | Activa |
| Desactiva l'API REST | Activa |
| Elimineu els enllaços de l'API REST | Activa |
| Desactiva Dashicons | Activa |
| Desactiva Google Maps | Activa |
| Desactiva Google Fonts | Activa |
| Desactiva el comptador de força de contrasenya | Activa |
| Desactiva els comentaris | Activa |
| Elimina els URL dels comentaris | Activa |
| Carregat peregrósBETA | Activa |
| Utilitzeu natiu | Activa |
| Desactiva el batec del cor | DefaultDisable Allwhere Solament permetre en editar publicacions / pàgines |
| Freqüència del batec cardíac | 15 segons (per defecte) 30 segons 45 segons60 segons |
| Límites revisions de post | DefaultDisable Public Revisions123451015202530 |
| Interval Autosave | 1 minut (per defecte) 2 minuts3 minuts4 minuts5 minuts |
| Canvia l’URL d’inici de sessió | Pot ser útil per a propòsits de seguretat. |
Això dependrà molt del vostre lloc web. Si teniu google maps o no necessiteu tipus de lletra de google, feu el que és millor per al vostre lloc web. Igualment proveu a fons i assegureu-vos que no afecta cap funcionalitat.
A la pestanya Extres activeu el "gestor de scripts".
Aquesta part és molt útil, perquè a google sovint rebeu una alerta que diu "eliminar fitxers css que no s'utilitzen" o "eliminar fitxers js que no s'utilitzen"
En aquest exemple, veieu alguns fitxers que gairebé no s’utilitzen. Diuen que té un possible estalvi de 10,3 sobre 10,6 KB, això vol dir que és probable que sigui suprimit. Proveu a fons quan ho feu. Els perfeccionadors ens ajuden aquí perquè els podeu desactivar directament.
Vés a http://yourwpdomain.com/yourwpdirectory/fileyouwanttoedit? perfmatters
o simplement afegir ? perfmatters a la pàgina que desitgeu optimitzar.
Aquí veureu els scripts que es carreguen.
Alguns tindran la informació següent:
Allà es pot combinar amb els suggeriments de Google de .css no utilitzats. Desactiveu tots els css que no utilitzeu que considereu que no afectaran el vostre lloc web. Feu-ho també amb els fitxers .js. Però, com he dit abans, pràcticament heu de revisar la configuració i la pàgina per pàgina per veure quin funciona i quina no. Aquest complement eliminarà tots els fitxers .js i .css que no s'utilitzin i augmentaran de forma espectacular el vostre rendiment.
Shortpixel - Optimització de la imatge
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 redimensionar les meves imatges a 1025 × 1024. La majoria de la configuració que es presenta aquí serà de gran utilitat per al vostre lloc web.
A la configuració avançada de la pàgina us recomano 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 a la web només necessiten un format RGB i convertir-les de CMYK a RGB les fa més petites. |
|---|---|
| Imatges del lloc web: | Entreu les versions webP de les imatges al front-end: També crea Versions webP de les imatges, de franc. Utilitzant el Global (processa tot el buffer de sortida abans d’enviar el HTML al navegador) |
| Optimitza les imatges de retina | També optimitzeu les imatges Retina (@ 2x) si existeixen. Si teniu un complement Retina que generi imatges específiques de la retina (@ 2x), ShortPixel també pot optimitzar-les, juntament amb les imatges i les miniatures habituals de la Biblioteca. Més informació |
| Optimitza altres polzes | Si també es troben, optimitza els polzes no llistats. Alguns complements creen miniatures que no estan registrades a les metadades, sinó que només es creen al costat de les altres miniatures. Permet que ShortPixel també els optimitzi. |
| Optimitzar els PDF | Optimitzar automàticament documents PDF. |
Heu de tenir molta cura si voleu habilitar “Converteix les imatges PNG en JPEG”, de vegades pot manipular les imatges que vulgueu amb un fons transparent.
També hauríeu d’habilitar-los:
| Optimitzeu els suports a la càrrega | Optimitzeu automàticament els articles de la Biblioteca de la biblioteca després de pujar-los (recomanat). Per defecte, ShortPixel optimitzarà automàticament tots els fitxers PDF i les imatges recentment penjades. Si desmarqueu aquesta opció, haureu d’executar Bulk ShortPixel o anar a la Biblioteca de mitjans de comunicació (a la vista de llista) i feu clic al botó (a la dreta) "Optimitzar ara". |
|---|---|
| Procés end-end | Optimitzeu automàticament les imatges afegides pels usuaris del front end. Comproveu-ho si teniu usuaris que afegeixen imatges o documents PDF a partir de formularis personalitzats al front-end. Això podria augmentar la càrrega al vostre servidor si teniu molts usuaris connectats simultàniament. |
Memòria cau LiteSpeed
Aquest complement només s’ha d’utilitzar si teniu un servidor Litespeed. Redueix dramàticament els temps de resposta.
Vés a la memòria cau i activa tots els paràmetres de "configuració de control de caché". Igualment activeu la configuració de control de la memòria cau. Per obtenir més informació, aneu a la secció Lloc web Litespeed.