No es ningún secreto: los usuarios web de hoy en día necesitan velocidad. Con las conexiones a Internet y celulares cada vez más rápidas, los usuarios esperan que los sitios se carguen rápidamente, y el trabajo de un desarrollador es hacer todo lo posible para servir esas páginas rápidamente. Entonces, ¿cómo haces que tu sitio sea increíblemente rápido? Esto es lo que deberías hacer específicamente cuando construyas con WordPress.

Lo primero es lo primero: prueba la velocidad de tu sitio

El rendimiento se puede dividir en dos categorías principales: front-end y back-end. Considero que el back-end es cualquier cosa relacionada con el servidor y cómo se llenan los datos en una página (su código PHP en su tema es el "back-end"). El front-end consta de todos sus activos (CSS, JavaScript, imágenes, etc.) y el marcado. Todo lo que un navegador web lee e interpreta es el "front-end". La razón por la que hago esta distinción en términos de rendimiento es porque es bueno saber qué está optimizando y, lo que es más importante, dónde necesita optimizar más.

Para probar la velocidad de su sitio, recomiendo usar una combinación de WebPagetest y Google PageSpeed ​​Insights. WebPagetest nos da una buena idea del tiempo real (en segundos) que tarda un sitio en cargarse, brindándole algunas buenas métricas para saber si es el back-end o el front-end lo que hace que un sitio se cargue lentamente. PageSpeed ​​Insights es mejor para ver cómo el navegador representa su sitio y qué puede mejorar en el front-end.

Tenga en cuenta que este artículo está enfocado a sitios de WordPress totalmente personalizados. Si está ejecutando pruebas de velocidad en un sitio que usa un tema voluminoso y 19 complementos de terceros (los complementos pueden ralentizar tanto el front-end como el back-end), comience por llegar a una pizarra en blanco y active lentamente los complementos uno por uno para encontrarlos. que están ralentizando las cosas.

Rendimiento frontal

Cómo mejorar la accesibilidad de tu tema de WordPress ahora mismo

No pasa un día que no use la web, ni siquiera cuando estoy de vacaciones. Voy a tomar una conjetura salvaje que usted puede relacionar. Cada vez más, Internet juega un...

La regla de oro del rendimiento, según el director de rendimiento de Fastly, Steve Souders, es que el 80-90 % del tiempo total de carga de una página consiste en el front-end (la regla 80/20). El 10-20% del back-end es de vital importancia, pero incluso si está utilizando el host más rápido que el dinero puede comprar, su sitio aún no alcanzará todo su potencial sin optimizar el front-end para asegurarse de que los usuarios lo perciban. se está cargando rápido. La percepción es importante cuando se trata de la optimización front-end. A un usuario no le importará cuánto tiempo, en términos de segundos, tarda un sitio en cargarse. Lo único que realmente les importa es qué tan rápido pueden interactuar con él y ver contenido o realizar acciones sin demora. No quiere decir que no deba preocuparse por el tiempo de carga real (debería hacerlo), pero al seguir las técnicas a continuación, puede asegurarse de que su sitio esté en un estado utilizable lo más rápido posible, seguido rápidamente con una carga completa de la página de todos los activos.

CSS

Lo más importante que debe hacer con su CSS antes de enviarlo al navegador es simplemente comprimirlo y eliminar los selectores no utilizados. Obtener un buen flujo de trabajo de desarrollo al desarrollar temas hace que este proceso sea trivial, especialmente si está utilizando un preprocesador como Sass. Yo uso Grunt, que es un ejecutor de tareas de JavaScript que ejecuta comandos por ti mientras desarrollas. Hay un complemento para Grunt llamado grunt-contrib-sass que simplemente compila todos sus archivos Sass en uno (es decir, si está usando parciales Sass), lo minimiza y lo comprime. Agregue el complemento grunt-contrib-watch además de eso y ejecutará la tarea Sass cada vez que guarde un archivo. ¡Fácil! No pierda el sueño si no está utilizando la mejor y más reciente metodología CSS, pero intente seguir algún tipo de estándar mientras crea CSS para evitar duplicaciones y archivos de gran tamaño.

