CSS avanzado y JavaScript en Magento 2

¿Por qué es la optimización CSS y JavaScript? CSS y JavaScript son muy importantes para los sitios de Magento. JavaScript (JS) y CSS son la columna vertebral del diseño de su sitio, sin embargo, JavaScript asegura que la interfaz del sitio esté funcionando. JavaScript puede mostrar y ocultar ciertos elementos del sitio. JS también puede usar AJAX, un conjunto de técnicas de desarrollo web para hablar con un servidor remoto. Esencialmente, JavaScript consta de algunos de los lenguajes de programación más importantes que mantienen su sitio CSS, por otro lado, es un conjunto de directivas que se utiliza para diseñar el aspecto de su sitio.
Cuando se carga su sitio Magento, una de las cosas para cargar con el sitio web es JavaScript y CSS. ¿Qué es el tiempo de renderizado? El tiempo de inicio se define mejor como el momento en que algo aparece en su sitio web. Mira, hay un momento entre los sitios web en los que ingresa a la URL y ves el sitio en sí. Durante este tiempo, verá una pantalla blanca vacía. Si ve una pantalla blanca vacía durante un período de tiempo muy largo, significa que JavaScript y CSS tardan mucho en cargarse. Si ve una pantalla blanca vacía por un corto tiempo, significa que JavaScript y CSS necesitan un poco de tiempo para cargar.
Cuando mida el tiempo de inicio, una regla básica es mantener la pantalla blanca a la vista durante aproximadamente 500 milisegundos, que debe seguir al calcular un tiempo ideal hasta el primer byte (TTFB). Esto significa que el sitio necesita tiempo adecuado para cargar. La forma en que CSS y JavaScript influyen en el tiempo de representación CSS y JavaScript deben cargarse para que el sitio web se cargue por completo. Si hay demasiado CSS para cargar, entonces el sitio web será lento. Esto significa que el tiempo de inicio será más largo y. Por lo tanto, la pantalla vacía aparecerá hasta que el navegador web haya terminado de leer y ejecutar todos los archivos JavaScript. Esencialmente, si CSS y JavaScript tardan demasiado en cargarse, esto significa que su cliente verá una pantalla vacía y blanca de lo que debería. Esto hará que crean que el sitio web está roto o que se impacientarán y simplemente se irán. Por lo general, el 40% de los visitantes del sitio pasarán menos de tres segundos en un sitio lento antes de dejarlo. Esto significa que si su sitio es lento, puede perder a sus clientes potenciales frente a los competidores en aproximadamente tres segundos. Esto es algo que ningún propietario de un negocio quiere.
Para remediar estos dos problemas y garantizar un tiempo de inicio perfecto, debe optimizar el CSS y optimizar JavaScript. En esta publicación, detallaremos cómo puede hacer esto. La optimización CSS CSS es la columna vertebral del diseño de su sitio. Describe las fuentes, los colores y la apariencia general de su página web. Tener un buen aspecto CSS es fundamental para tener un sitio web exitoso. Sin embargo, es fácil perderse en CSS y permitir que el código se salga de control. En este caso, la carga de CSS puede llevar mucho tiempo y se requerirá una estrategia de optimización. La optimización de CSS aumentará la velocidad de nuestro sitio y ayudará a su sitio de Magento a convertir a los visitantes en clientes. Echemos un vistazo a lo que nos ayuda a optimizar CSS y cómo hacerlo. ¿Qué es CSS por encima del pliegue? El CSS sobre la página se refiere al CSS desde la parte superior de la página que se carga primero. Tomemos como ejemplo la siguiente página:
La idea detrás del CSS por encima de la página es que esta parte de la página web se cargará primero, y luego el resto del CSS continuará cargando hasta que llegue a la parte inferior de la página. Esto acelerará el tiempo de inicio porque el navegador cargará su página superior en lugar de todos
una vez que el tiempo. Al hacer esto, los propietarios de los sitios web pueden engañar esencialmente a los visitantes del sitio, haciendo que crean que el sitio se cobra rápidamente cuando, en realidad, solo las partes del sitio se cargan rápidamente. Encuentre CSS por encima del pliegue e ingrese en la parte superior de la página Critic CSS CSS CRITIC es necesario para pintar el contenido por encima de la página. Puede diferir de una página a otra. Puede seleccionar manualmente las reglas CSS que son críticas, pero hay herramientas automáticas. En sitios grandes, la selección manual puede llevar semanas, por lo que estas herramientas ahorran mucho tiempo. Los extractos críticos de CSS están en línea para obtener CSS Superior:

