Comparteix a facebook
Comparteix a linkedin
Comparteix a twitter
Comparteix a pinterest
Comparteix a google

Continguts

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

  1. Autooptimitzar. Obteniu el connector aquí
  2. Memòria cau de LiteSpeed instal·lada al servidor (opcional)
  3. PerfMatters. Obtén el connector aquí
  4. 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 imatgesOptimitzeu 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 FontsDeixa 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 emojisElimina 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àticsEliminació 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.

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

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

Assegureu-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 emojisActiva
Desactiva incrustacionsActiva
Elimineu les cadenes de consultaActiva
Desactiveu XML-RPCActiva
Elimina jQuery MigrateActiva
Amaga la versió de WPActiva
Elimina l'enllaç wlwmanifestActiva
Elimina l'enllaç RSDActiva
Elimina ShortlinkActiva
Desactiva els canals RSSActiva
Elimineu els enllaços del canal RSSActiva
Desactiveu els autopingbacksActiva
Desactiveu l'API RESTActiva
Elimineu els enllaços de l'API RESTActiva
Desactiva DashiconsActiva
Desactiveu Google MapsActiva
Desactiveu Google FontsActiva
Desactiva el mesurador de força de contrasenyaActiva
Desactiva els comentarisActiva
Elimina els URL de comentarisActiva
Lazy LoadingBETAActiva
Utilitzeu NatiuActiva
Desactiva els batecs del corPer defecte Desactiva a tot arreu Permet només quan editeu publicacions / pàgines
Freqüència de batecs del cor15 segons (per defecte) 30 segons 45 segons 60 segons
Limitar les revisions de publicacionsDefecte Desactiva les revisions de publicacions 123451015202530
Interval de desat automàtic1 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"

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

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.

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

optimització de la imatge de píxels curts

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 sintaxi d’etiquetes
 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.