Wordpress

Com configurar Autoptimize per al vostre lloc de WordPress

Autoptimize és un complement gratuït d'optimització de WordPress. A més de l'optimització d'HTML, CSS i JavaScript, Autoptimize també inclou funcions d'optimització dirigides a altres aspectes dels llocs moderns de WordPress.

En aquesta publicació, compartirem la millor configuració del complement Autoptimize per millorar el rendiment i la velocitat de la pàgina del vostre lloc de WordPress.

Per què Autoptimitzar?

Abans d'endinsar-nos en la millor configuració d'Autoptimize, repassem ràpidament tres motius pels quals Autoptimize és un gran complement d'optimització.

  1. La versió gratuïta d'Autoptimize té un conjunt complet de funcions per optimitzar el vostre lloc de WordPress.
  2. Autoptimize és estrictament un complement d'optimització i no fa cap memòria cau de pàgines HTML. Això vol dir que és compatible amb tots els amfitrions web, fins i tot amb configuracions de memòria cau de pàgines personalitzades com ara Behmaster.
  3. Autoptimize té més d'1 milió d'instal·lacions actives al repositori de WordPress i s'actualitza constantment amb noves funcions i correccions d'errors.

Autoptimitza la configuració de JS, CSS i HTML

HTML, CSS i JavaScript és el pa i la mantega d'Autoptimize. Igual que amb altres complements d'optimització, investigar l'extens conjunt de funcions i la configuració d'Autoptimize pot ser una tasca descoratjadora. Per facilitar-vos les coses, hem recopilat la millor configuració d'Autoptimize per millorar el rendiment del vostre lloc.

Opcions de JavaScript

Optimització de JavaScript a Autoptimize.
Optimització de JavaScript a Autoptimize.

Optimitzar el codi JavaScript

Recomanem activar aquesta opció. Quan "optimitza el codi JavaScript" està activat, Autoptimize reduirà els fitxers JavaScript.

Fitxers JS agregats

L'opció "fitxers JS agregats" d'Autoptimize combinarà tots els vostres fitxers JavaScript en un sol fitxer. En el passat, la combinació de fitxers JS i CSS era un pas clau en l'optimització de WordPress. A les Behmaster, fem servir servidors HTTP/2 moderns que admeten descàrregues paral·leles i multiplexació; això vol dir que la combinació de fitxers ja no és tan important com abans perquè HTTP/2 permet baixar diversos fitxers alhora. Dit això, l'agregació de fitxers CSS i JS encara comportarà un augment de velocitat per a determinats tipus de llocs de WordPress, per la qual cosa us recomanem que proveu la velocitat de la vostra pàgina amb aquesta opció activada i desactivada.

També agregar JS en línia

L'opció "també agrega JS en línia" extreu JS en línia al vostre HTML i el combina amb el fitxer JS optimitzat d'Autoptimize. Com que aquesta opció pot provocar un augment ràpid de la mida de la memòria cau d'Autoptimize, us recomanem que mantingueu aquesta opció desactivada tret que tingueu un motiu específic per activar-la.

Força JavaScript

En la majoria dels casos, no recomanem forçar els fitxers JavaScript a carregar-se a l'HTML del vostre lloc element. Forçar JS a carregar-se abans d'hora pot provocar elements que bloquegen la representació que poden alentir la velocitat de la pàgina. Si teniu fitxers JavaScript que s'han de carregar al fitxer element, recomanem excloure aquests scripts d'Autoptimize.

Exclou scripts d'Autoptimize

Aquesta opció us permet excloure directoris i fitxers JavaScript específics de l'agregació. De manera predeterminada, Autoptimize exclou els scripts següents.

  • wp-includes/js/dist/
  • wp-includes/js/tinymce/
  • js/jquery/jquery.js

Tingueu en compte que afegir un script per excloure només afecta l'agregació per defecte. Els fitxers JavaScript exclosos es reduiran encara que no estigui marcat a "Opcions diverses".

Afegeix un embolcall Try-Catch

Si activeu l'opció "afegir un embolcall de prova de captura" s'embolicarà el vostre codi JavaScript en blocs de prova de captura. Aquesta opció és útil per a problemes de depuració causats per la minificació i l'agregació de JS. Si el vostre lloc només funciona amb l'opció "Afegir un embolcall try-catch" habilitat, us recomanem que treballeu amb un desenvolupador per revisar els vostres fitxers JavaScript per identificar el que causa el problema perquè l'ús excessiu de blocs try-catch pot reduir el rendiment de JS.

Autoptimize: el connector gratuït d'optimització de WordPress que no sabíeu que necessiteu... però això farà que el vostre lloc sigui ràpid ⚡️Aquesta guia explica exactament per què el necessiteu 🚀Feu clic aquí per Tweet