Generador CSS Critical Jonas Ohlsson
La versión paga del generador CSS CRITIC Rath CSS
Y hay utilidades de instalación y rodadura:
Tarea de orgullo para extraer y en línea CSS en la ruta crítica por Ben Zorb
Primer CriticalCSS de Filament Group Varias herramientas de extracción CSS anteriores, puede encontrar en esta página GitHub de Addy Osmani. Usaremos el imprimador crítico de Ben Zorb. ¡Gracias Ben!
Varias herramientas de extracción de CSS sobre la página, puede encontrar GitHub de Addy Osmani en esta página. Usaremos el imprimador crítico de Ben Zorb. ¡Gracias Ben!
El complemento Critical Primer Plugin es una tarea de JavaScript. Si nunca has usado Primer (como yo), lo primero que debes saber es que Gunt automatiza las cosas. Necesita su CSS CSS bajo, limpio o embellecido, la imprimación puede hacerlo. Todo ejecutando un orden simple. Te mostraré cómo configurar tu entorno de imprimación. Para obtener más información, consulte la documentación oficial del proyecto Prim. Instalar imprimación La instalación de este software adicional es algo que debe hacer en su entorno de desarrollo local, no en un servidor de producción. Guarde la computadora en la computadora siguiendo el procedimiento simple (debe estar familiarizado con los comandos simples de Bash o Shell). Primero, instale Node.js y NPM (mi estación de trabajo es Debian Linux). APT-GET Instale NodeJS APT-GET Instale NPM APT-GET Instalar NodeJS-Legacy Apt-Get Instalar Phantomjs: Si está en un servidor sin cabeza, debe instalar XVFB para ejecutar Phantomjs, que es necesario para ejecutar Crítico gruñido: Apt- Obtenga Instalar XVFB y debe poner XVFB-Run -S -S “-Creen 0 640x480x16” antes de los pedidos de cebadores críticos. Por ejemplo, para instalar críticamente en un servidor sin cabeza, debe ejecutar:
Xvfb-run -s “-pantalla 0 640X480X16” NPM Instalar Grurtical -Save-Dev Crear un director MKDIR Mormit CD Mormatit Configuración Package.json File NPM Init
Instale el imprimador CLI como instalación global de NPM -G Gunt -Cli
Instale imprimación en la carpeta local NPM Instalar gruñido-Save-DEV Instale el complemento crítico NPM Instalar gruñido-save-save-dev
Genere CSS en la ruta crítica que Magento tiene las siguientes páginas con un aspecto similar a partir del cual debemos extraer CSS Critic:
CMS de la página principal
Página del producto
Página de categoría
La página de la canasta
Primero debemos tomar CSS en el camino crítico de estas páginas, y el segundo conquistó para eliminar las reglas de CSS redundan y minimizarlas. Descargue el código HTML de la página de inicio, la página CMS, etc. y guárdelo en la carpeta SRC/HTML: mkdir -p src/html wget -o http://magentotore.com homepage.html wget -o http:/magentotore .com/categoría Categoría.html wget -o http://magentotore.com/product producto.html wget -o http://magentotore.com/cms cm.html wget -o http://magentotore.com/checkout/ Cart Cart .html Cree la carpeta SRC/CSS y descargue el archivo CSS principal del que extraemos CSS con la ruta crítica MKDIR SRC/CSS; CD src/css wget http://magentotore.com/media/css/8b6d422759c648865bb4d035da915b42.cs s -o main.css Instale el complemento Phytrib-Contrib-cssmin para reducir más archivos CSS en un solo NPM Installs Primery CSSSSSSS Dev crea gruntfile.js en el archivo de capa con el siguiente contenido: module.exports = function (prim) {prim.itconfig ({pkg: prim.file.readjson (‘paquete.json’), cssmin: {target: {archivos : {‘distin/min.css’: [‘distin/homepage-critical.css’, ‘distin/categoría-criticical.css’, ‘distin/producción-crítica.css’, ‘distin/caricical .css’, ‘,’, ‘ distin/cms-critical.css ‘]}}, crítico: {página de inicio: {opciones: {base:’ ./ ‘, css: [‘ src/css/main.css ‘, ancho: 1200, altura: 900}, src: ‘src/html/homepage.html’, minify: true: ‘distin/homepage-critical.css’, categoría: {opciones: {base: ‘./’, css, css: [‘src/css/principal/principal .css ‘], ancho: 1200, altura: 900}, src:’ src/html/category.html ‘, minify: true, dest:’ distin/category-critical.css ‘}, producto: {Opciones: {base : ‘./’
, CSS: [‘src/css/main.css’], ancho: 1200, altura: 900}, carrito: {opciones: {base: ‘./’, css: [‘src/css/main.css’] , ancho: 1200, altura: 900}, src: ‘src/html/car.html’, minify: true, dest: ‘distin/carticical.css’, cms: {opciones: {base: ‘./’, css : [‘src/css/main.css’], ancho: 1200, altura: 900}, src: ‘src/html/cm.html’, minify: true: ‘distin/cms-crítica. CSS’}}}} ); Grurt.LoadnpmTasks (‘Grunt-Contrib-Cssmin’); Prim.LoadnpmTasks (‘Grunt-Critical’); }; Ejecute las tareas primarias para extraer crítico CSS y reducirlos en un solo distin/min.
El archivo Dist/min.css debería verse así:
CSS con forma crítica en línea debemos poner el contenido de distin/min.css en la parte superior de nuestra página. En Magento simplemente agregamos min.css a Head.phtml:
Mueva el archivo CSS principal a la parte inferior aquí es cómo mover todos los CSS a la parte inferior de la página web de Magento:
Creamos el bloque AllCSS de Page/HTML_head y ponemos todos los CSS:
skin_css Css/style.css …

