No es ningún secreto que todos queremos un sitio web rápido. Tanto los motores de búsqueda como los usuarios quieren que los sitios que visitan se carguen lo más rápido posible. Para mantenerse al tanto de la velocidad de carga de su sitio web de WordPress y ayudar a resolver problemas, es una buena idea realizar una prueba de velocidad . Hay varias formas de probar la velocidad de carga de su sitio web de WordPress. Una de esas pruebas es Yslow de Yahoo.
Yslow es una herramienta que prueba la velocidad de tu sitio web. Se basa en criterios conocidos como reglas de Yahoo para sitios web de alto rendimiento. Proporciona una puntuación de hasta 100 y le da una calificación. La prueba incluye un resumen de los componentes de su página con una calificación para cada uno, y le brinda un análisis completo de sus páginas con prioridad y sugerencias sobre cómo solucionar los problemas. Cada infracción a las reglas quita un punto y reduce su calificación.
La extensión del navegador Yslow
Hay varias formas de probar su sitio web y obtener su puntuación de Yslow. Una herramienta popular es GTmetrix , que le dará su calificación de Page Speed y su calificación de Yslow y le dará sugerencias para arreglar ambas. Otra herramienta es la herramienta oficial de Yslow. Lo usé como una extensión en Google Chrome y obtuve muchos más detalles sobre mi sitio de prueba. Para usarlo, simplemente vaya al sitio oficial, haga clic en el navegador para el que desea la extensión e instálela. Una vez que lo tenga instalado, vaya a su sitio y haga clic en el icono en su navegador. Obtendrá una ventana emergente que realiza la prueba y le da los resultados.
Reglas y mejores prácticas de rendimiento web
Yahoo ha identificado y establecido 34 reglas que afectan el rendimiento de la página web. Yslow usa 23 de estas reglas. Estas son las reglas que son comprobables. Puede hacer clic en cada regla para ver una explicación detallada sobre el problema y sugerencias sobre cómo solucionarlo.
El marcador
Creé un nuevo sitio de prueba, cargué algunas fotos de prueba, creé tres publicaciones de prueba, instalé Divi y ejecuté la prueba. Para fines de prueba, utilicé la extensión Google Chrome de Yslow . Esta prueba le dará un porcentaje y le dará pistas sobre qué arreglar. Le da a cada uno una prioridad y muestra el tipo de problema que es. Simplemente revise la lista y elimine los problemas de mayor prioridad (esto le brinda la mayor inversión). Cada sitio web es diferente, por lo que sus problemas pueden ser diferentes a los míos.
Mi sitio de prueba obtiene una puntuación Yslow de 77 y una calificación de C. También me da algunos consejos sobre qué corregir. Dio 8 elementos y muestra sugerencias para cada uno. Los he enumerado en orden de prioridad:
- F Usar una red de entrega de contenido (CDN) – 20
- F Utilizar dominios sin cookies: 18 componentes
- F Comprimir componentes con gzip – 13
- F Agregar encabezados Expires – 5
- D Hacer menos solicitudes HTTP – 7
- D Configurar etiquetas de entidad (ETags) – 3
- B Minimizar JavaScript y CSS – 2
- B Reducir el tamaño de la cookie: 1601 bytes
Dado que hubo varias F y D, comenzaré con esas primero. Una vez que haya pasado por esos, abordaré los B. Sus resultados serán diferentes, pero estos son algunos de los problemas más comunes y muchas de las herramientas para resolver estos problemas también solucionarán otros problemas.
Red de entrega de contenido (CDN)
Esta es la regla número 2 en las reglas de rendimiento web de Yahoo. Básicamente significa usar múltiples servidores para entregar contenido de modo que se pueda elegir el servidor que está más cerca de los usuarios. Se elegiría el servidor con la menor cantidad de saltos de red o el tiempo de respuesta más rápido. Este es un gran sistema de servidores en múltiples centros de datos.
Hay varios CDN disponibles. Uno de los más populares es uno gratuito llamado Bootstrap CDN , un servicio de MaxCDN . Puede conectarlo a su sitio web de WordPress a través de un complemento. Los complementos pueden ser solo de CDN, o puede usar un complemento que incluya CDN en sus características. Veamos uno de cada uno.
BootstrapCDN – Complemento CDN de WordPress
Este complemento gratuito permitirá a sus usuarios cargar CSS, JavaScript e imágenes de forma remota utilizando el CDN global de MaxCDN. Esto acelerará su sitio web, colocará menos solicitudes en su servidor y usará menos ancho de banda. Funciona con complementos de almacenamiento en caché y se integra con FontAwesome .
Caché total W3
Otra opción es usar un complemento de almacenamiento en caché de WordPress que incluya integración con CDN. W3 Total Cache es uno de los complementos más populares para WordPress y por una buena razón. Se ocupará de varios problemas a la vez, incluido el almacenamiento en caché de páginas, el almacenamiento en caché de bases de datos, el almacenamiento en caché de objetos, el almacenamiento en caché del navegador , la minimización y la integración con una CDN.
Hay múltiples opciones para las redes CDN. El valor predeterminado es MaxCDN. Deberá tener una cuenta con una clave de autorización. También puede especificar una CDN de su propia elección seleccionando Generic Mirror y luego agregando el nombre de la CDN.
Cuando los navegadores envían solicitudes de imágenes, también envían cookies que el servidor no puede usar. Esto crea tráfico de red sin una buena razón. Además, es posible que algunos proxies no almacenen en caché los componentes que se solicitan con las cookies.
Yahoo sugiere que cree un subdominio para alojar sus componentes estáticos. Por ejemplo, si su sitio es mysite.com, crearía un sitio como static.mysite.com para alojar sus componentes estáticos. Otra opción es comprar un nuevo dominio para alojarlos. Podría obtener algo como images-mysite.com. Lo mismo ocurre con www. Sin www , las cookies se escribirán en *.mysite.com. Escribir cookies en un subdominio www mejorará el rendimiento.
Comprimir componentes con gzip
Gzip es un método de compresión que reduce el tamaño de la respuesta HTTP en un 70 % aproximadamente. La mayoría de los navegadores actuales son compatibles con gzip. Hay muchos complementos que proporcionan compresión gzip. Puede usar un complemento de almacenamiento en caché con múltiples funciones, como W3 Total Cache o WP Performance Score Booster, o puede usar un complemento que solo realiza la función gzip.
Compresión Gzip de WordPress
Este complemento gratuito habilitará la compresión gzip . Antes de habilitar la compresión, verifica el navegador para ver si puede manejar gzip. No hay nada que configurar después de la instalación. Solo instálalo y listo.
Agregar encabezados de caducidad
Cada vez que alguien visita su sitio web por primera vez, hay múltiples solicitudes HTTP al servidor. Puede reducir esas solicitudes haciendo que esos componentes se puedan almacenar en caché en el navegador y luego hacer que caduquen en el encabezado. Los encabezados Expires deben usarse con todos los componentes, incluidas imágenes, estilos, flash y scripts. Puede usar un solo complemento que se ocupa de muchas cosas, como W3 Total Cache, o puede usar un complemento que solo hace esto.
Encabezado de vencimiento futuro lejano
Este complemento gratuito especifica una fecha en el futuro lejano para evitar que los navegadores intenten obtener CSS, JavaScript e imágenes. Puede elegir el número de días y los tipos de archivos que se incluirán. Los tipos de archivos incluyen imágenes (GIF, JPEG, JPG, PNG, ICO), JavaScript (JS), estilos (CSS) y flash (SWF). Como beneficio adicional, también tiene compresión Gzip.
Haz menos solicitudes HTTP
La mayor parte del tiempo de respuesta del usuario se gasta en la interfaz (80% según Yahoo), y la mayor parte se descarga de componentes como imágenes, estilos, JavaScript, etc. Esto se puede mejorar mucho reduciendo la cantidad de componentes. Esto se puede hacer usando un diseño de página simplificado, pero eso restringiría los diseños enriquecidos. Una mejor opción es minimizar y combinar sus archivos, usando sprites CSS para combinar sus imágenes de fondo en una sola imagen, usar mapas de imágenes para combinar múltiples imágenes en una e imágenes en línea para incrustar los datos de la imagen en la página (aunque no todos los navegadores tienen esta funcionalidad todavía). Hay muchos complementos buenos que brindan estas características.
Mejor Minificar WordPress
Este complemento gratuito combinará sus archivos CSS y JavaScript e incluso es compatible con CDN. Puede instalarlo y dejarlo como está o puede pasar por la configuración y hacer muchos ajustes a su gusto. Es fácil de usar. Instalarlo llevó mi puntaje de solicitud HTTP de una D a una B sin hacer ningún ajuste en la configuración.
Corrección de minificación de WP
Este complemento gratuito minimizará su CSS , JavaScript y HTML5. Incluso puede incluir archivos para minimizarlos o excluir archivos para que no sean minimizados. También caducarán los encabezados. Hay un modo de depuración si necesita solucionar algún problema. Todo está habilitado cuando lo instala, por lo que no es necesario pasar por la configuración. Instalarlo llevó mi puntaje de solicitud HTTP de D a A sin hacer ningún ajuste.
Una entidad es un componente (imagen, CSS, JavaScript, etc.). Las etiquetas de entidad son las que utilizan los servidores web y los navegadores para determinar si los archivos de un sitio web coinciden con la memoria caché del navegador. Si un sitio web usa servidores agrupados para manejar solicitudes, las etiquetas de entidad no coincidirán si los archivos en el navegador provienen de un servidor diferente en el clúster al que está tratando de conectarse. Esto significa que el caché no ayuda y el usuario que regresa es tratado como un nuevo usuario y se le envía el archivo más grande. Si no está utilizando las etiquetas para el modelo de validación flexible, es mejor eliminar las etiquetas.
Esto se hace en un servidor Apache agregando esta línea a su archivo de configuración de Apache:
FileETag ninguno
Minificar JavaScript y CSS
Minificar es el acto de eliminar caracteres innecesarios del código que el sitio web no necesita para funcionar. Los caracteres son espacios adicionales para que el código sea más legible para nosotros, comentarios que necesitamos cuando volvamos al código más tarde y nuevas pestañas de línea. Las computadoras no necesitan estos espacios. Eliminarlos mejora el tiempo de carga porque se reduce el tamaño del archivo. Puede minimizar a mano o usando los complementos que ya hemos discutido.
Una forma de hacerlo a mano es usar una herramienta como YUI Compressor.
Compresor YUI
Este es un archivo que descarga y ejecuta desde su línea de comandos. Minificará tanto JavaScript como CSS. También ofuscará de forma segura las variables locales, ahorrando hasta un 20 % de espacio en un archivo. Hay mucha documentación para ayudarlo a superarlo y enlaces a artículos y tutoriales.
Caché más rápido de WP
Este está disponible en una edición gratuita y una edición premium. La edición gratuita tiene varias funciones para almacenar en caché, minimizar, combinar y comprimir. Revisas la configuración y eliges qué características quieres usar. No tienes que usarlos todos. Esta es una buena opción si desea utilizar un complemento específico para otra cosa y no desea que sus complementos entren en conflicto.
Las cookies se utilizan para rastrear, autenticar y personalizar la información en la web. La información sobre las cookies se intercambia en los encabezados HTTP entre los navegadores y los servidores. Obviamente, el objetivo es mantener el tamaño del archivo de cookies lo más pequeño posible. Hay algunas cosas que puedes hacer:
- Elimina las cookies que no necesites.
- Utilice una fecha de caducidad anterior. Esto eliminará la cookie antes.
- Configure las cookies en el nivel de dominio apropiado.
Terminando
Yslow de Yahoo es una excelente herramienta para probar la velocidad de carga de su sitio. Le brinda algunas buenas indicaciones de los problemas que están causando que su sitio se cargue lentamente y le brinda una lista de prioridades y posibles soluciones. Usando la información que me proporcionó, pude llevar mi puntaje de 77 a 84 y mi calificación de C a B con muy poco esfuerzo.
Una breve advertencia:
Tenga cuidado al probar complementos en su sitio. No todos los complementos funcionan bien juntos y podría causar daños graves a su sitio. Primero asegúrese de tener una copia de seguridad reciente.
¿Y tú? ¿Ha mejorado la puntuación de Yahoo Yslow de su sitio web? ¿Cuál fue tu puntuación antes y después? ¿Qué herramientas te funcionaron mejor? ¿Me dejé algo fuera? ¡Me gustaría saberlo en los comentarios a continuación!
Imagen en miniatura del artículo de Sarawut Padungkwan / shutterstock.com