Com reduir HTML, CSS i JavaScript mitjançant el complement automàtic

Google i altres motors de cerca donen valor al vostre lloc web si es carrega tan ràpidament. Com que cap dels espectadors té molts pacients que esperen molt per visualitzar el vostre contingut i només teniu 1,5 segons per cridar l’atenció. Si el vostre lloc triga a obrir-se, normalment perdreu els espectadors. Per tant, això és bàsic per accelerar el vostre lloc web. Hi ha diverses maneres d’optimitzar el vostre lloc. Però una de les parts més importants és fer-ho Minimitzar HTML, CSS i JavaScript.


Si alguna vegada heu fet una prova de velocitat Google PageSpeed o GTmetrix, probablement veieu aquesta opció.

Tots els llocs web amb una gran quantitat de fitxers contenen HTML, CSS i JavaScript. I la majoria dels fitxers inclouen molt d’espai, comentaris, delimitadors de blocs, etc. Per tant, es requereix un temps addicional que es carrega correctament.

Això també depèn de la qualitat del tema. Per exemple, un tema de qualitat premium sempre millor que un tema gratuït. Els desenvolupadors altament qualificats estan ben codificats i desenvolupats per temes premium. Però tots els temes no són els mateixos i tenen diferents tipus de funcions. Així doncs Minimitzant els fitxers HTML, CSS i JavaScript, podeu augmentar la vostra velocitat de lloc estratègicament i fer feliços als vostres visitants.

Què és minificar i per què és beneficiós?

Minimització és un llenguatge de programació que elimina tots els caràcters innecessaris del codi font sense canviar la seva funcionalitat. Aquests caràcters innecessaris solen contenir “caràcters d’espai blanc, caràcters de línia nous, comentaris, i delimitadors de blocs ”. 

Abans de reduir i després de reduir

S’utilitzen per afegir llegibilitat al codi, però no és necessari que s’executi. D’aquesta manera es redueix la quantitat de codi que s’ha de transferir a la xarxa i s’estalvia l’ample de banda. Així també reducció HTML, CSS i JavaScript, podeu eliminar fàcilment aquests caràcters innecessaris del vostre lloc de manera significativa augmentar velocitat del vostre lloc. 

Com reduir HTML, CSS i JavaScript

Hi ha dues maneres de minimitzar HTML, CSS & JavaScript. O bé, podeu fer-ho editant el vostre codi de tema o podeu fer servir un complement de WordPress anomenat Autoptimitza. En aquest article, us mostrarem els dos processos sobre Com reduir HTML, CSS i JavaScript.

Per conèixer el fitxer HTML, CSS o JavaScript exacte que causa el problema, heu de comprovar-lo en qualsevol eina de prova de velocitat del lloc com ara Eina de Google PageSpeed o GTmetrix. Com que no tots els fitxers contenen aquest tipus de caràcters innecessaris.

Després de comprovar el resultat del vostre lloc, el tindreu. Aquí teniu una imatge a sota del meu lloc que considera solucions CSS i JavaScript.

Minimitzant Css, JavaScript

Defineix la qualitat del tema. Per tant, res de preocupar-se si veieu que ambdues es diuen que Minify i és millor obtenir un tema Premium.

Hi ha algunes eines en línia que permeten minimitzar el codi HTML, CSS i codi JavaScript. 

Abans de fer cap canvi, feu una còpia de seguretat d’aquest fitxer.

# 1 Codi mínim:

Eina de codi de reducció

Codi mínim és una eina de reducció de tot en un. Pot minimitzar els vostres codis JavaScript, CSS i HTML. Tot el que necessiteu per copiar el codi HTML o CSS o codi JavaScript i enganxar-lo aquí. A continuació, feu clic a Minimitzar Opció Aquesta eina Minimitza el teu codi automàticament. Després d’això, copieu el codi Minified en aquest fitxer.

També podeu minimitzar el codi CSS i el codi JavaScript com el codi HTML amb aquesta eina.

# 2 Voluntat:

Voluntat

La voluntat voluntària és una altra gran eina Minimitzar HTML codis. Aquesta eina funciona de la mateixa manera que ho fa el codi minify. Minimitza HTML i tots els CSS o JS inclosos en el vostre marcador. Per utilitzar aquesta eina, només heu de copiar el codi aquí i fer clic a Minim.

Minimitzar l’ús del complement automàtic

Autoptimitza

Si no coneixeu aquesta codificació, és millor utilitzar un connector i recomanar-lo per a principiants. Així que aquí arriba Plugin automàtic per WordPress usuaris.

L’autoptimize concatena tots els scripts i codis d’estil i els fa més petits que es carreguen tan ràpidament. Minimitza tots els HTML, CSS & El codi Javascript és el que fa que la vostra pàgina sigui realment lleugera. Amb Minification, aquest complement afegeix cadires de capçalera i mou estils al cap de pàgina i pot moure els scripts al peu de pàgina.

Autoptimitza la configuració de la recomanació

Podeu fer totes les coses fàcilment des de la configuració del complement. Després d’activar aquest complement, aneu a Configuració> Autoptimitza.  Feu clic al botó “Mostra la configuració avançada”.

A la HTML a la secció, comproveu “Optimitza el codi HTML” i “Segueix els comentaris HTML” per obtenir un rendiment més ràpid.

Autoptimitza les opcions HTML

A la JavaScript a la secció, activeu “Optimitzar el codi JavaScript”. També podeu habilitar “Força JavaScript a” per carregar JS abans d’hora i reduir la possibilitat d’errors JS. En cas que el vostre JS trenqui scripts, podreu activar “Afegeix embalatge de prova”.
Opcions automàtiques de JavaScript

Dins CSS secció, activeu “Optimitzar el codi CSS”, “També agregem CSS en línia”. També podeu habilitar “CSS en línia i diferir” si heu reduït CSS. Proveu aquesta eina per minimitzar el vostre CSS i enganxeu-lo al quadre.

Autoptimitza les opcions CSS

Introdueix el teu CDN URL al camp “URL de base CDN”. Per exemple, “//cdn.example.com/”.

I, per últim, activeu “Guardar script / css agregat com a fitxer estàtic”. Però assegureu-vos que el vostre servidor web pugui gestionar adequadament la compressió i la caducitat.

Opcions automàtiques de CDN

Després d’haver minvat el codi, no oblideu tornar a comprovar la velocitat del vostre lloc. Compara després amb els resultats anteriors. Si el vostre lloc té algun problema o no es mostra correctament, podeu intentar esborrar-lo Cache

Conclusió

Minimització HTML, CSS i JS es beneficia pel vostre lloc. Elimina els caràcters innecessaris del codi i els fa més petits que siguin més navegables. D’aquesta manera podeu millorar la velocitat de càrrega del vostre lloc.

Si aquest tutorial ajuda a minimitzar HTML, CSS i JavaScript, compartiu aquest article a Facebook, Twitter, Google+.

Articles relacionats,

  • Com aprofitar la memòria cau del navegador a WordPress
  • Com optimitzar la base de dades de WordPress mitjançant WP-Sweep
  • 7 Millor Optimitzador d’Imatges per a WordPress 2017
  • Com habilitar fàcilment la compressió Gzip a WordPress per a una càrrega més ràpida
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map