Eliminamos todos los archivos CSS del bloque de cabeza predeterminado

Ponemos getcssjshtml ()?> Dentro de la plantilla Allcs.phtml

Pusimos getchildhtml (‘jsfooter’)?> Dentro de las plantillas inmediatamente después de la etiqueta

Una vez que haya configurado todo, es importante probar el sitio en diferentes navegadores para asegurarse de que se vea bien. Encuentre y elimine los CSS no utilizados si tiene CSS no utilizado, realmente puede ralentizar sus aplicaciones y solo puede hacer su página web, lo que también causa más carga. Por lo tanto, es importante mantener el código en exceso como mínimo. Puede encontrar y eliminar CSS no utilizados siguiendo estas instrucciones simples: descargue Google Chrome, si aún no lo ha hecho.
Después de haber hecho esto, vaya a Chrome: // Flags/. Allí, verá una lista de algunas funciones nuevas pero experimentales en Chrome.
Busque experimentos de herramientas de desarrollador y haga clic en. Puede buscar el nombre en el cuadro de búsqueda en la parte superior de la página.
Abra sus herramientas (haga clic con el botón derecho → Inspeccionar)
Acceso: más herramientas → Cobertura. Irá a la esquina inferior de la página, donde verá tres configuraciones: a.
Consola
Qué hay de nuevo
Cubierta, la elección que elegirás
Asegúrese de estar en fuentes. Vaya a la barra lateral y haga clic en un archivo desde la carpeta CSS
Los CSS que están en las filas 1-5 son CSS que no se usan en el sitio. Mientras que CSS en la línea 6 es CSS que se usa. Optimización de JavaScript Debido a que JavaScript es literalmente el código que hace las páginas web interactivas, es importante mantener a JavaScript optimizado en su sitio web de Magento. Aquí hay cuatro pasos importantes a seguir cuando hace optimizaciones de JavaScript: pospongo a JavaScript posponiendo la carga de JavaScript, lo que hacemos es mover el código en la parte inferior de la página, para que sea lo último que se carga. Hacemos esto porque el aplazamiento de JavaScript permitirá al servidor dar prioridad a la carga CSS primero, lo que le da al usuario al menos una página web para ver mientras carga las Escrituras. Al hacer esto, hacemos que el visitante del sitio crea que la página está cargada. En realidad, solo se cargan CSS y HTML. JavaScript necesita tiempo para cargar. Para ayudarlo a lograr esto, puede usar este complemento JavaScript gratuito para Magento 2. Identificar y eliminar la eliminación de JavaScript no utilizada de JavaScript es absolutamente esencial, porque si el código se usa o no, su backynd carga el código como parte de su sitio. El El código que no usa se puede eliminar, y la energía utilizada para cargar JavaScript no utilizada puede ingresar al sitio más rápido. Si tiene JavaScript no utilizado en su sitio web, puede averiguar qué código necesita escapar haciendo lo siguiente: Descargue Google Chrome si aún no lo ha hecho.