Una vez que su hoja de estilo esté lista para funcionar, la forma más fácil (y por mucho, la estándar) de cargarla es hacer referencia a ella en el <head> ;. De esa forma, el navegador lo carga y lo analiza antes de que se cargue el resto del DOM. Sin embargo, existe una nueva técnica en la que los estilos "críticos" se insertan en <head> y luego la hoja de estilo completa se carga de forma asíncrona mediante JavaScript. Realmente solo uso esta técnica cuando estoy absolutamente tratando de que un sitio se cargue (o perciba que se carga) en menos de un segundo, pero es una gran cosa para mirar y ver si puede encajar en su flujo de trabajo. The Filament Group tiene un gran artículo extenso sobre el uso de esta técnica.

JavaScript

Comprender cómo WordPress usa MySQL

En términos generales, WordPress se puede dividir en dos segmentos: la lógica y las plantillas que generan la apariencia de un sitio de WordPress, la base de datos MySQL que almacena todo el contenido y lo potencia...

La(s) regla(s) de oro para optimizar JavaScript es simple: sirva la menor cantidad posible de archivos JavaScript y minimice y concatene. Los complementos de WordPress de terceros pueden ser perjudiciales al inflar su documento con archivos JavaScript de bloqueo no minimizados, por lo que es importante tener cuidado al elegir los complementos. Idealmente, concatenarías TODOS los archivos JavaScript en uno y luego lo minimizarías. Para los momentos en que no es posible concatenar todos sus archivos en uno, hay atributos HTML llamados "async" y "defer" que se pueden usar para cargar archivos JavaScript de forma asíncrona o una vez que se carga el resto de la página.

El lugar más común hoy en día para hacer referencia a JavaScript es en la parte inferior de su documento, justo antes de la etiqueta de cierre. Sin embargo, existen técnicas más avanzadas para cargar JavaScript. Nuevamente, Filament Group ha investigado mucho sobre esto y tiene varios proyectos de código abierto que puede usar si desea un tiempo de carga de página súper rápido (por cierto, no estoy afiliado a Filament Group; Creo que su material es increíble). El mejor enfoque parece ser cargar secuencias de comandos dinámicamente insertando una pequeña función en <head> ; que luego agrega etiquetas de script sin bloquear el resto de la página. Para obtener más información, consulte el script loadJS.

Imágenes

Las imágenes suelen ser los archivos más grandes de una página, responsables del mayor retraso en el tiempo de carga de la página. Sin embargo, lo bueno de las imágenes es que, a diferencia de CSS y JavaScript, la mayoría de los navegadores las cargan de forma asíncrona. Eso al menos ayuda con el rendimiento percibido de una página, pero aún desea asegurarse de que A) está publicando la menor cantidad de imágenes posible y B) esas imágenes están comprimidas tanto como sea posible.

Las herramientas de compresión son necesarias para exprimir tanto exceso como sea posible en las imágenes. ImageOptim es una excelente aplicación para Mac que hace esto bien, junto con OptiPNG y jpegtran para usar con ejecutores de tareas como Grunt.

fuentes

Las fuentes web son muy comunes en estos días. Utilizo Google Web Fonts en casi todos los proyectos, pero hasta hace poco no me había dado cuenta del impacto en el rendimiento que estaba experimentando al hacer referencia a ellos en el <head> . El impacto en el rendimiento es pequeño, pero este es un artículo sobre cómo hacer que los sitios sean increíblemente rápidos, ¡así que todo cuenta! Para obtener el mejor rendimiento al usar fuentes web, recomiendo usar Web Font Loader, desarrollado conjuntamente por Google y Typekit. Es un script de código abierto que administra la carga de sus fuentes de terceros como Google Web Fonts y les permite cargar de forma asincrónica (¿ya se cansó de esa palabra?).

Como era de esperar, se necesita cierta configuración para integrar Web Font Loader en su proyecto, así que consulte el proyecto en GitHub para obtener detalles sobre cómo configurarlo.