Opcions CSS

Autoptimitza l'optimització CSS.
Autoptimitza l'optimització CSS.

Optimitzar el codi CSS

Recomanem activar aquesta opció. Quan "optimitza el codi CSS" està habilitat, Autoptimize reduirà els fitxers CSS.

Fitxers CSS agregats

L'opció "fitxers CSS agregats" d'Autoptimize combinarà tots els vostres fitxers CSS en un sol fitxer. Com hem esmentat anteriorment, és possible que aquesta funció no beneficiï els llocs que admeten HTTP/2. Us recomanem que proveu aquesta opció A/B al vostre lloc per determinar si hi ha algun impacte positiu en la velocitat de la pàgina.

També agregar CSS en línia

Aquesta opció mourà CSS en línia al fitxer CSS d'Autoptimize. Tot i que moure el CSS en línia a un fitxer CSS que es guarda a la memòria cau del navegador pot reduir la mida de la pàgina, us recomanem que deixeu aquesta opció desactivada en la majoria dels casos.

Generar dades: URIs per a imatges

Quan aquesta opció està activada, Autoptimize codificarà en base64 imatges de fons petites i les incrustarà a CSS. Us recomanem que proveu aquesta opció per mesurar l'impacte en la velocitat de la vostra pàgina. Tot i que la codificació d'imatges en format base64 redueix el nombre de sol·licituds HTTP, els fitxers de representacions base64 solen ser un 20-30% més grans que els seus homòlegs binaris.

CSS en línia i ajornat

L'inserció de CSS crític pot donar lloc a un augment de velocitat important per a alguns llocs. La idea aquí són estils en línia que es requereixen per als elements que estan "a sobre del plec". A la pràctica, el CSS en línia sol orientar-se a elements com ara elements estructurals, famílies i mides globals de tipus de lletra i estil de navegació.

En integrar aquests elements clau, el fitxer CSS complet més gran es pot carregar més endavant sense afectar l'aspecte de la pàgina. Tot i que és possible extreure estils crítics manualment, us recomanem que utilitzeu una eina com aquesta per generar els estils com a punt de partida.

Generar CSS crític.
Generar CSS crític.

Després de generar el CSS crític, copieu-lo i enganxeu-lo a la configuració d'Autoptimize.

En línia i ajornar CSS a Autoptimize.
En línia i ajornar CSS a Autoptimize.

El següent pas és provar l'experiència d'interfície del vostre lloc. Si observeu alguns flaixos estranys de contingut sense estil (FOUC), probablement haureu d'identificar aquests elements sense estil i afegir els estils corresponents a Autoptimize per a la integració.

Autoptimize ofereix un "engegada" que genera automàticament CSS crític per a les vostres pàgines de WordPress. Segons la nostra experiència, aquesta funció pot alentir ocasionalment el vostre lloc perquè utilitza trucades d'API externes per generar el CSS crític. Per tant, la generació inicial de CSS crítica depèn de la capacitat de resposta d'un servidor extern. En la majoria dels casos, el mètode esmentat que no requereix cap trucada d'API externa és una solució més neta.

En línia tots els CSS

Per a la majoria de llocs, no recomanem incloure tots els CSS, ja que pot augmentar la mida de la pàgina de manera espectacular. A més, la integració de tots els CSS fa impossible que el navegador web emmagatzemi CSS a la memòria cau.

Exclou CSS d'Autoptimize

De manera predeterminada, Autoptimize exclou de l'agregació els directoris i fitxers CSS següents. Si voleu evitar que Autoptimize agregui algun dels vostres fitxers CSS, podeu afegir-los a aquesta llista. De manera similar a l'exclusió de JavaScript, el comportament predeterminat d'aquesta funció no impedeix que els fitxers CSS es redueixin, sinó que només s'agreguin.

  • wp-content/cache/
  • wp-content/càrregues/
  • admin-bar.min.css
  • dashicons.min.css

Opcions HTML

L'optimització HTML d'Autoptimize pot ajudar a reduir la mida de les vostres pàgines eliminant els espais en blanc.

Optimització HTML a Autoptimize.
Optimització HTML a Autoptimize.

Optimitzar el codi HTML

Us recomanem que habiliteu la funció de codi "optimitza HTML" perquè redueix la mida de la pàgina eliminant els espais en blanc innecessaris del vostre HTML. Tot i que aquesta funció és compatible amb la majoria de llocs, eliminar els espais en blanc pot provocar errors en alguns llocs. Per tant, recomanem provar l'optimització del codi HTML a fons abans d'utilitzar-la en un entorn de producció.

Conserveu els comentaris HTML