Después de haber hecho esto, vaya a Chrome: // Flags/.Puede buscar el nombre en el cuadro de búsqueda en la parte superior de la página.
Abra sus herramientas (haga clic con el botón derecho → Inspeccionar)
Acceso: más herramientas → Cobertura.Irá a la esquina inferior de la página, donde verá tres configuraciones: a. Consola
Qué hay de nuevo
Cubierta, la elección que elegirás
No tengas miedo de tomar la caja inferior y moverla para agrandarla.Si hace clic alrededor del área, notará una flecha pequeña.

Ahora haga clic en el círculo gris.Verá que se vuelve rojo (foto arriba).
Allí encontrarás los siguientes datos
Con estos datos, podrá descubrir cuánto JavaScript permanece sin usar para el sitio.
JavaScript en rojo muestra lo que no se usa, mientras que Green muestra lo que se usa. No use la función M2 JavaScript M2 detrás del grupo es que si toma muchos archivos JavaScript más pequeños y los combina, entonces habrá menos solicitudes HTTP y la página web se cargará más rápido. Esto parece una gran idea en el papel, pero cuando se probó la función Magento, no ha sido una idea tan buena. Para empezar, cuando se probó la idea, algunos desarrolladores descubrieron un error. Descubrieron que los paquetes de archivos JavaScript incluidos pueden iniciar el procesamiento a 8 MB, pero el procesamiento se completa a 13 MB. Se ha descubierto que este es un archivo muy grande, que llevará mucho tiempo cargar. Otra razón por la cual el grupo JavaScript no es una buena idea es que en realidad pueda tardar más en cobrar su sitio. Cuando combina JavaScript, reduzca la cantidad de solicitudes HTTP, pero estas solicitudes son mucho más altas. Por lo tanto, las respuestas tardan mucho más en cargarse. Cuanto más altas son las solicitudes HTTP, más tiempo tomará más el servidor para procesarlas. Esto significa que el tiempo que intentó guardar agrupando estos archivos se ha utilizado para que el servidor pueda cumplir con sus solicitudes y que pueda tardar más para que el sitio web generalmente se cargue. Por lo tanto, desarrolladores como yo han llegado a la conclusión de que no ahorras tiempo al hacerlo. Los productos principales en el paquete Si su sitio se ejecuta lentamente, hay formas de optimizar CSS y JavaScript en Magento 2 para que funcione más rápido.