Alta velocidad: realmente acelere los sitios web de WordPress [#4]

En esta pequeña serie, hablamos de las cosas que realmente aceleran los sitios web de WordPress. Google Page Speed ​​Insight no es relevante para nosotros, ya que se trata únicamente de velocidad. Queremos que nuestro sitio web entre en el área de milisegundos. Hemos sentado las bases para esto en la primera, segunda y tercera parte. El episodio de hoy trata sobre la entrega de archivos CSS y JavaScript.

CSS y JavaScript juegan un papel importante cuando se trata de velocidad

Aparte de las imágenes y los gráficos, los archivos CSS y JavaScript y su entrega correcta son un factor determinante de la velocidad de un sitio web. La cantidad de archivos que deben cargarse también influye en el tiempo de carga. Solo puedo recomendar desactivar todos los complementos que realmente no necesita. La mayoría de los complementos vienen con su propia sobrecarga de datos y, pronto, el tema debe entregar de 15 a 25 archivos CSS y JavaScript. Especialmente los temas polivalentes sufren de esta enfermedad. Un buen ejemplo sería el popular tema premium Enfold de Kriesi, ya que necesita 17 archivos JavaScript por sí mismo. Estos temas también pueden volverse bastante rápidos, pero no pueden ingresar al área de milisegundos. Un tema con pocos archivos y solo los complementos necesarios es la mejor condición previa para la verdadera velocidad.

Los sitios web de WordPress son realmente rápidos: la idea detrás del artículo de hoy

El artículo de hoy trata sobre la entrega «correcta» de datos estáticos. JavaScript se puede tratar automáticamente, mientras que se requiere trabajo manual para los archivos CSS. Eliminaremos todos los datos CSS de la carga automática y dejaremos que se carguen manualmente, de una manera que sea importante para la velocidad del sitio web. El archivo style.css se cargará en el encabezado después de que se haya liberado de la basura innecesaria. Todos los demás archivos CSS se cargarán en el pie de página. Esto hace que el sitio web se cargue rápidamente. Con este tipo de tratamiento de datos, la página de destino se cargará extremadamente rápido y las subpáginas se volverán tan rápidas como los medios integrados y los bloques de anuncios les permitan. Sin embargo, el área visible de las subpáginas se cargará en un abrir y cerrar de ojos, dando al visitante la impresión de un sitio web extremadamente rápido, aunque la subpágina, es decir, el artículo individual, puede tardar uno o dos segundos en cargarse.

¿Qué archivos se cargan dónde?

Es muy importante que averigüe qué archivos CSS se necesitan y dónde. De forma predeterminada, CSS se carga en todas las páginas. Como eso es una completa tontería, debe averiguar dónde se necesitan realmente las hojas de estilo para acelerar su sitio web. Por ejemplo, el CSS de un formulario de contacto solo se necesita en la página de contacto. CSS, que se requiere para mostrar galerías de imágenes, se necesita en una página de galería especial o en cada artículo individual con una galería. Por lo tanto, anote cuidadosamente dónde es necesario cada archivo. Porque solo los integraremos donde se necesiten.

CSS externo frente a la implementación directa de CSS en el HTML

Para mi sitio web, Democratic Post, descubrí que la implementación directa de CSS en el código fuente ralentiza más mi sitio web que cuando integro un archivo optimizado y correctamente versionado. Sin embargo, esto puede ser diferente para su sitio web, por lo que simplemente debe probar ambas variantes.

CSS y JavaScript – Parte 1: Eliminación de cadenas de consulta

WordPress vincula los recursos estáticos al final del archivo (?ver=4.5) a través de las llamadas cadenas de consulta. En general, esta es una buena idea que se supone que garantiza que estos recursos estáticos como CSS y JavaScript se puedan almacenar en caché, y no tienen que cargarse nuevamente cada vez que se accede al sitio web.

http://server.example/wp-content/themes/hemingway/style.css?ver=4.1

Sin embargo, el parámetro siempre es criticado como un problema para el almacenamiento en caché efectivo por herramientas de prueba de velocidad como Pingdom, porque el contenido estático de las URL con parámetros no siempre se almacena en la memoria caché, sino que debe obtenerse del servidor cada vez. Este problema lo evitaremos más adelante, con un correcto versionado. Pero primero, eliminaremos las cadenas de consulta de los archivos. Introduce el siguiente código en el archivo functions.php de tu tema:

Un clic abre Gist en Github

CSS y JavaScript – Parte 2: Incorpore JavaScript al pie de página de forma segura

El JavaScript que se carga en el pie de página no siempre funciona perfectamente para todos los complementos de caché. No obstante, es absolutamente necesario, por lo que te ayudaremos con un pequeño fragmento. Este fragmento de código también pertenece a functions.php del tema, o a un complemento de sitio personalizado.

Un clic abre Gist en Github

CSS y JavaScript – Parte 3: Quitar y eliminar todos los archivos CSS

Como queremos mover manualmente el CSS a los lugares correctos, para que el tiempo de carga pueda beneficiarse de eso, primero debemos liberar todos los archivos CSS de la carga automática a través de WordPress. Una vez que hayamos hecho eso, su tema ya no debería cargar ningún archivo CSS. Para eso, necesitamos hacer un poco de trampa, ya que necesitamos encontrar su ID para eliminar una hoja de estilo. Bajo ciertas circunstancias, incluso necesita buscar las ID en los archivos del complemento.

Luego, necesitamos un fragmento de código que elimine todos los archivos CSS. Sin embargo, el primer fragmento no funciona en todos los archivos, razón por la cual agregué la versión B del fragmento. Uno de los dos eliminará definitivamente el CSS. Primero, pruebe la versión A y luego, si no funciona, pruebe la versión B. Estos fragmentos también pertenecen al archivo functions.php del tema o al complemento del sitio personalizado.

Un clic abre Gist en Github

CSS y JavaScript – Parte 4: Versionado de archivos CSS correctamente

Para ello, pueden existir diferentes soluciones, algunas de las cuales pueden ser más cómodas. Sin embargo, elegí esta solución porque puedo determinar exactamente cuándo quiero que se carguen los archivos debido a la integración manual de los archivos CSS.

Para qué necesita las versiones de archivo

El control de versiones correcto de los archivos estáticos es necesario para un almacenamiento en caché óptimo de los recursos. De esta manera, podemos asegurarnos de que el archivo, por un lado, solo se cargue en la primera visita a la página, y también, que cuando se cambia un archivo, la nueva versión se carga instantáneamente ya que ahora tiene un nuevo nombre de archivo. Una vez que hayamos terminado, los archivos en el código fuente HTML se verán de la siguiente manera:

/wp-content/themes/democraticpost-1.3.0/style.1457278063.css

Un clic abre una resolución más alta.

Parte 1: El Código para las funciones.php

Un clic abre Gist en Github

Parte 2: el código para el archivo .htaccess

El archivo .htaccess que se encuentra en el índice raíz de WordPress debe ajustarse. ¡Haga una copia de seguridad del archivo antes de ajustarlo! Posteriormente, el área de WordPress se reemplaza por la siguiente.

Un clic abre Gist en Github

Parte 3: Comprimir manualmente todos los archivos CSS

Como esta tarea no se puede realizar con un complemento de almacenamiento en caché, debemos hacerlo nosotros mismos. Realice copias de seguridad de cada archivo antes de iniciar este proceso. Una vez hecho esto, abra los archivos CSS con un editor HTML, copie todo el contenido y agréguelo al campo provisto de el compresor CSS. El ajuste correcto para esto es «más alto». Después de que la herramienta haya comprimido el código CSS, lo ingresamos en el archivo style.css y lo guardamos. Para que funcione el control de versiones automático, tenemos que ajustar el pequeño fragmento de código para la salida de los archivos CSS. El siguiente ajuste pertenece al área de enlace (href=»»):

<link rel="stylesheet" href="https://www.noupe.com/wordpress/<?=auto_version("/path/to/style.css')?>" />

Por ejemplo, el camino correcto podría verse así:

/wp-content/themes/democraticpost-1.3.0/style.css

Parte 4: Integrar los archivos en los lugares correctos

Primero, Style.css se implementa en el encabezado. La forma más fácil de hacerlo es abriendo el archivo header.php de su tema y luego ingresando el enlace en el área de la cabeza. Preste atención a la ortografía correcta de la ruta de datos. Si no es 100 por ciento correcto, el navegador no encontrará el archivo, lo que provocará un error 404.

Estilo.css

Un clic abre una resolución más alta.

Todos los demás archivos CSS

Todos los demás archivos CSS se mueven del encabezado al pie de página, de modo que el área visible del sitio web se carga instantáneamente. Además de eso, los archivos solo se cargarán donde sea absolutamente necesario. Colocamos los archivos arriba <?php wp_footer();?>.

Un clic abre una resolución más alta.

El control de dónde se carga exactamente un archivo se realiza a través de las etiquetas. es soltero y es_pagina. En determinadas circunstancias, también puedes combinar ambas etiquetas, como hice yo en la zona superior. Los tres archivos superiores se cargan en publicaciones individuales en una página. La estructura general se ve así:

Un clic abre una resolución más alta.

La captura de pantalla muestra que el archivo CSS respectivo solo se implementa en la publicación con el ID 4368 y que no se carga en ningún otro lugar.

Códice de WordPress: Usar etiquetas condicionales correctamente

El tratamiento de JavaScript

Esta es la parte más fácil. Si queremos ser exactos, como lo hicimos con CSS, y solo dejar que los archivos se carguen donde sea necesario, necesitamos un pequeño complemento premium. Se llama gonzales y actualmente cuesta 19 USD. El complemento se coloca en la barra de herramientas que ve cuando inicia sesión y accede a su página. El complemento le permite registrar cada recurso en cada página, o solo en algunas. Con un poco de esfuerzo, puede determinar exactamente qué archivo JavaScript se carga y dónde.

Una captura de pantalla:

Un clic abre una resolución más alta.

Empaquetar y comprimir JavaScript usando Autoptimize

Una vez hecho esto, los archivos JavaScript se ensamblan y comprimen. El complemento gratuito «Autooptimizar» es perfecto para esta tarea. La captura de pantalla muestra la configuración requerida:

Conclusión

Aquellos que mantuvieron sus ojos en la pelota hasta este punto, ya han acelerado significativamente sus sitios web de WordPress. Sin embargo, tuvimos que aprender que un sitio web que carga muy rápido requiere mucho esfuerzo manual. Tal vez haya algunas soluciones más inteligentes y cómodas para ciertas tareas, pero siempre hay margen de mejora. En cualquier caso, el CSS ahora está almacenado en caché de manera óptima por los navegadores y, por lo tanto, solo se carga cuando se accede a la página por primera vez. Cualquier otra visita a la página será significativamente más rápida. La siguiente y última parte de nuestra serie sobre cómo acelerar realmente los sitios web de WordPress se ocupará de algunas tareas más pequeñas que aún deben realizarse. Entre otras cosas, haremos que el popular complemento Jetpack se mueva. Dependiendo de cómo y qué características de Jetpack se usen, definitivamente puede ser extremadamente rápido y no ralentizar el sitio web. No obstante, esto requiere un par de ajustes.

Acelere realmente los sitios web de WordPress: la serie

• Noupe: Sin tonterías: lo que realmente acelera los sitios web de WordPress – [#1]
• Noupe: Alta velocidad: realmente acelere los sitios web de WordPress – [#2]
• Noupe: Alta velocidad: realmente acelere los sitios web de WordPress – [#3]

Enlaces relacionados:

• Noupe: WordPress: Cómo crear un complemento de sitio personalizado
• Noupe: Los 9 mejores editores de HTML gratuitos para desarrolladores web (edición de Windows)
• Los 5 mejores editores HTML gratuitos para desarrolladores web en Mac OS X
• Compresor CSS
• Códice de WordPress: Uso correcto de etiquetas condicionales
• WordPress Premium Complemento Gonzáles
• Complemento de WordPress Autooptimizar
• Herramienta de comprobación de velocidad Herramientas Pingdom

(dpe)