Activeu aquesta funció si voleu conservar els comentaris HTML per a les vostres pàgines optimitzades.

Opcions de CDN

Si utilitzeu un CDN m'agrada BehmasterCDN per accelerar els actius estàtics, haureu d'afegir l'URL CDN a Autoptimize. Si utilitzeu un servei proxy amb capacitats CDN com Cloudflare, no cal que configureu res a les opcions CDN d'Autoptimize.

Configureu la configuració de CDN a Autoptimize.
Configureu la configuració de CDN a Autoptimize.

Informació de la memòria cau

La "informació de la memòria cau" d'Autoptimize mostra informació important com la ubicació i els permisos de la carpeta de la memòria cau, així com la mida total dels estils i scripts de la memòria cau. Si veieu "No" al costat de "Podem escriure?", haureu de treballar amb el vostre amfitrió per corregir els permisos de la carpeta.

Autoptimitza la informació de la memòria cau.
Autoptimitza la informació de la memòria cau.

Opcions diverses

Autoptimize té algunes configuracions d'optimització diverses. Si teniu problemes per carregar fitxers CSS i JS optimitzats al vostre lloc, és possible que hàgiu de tornar a configurar algunes de les opcions següents.

Optimitzacions diverses a Autoptimize.
Optimitzacions diverses a Autoptimize.

Desa els scripts/CSS agregats com a fitxers estàtics

Us recomanem que habiliteu aquesta opció per desar fitxers agregats com a fitxers estàtics localment. És possible que hàgiu de desactivar-ho si el vostre servidor no està configurat per gestionar la compressió i la caducitat de fitxers.

Reduïu els fitxers CSS i JS exclosos

Us recomanem que habiliteu aquesta opció per assegurar-vos que tots els fitxers CSS i JS estiguin minificats. Tanmateix, si observeu alguns problemes relacionats amb la minificació amb alguns dels vostres fitxers CSS i JS exclosos, podeu continuar i desactivar aquesta opció.

Optimitza també per a editors/administradors connectats

Us recomanem que activeu-ho per assegurar-vos que els actius estiguin optimitzats per als editors i administradors iniciats. Això és important si esteu provant la configuració d'Autoptimize com a usuari iniciat.

Necessites un allotjament de primer nivell, ràpid i segur per al teu nou lloc web de comerç electrònic? Behmaster ofereix servidors molt ràpids i assistència de classe mundial les 24 hores del dia, els 7 dies de la setmana, d'experts de WooCommerce. Consulta els nostres plans

Optimització d'imatges a Autoptimize

Autoptimize inclou una integració integrada amb ShortPixel per optimitzar les imatges. A més d'una configuració de qualitat d'imatge, la integració d'Autoptimize també us permet generar i publicar versions WEBP de les vostres imatges.

per Behmaster usuaris, no recomanem utilitzar la funció d'optimització d'imatges a Autoptimize. En canvi, us recomanem que utilitzeu directament els connectors amb totes les funcions de ShortPixel o Imagify. Amb el connector complet, tindreu un control més granular sobre la configuració d'optimització, inclosa la reescriptura d'imatges per utilitzar el etiqueta, que és necessària per al suport WEBP activat Behmaster.

Càrrega mandrosa d'imatges amb Autoptimize.
Càrrega mandrosa d'imatges amb Autoptimize.

Autoptimize també inclou la funcionalitat de càrrega mandrosa per a imatges. Us recomanem que habiliteu aquesta funció per millorar la velocitat de la pàgina per a pàgines amb una gran quantitat d'imatges. Quan la càrrega mandrosa està activada, Autoptimize us permet excloure determinades classes d'imatges i noms de fitxers de la càrrega mandrosa.

La configuració d'exclusió és útil per a imatges com ara logotips, icones socials i altres elements importants d'imatge que no s'han de carregar amb mandrosa. Si esteu buscant una solució que ofereixi més control sobre la càrrega mandrosa, consulteu la nostra guia sobre imatges i vídeos de càrrega mandrosa a WordPress.

Optimitzacions addicionals a Autoptimize

Optimitzacions addicionals a Autoptimize.
Optimitzacions addicionals a Autoptimize.

Google Fonts

Autoptimize té algunes opcions diferents per optimitzar Google Fonts. La millor opció dependrà de com utilitzi el vostre lloc Google Fonts.

  • Deixa tal com està.
  • Elimina Google Fonts.
  • Combina i enllaça al cap.
  • Combina i precàrrega al capçal.
  • Combineu i carregueu tipus de lletra de manera asíncrona amb webfont.js.

No recomanem que utilitzeu l'opció "deixar tal com està" perquè no ofereix cap benefici de velocitat.

