Compartir en facebook
Compartir en linkedin
Compartir en twitter
Compartir en pinterest
Compartir en google

Continguts

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

  1. Autoptimitzar. Obteniu el connector aquí
  2. Instal·lada la memòria cau LiteSpeed al servidor (opcional)
  3. PerfMatters. Obteniu plugin aquí
  4. 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 imatgesOptimitzeu 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 GoogleDeixa 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 emojisElimina 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àticsEliminació 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.

Guia senzilla per optimitzar Wordpress en menys d’una hora. 1

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.com

També 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 emojisActiva
Desactiva les incrustacionsActiva
Elimina les cadenes de consultaActiva
Desactiva XML-RPCActiva
Elimina jQuery MigrateActiva
Amagueu la versió WPActiva
Elimina l'enllaç de wlwmanifestActiva
Elimina l'enllaç RSDActiva
Elimina la connexióActiva
Desactiva els feeds RSSActiva
Elimineu els enllaços del canal RSSActiva
Desactiva els auto pingbacksActiva
Desactiva l'API RESTActiva
Elimineu els enllaços de l'API RESTActiva
Desactiva DashiconsActiva
Desactiva Google MapsActiva
Desactiva Google FontsActiva
Desactiva el comptador de força de contrasenyaActiva
Desactiva els comentarisActiva
Elimina els URL dels comentarisActiva
Carregat peregrósBETAActiva
Utilitzeu natiuActiva
Desactiva el batec del corDefaultDisable Allwhere Solament permetre en editar publicacions / pàgines
Freqüència del batec cardíac15 segons (per defecte) 30 segons 45 segons60 segons
Límites revisions de postDefaultDisable Public Revisions123451015202530
Interval Autosave1 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"

Guia senzilla per optimitzar Wordpress en menys d’una hora. 2

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.

Guia senzilla per optimitzar Wordpress en menys d’una hora. 3

Alguns tindran la informació següent:

Guia senzilla per optimitzar Wordpress en menys d’una hora. 4

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ó:

optimització de la imatge curta

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 sintaxi de l’etiqueta
 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.