Si Google Fonts no és un requisit crític per a la missió al vostre lloc, eliminar-los i utilitzar una pila de tipus de lletra del sistema pot tenir un gran impacte positiu en la velocitat de la vostra pàgina.

Si voleu mantenir Google Fonts al vostre lloc, us recomanem que proveu les tres últimes opcions per esbrinar quina funciona millor per al vostre lloc.

Elimina els emojis

Aquesta opció Autoptimize elimina CSS i JavaScript relacionats amb els emojis bàsics de WordPress. Us recomanem que activeu aquesta opció perquè pot ajudar a reduir la mida de la pàgina. A més, la majoria dels sistemes operatius convencionals s'envien amb piles de fonts que inclouen emojis. Per descomptat, també hi ha altres maneres de desactivar els emojis al vostre lloc de WordPress.

Elimineu les cadenes de consulta de recursos estàtics

Si voleu eliminar les cadenes de consulta (per exemple, ?ver=) dels recursos estàtics, podeu activar aquesta opció. L'eliminació de les cadenes de consulta no afectarà el temps de càrrega, però pot ajudar a millorar la puntuació del vostre lloc a GTmetrix, Google Pagespeed i altres serveis de proves de rendiment.

Preconnexió a dominis de tercers

La directiva de preconnexió permet que el vostre navegador es connecti a dominis especificats per processar cerques de DNS i negociacions d'enllaç SSL abans que s'enviï una sol·licitud HTTP completa.

Per exemple, si el vostre lloc té una imatge de logotip des de la qual es publica https://site.behmaster.cdn.com/logo.png, podeu indicar a Autoptimize que afegeixi una directiva de preconnexió per gestionar les connexions DNS i SSL inicials al element abans de fer la sol·licitud HTTP al fitxer element del vostre HTML.

Podeu utilitzar les eines de desenvolupament o l'inspector del vostre navegador per trobar dominis externs importants als quals preconnectar. A la pàgina d'exemple següent, hi ha sol·licituds externes als dominis següents.

  • https://cdn.brianli.com
  • https://www.google-analytics.com
  • https://www.googletagmanager.com

Aquests tres dominis es poden afegir a la llista de preconnexió d'Autoptimize.

Trobeu actius externs amb eines per a desenvolupadors.
Trobeu actius externs amb eines per a desenvolupadors.

Per raons de rendiment, us recomanem que no afegiu més de sis dominis a la llista de preconnexió d'Autoptimize perquè especificar directives de preconnexió per a massa dominis pot provocar un èxit de rendiment.

Carregueu prèviament les sol·licituds específiques

Les directives de precàrrega indiquen al vostre navegador web que baixi un recurs tan aviat com sigui possible. Aquesta directiva és útil per descarregar actius que es necessiten molt al principi del procés de càrrega de la pàgina. A la pràctica, la càrrega prèvia s'utilitza sovint per accelerar els temps de càrrega de tipus de lletra personalitzats carregant-los abans que es sol·licitin al CSS de la pàgina.

Us recomanem que consulteu amb un desenvolupador sobre quins actius, si n'hi ha, precarregar al vostre lloc de WordPress. Com passa amb molts altres ajustaments relacionats amb el rendiment, la càrrega prèvia de massa actius pot fer que el vostre lloc es carregui més lentament.

Sincronitza fitxers JavaScript

La funció de "fitxers JavaScript asíncrons" d'Autoptimize us permet especificar determinats fitxers JavaScript externs per carregar de manera asíncrona mitjançant el async Bandera HTML. Tot i que carregar fitxers JS de manera asíncrona pot millorar la velocitat de la pàgina, us recomanem que feu proves adequades per assegurar-vos que cap funcionalitat del lloc no es vegi afectada.

Si encara no feu servir Autoptimize, voldreu afegir aquest connector d'optimització de WordPress al vostre lloc el més aviat possible després de llegir aquesta guia 🚀Feu clic aquí per Tweet

resum

Si sabeu com ajustar la seva configuració, el connector Autoptimize és una opció sòlida per als usuaris de WordPress que busquen augmentar el rendiment del lloc.

Amb funcions bàsiques com l'optimització d'HTML i CSS i d'altres més avançades, com la integració de CDN i la possibilitat d'especificar directrius de preconnexió i precàrrega, Autoptimize té tot el que necessiteu per optimitzar el rendiment de la interfície del vostre lloc de WordPress.

Si esteu interessats a obtenir més informació sobre l'optimització de WordPress i com optimitzar el backend del vostre lloc, assegureu-vos de consultar la nostra guia completa de rendiment de WordPress.

Articles Relacionats

답글 남기기

이메일 주소는 공개되지 않습니다.

Torna al botó superior