Mejorando el tiempo de carga de la página en los sitios web de WordPress

Si ha pasado algún tiempo desarrollando en WordPress, probablemente haya encontrado un tema lento que carga toneladas de archivos sin razón aparente, lo que produce un sitio web lento y un gran dolor de cabeza. Puede ser infinitamente frustrante crear un sitio web con un diseño asombroso que funcione con lentitud. Esta lentitud tiene un efecto en todo y en todos los involucrados: usted mismo, su negocio y su reputación incluidos.

En Go Fish Digital, a menudo nos llaman para resolver problemas de tiempo de carga de la página, y lo hacemos de varias maneras. Entonces, ¿cómo puede reducir el tiempo de carga de su tema o sitio web de WordPress? A continuación, describí varios consejos que ayudarán a resolver este problema:

Detecta el problema

Lo primero que debe hacer es determinar qué hace que su sitio web de WordPress se cargue lentamente. ¿Son imágenes grandes, muchas solicitudes HTTP, archivos Javascript o todo lo anterior? Es tu trabajo averiguarlo.

La forma más sencilla de encontrar esta información es utilizar las herramientas internas de su navegador. Si estás usando Chrome, navega a tu página problemática y presiona Comando + Alt / Opción + J para Mac, Ctrl + Shift + C o F12 para Windows, o simplemente haz clic derecho en la página y selecciona "Inspeccionar" . Esto hará que aparezca su "inspector". Verá algo como lo siguiente:

El tuyo puede volverse más pequeño, eso es normal. Solo necesita estirar la ventana para que se ajuste a más información. Incluso puede acoplar el inspector en diferentes partes de la ventana o abrirlo como su propia ventana si lo desea. Ahora, debe navegar a la pestaña "Red" en el área media superior. Debería ver algo como lo siguiente:

En este punto, es posible que no vea nada en esta sección. Si esto sucede, simplemente actualice la página . A medida que se cargan los datos de la página, comenzará a ver que esta ventana se llena con varias entradas. Estos serán varios archivos y llamadas relacionadas con la red que se pueden ajustar para acelerar los tiempos de carga.

Una vez que clasifique las entradas por qué archivos / llamadas están tardando más en cargarse, comenzará a ver elementos como imágenes, JavaScript y archivos CSS. Esto es normal, y esto es en lo que te enfocarás inicialmente.

Nota: A veces, el problema es recopilar activos de diferentes sitios web (como widgets de Facebook / Twitter, anuncios, etc.). En estos casos, deberá consultar con el tercero que está utilizando para encontrar una forma única de reducir el tiempo de carga.

Minificar todas las cosas

La minificación es el proceso de eliminar datos redundantes o innecesarios sin afectar la forma en que el navegador procesa todo. Comenzaría aquí con la mayoría de los problemas con un sitio. A menudo, cuando mira a través de la pestaña Red, verá una tonelada de archivos CSS. Cada vez que el navegador tiene que ir al servidor para recuperar algo como un archivo CSS o un Javascript, genera más tiempo de carga. Incluso si un solo archivo es más grande que varios archivos por separado, el único archivo se cargará más rápido porque hay menos solicitudes del servidor. Aquí hay una pequeña lista de complementos que lo ayudarán a comprimir esos archivos CSS y Javascript en una sola descarga manejable para sus visitantes:

• Autoptimizar
• Fusionar + Minificar + Actualizar
• Minificación de velocidad rápida
• Minqueue (está un poco desactualizado, ¡pero aún funciona bastante bien!)

Autoptimize es un buen ejemplo de un complemento realmente simple y útil que reducirá los tiempos de carga de la página. Nuestro equipo de desarrollo web lo ha utilizado en varios sitios web y hemos visto excelentes resultados.

Una cosa para recordar es que comprimir todo el Javascript en su sitio puede generar algunas dificultades con otros complementos, como WooCommerce, ¡así que manténgase alerta!

Compresión de imágenes y cargadores diferidos

Otro problema común que crea sitios web lentos son las grandes cargas de imágenes tanto en computadoras de escritorio como en dispositivos móviles. Si miró la pestaña Red de antes y vio que se cargaban imágenes masivas, entonces esta parte es para usted. Afortunadamente, existen algunos complementos que nos ayudan a comprimir una imagen. Recomiendo lo siguiente:

• Smushit
• TinyPNG
• Optimizador de imagen ShortPixel

Sin embargo, para comprimir manualmente las imágenes en su tema, simplemente iría a TinyPNG. Esta herramienta produce un archivo zip con todas sus imágenes recién comprimidas. Luego puede cargar esos archivos en su tema para sobrescribir las imágenes existentes.

¿Ha oído hablar de los cargadores perezosos? La carga diferida es una técnica de Javascript que solo carga una imagen en su página cuando sus usuarios realmente la ven. Es una característica bastante útil y hay algunos complementos que pueden lograrlo:

• Bj carga perezosa
• Carga diferida de WP Rocket

Una vez que haya terminado de instalar el complemento, actualice la página y asegúrese de ver la pestaña Red para ver los cambios.

Nota: Es una buena idea volver a optimizar y actualizar periódicamente todas las imágenes de su sitio. Hay un pequeño complemento genial para eso aquí mismo.

Complementos de caché

El almacenamiento en caché de páginas es una parte muy importante del desarrollo web y la optimización web. El almacenamiento en caché básicamente almacena varias respuestas, archivos y otra información para su posterior reutilización rápida. Puedes leer un poco más sobre esto aquí. En pocas palabras, hay varios niveles de almacenamiento en caché en toda su aplicación / sitio web que afectan todo, desde el servidor hasta las páginas web reales a las que se accede.

WordPress, con el uso de los complementos a continuación, puede procesar datos y almacenarlos para su uso posterior cuando otro visitante ingrese a su sitio. Esto ayudará a acelerar enormemente su sitio. Recomiendo los siguientes complementos de caché (asegúrese de hablar con su solución de alojamiento sobre cuál prefieren):

• Caché total de W3
• WP Super Caché
• Sucuri Security y otros servicios de Sucuri
• Caché integrado del proveedor de alojamiento (WP Engine es un buen ejemplo de esto)

Redes de entrega de contenido (CDN)

Imagínese que está tratando de enviarle una carta a su vecino. Lo más probable es que salga de su casa y coloque la carta en el buzón de la otra persona, lo que no requiere mucho tiempo ni esfuerzo de su parte. Ahora, imagínese si su carta necesita ir a alguien en otro país. Tendrá que pasar por un proceso mucho más largo y arduo, como ir a la oficina de correos, comprar el franqueo y luego esperar días para asegurarse de que el destinatario lo haya recibido. Eso es esencialmente lo que sucede cuando solicita el sitio web de alguien.

Las redes de distribución de contenido (CDN) actúan como si alguien de otro país estuviera accediendo a su sitio web desde la puerta de al lado. Hay toneladas de computadoras instaladas en todo el mundo con los activos de su sitio web que se los entregan a personas más cercanas que usted. Esto reduce drásticamente el tiempo de carga de la página y permite una mejor optimización en su servidor. También hay otros beneficios de las CDN sobre los que puede leer en este artículo. Hay varios servicios excelentes para CDN, que incluyen, entre otros:

• CloudFlare
• Cloudfront de AWS
• CDN77
• StackPath
• etc.

Entonces, digamos que es un desarrollador y ha probado todas estas opciones diferentes, ¿hay aún más ajustes disponibles? Me gustaría enviar un método que he usado en varios sitios web.

Controlando toda la salida con código

Nota: La siguiente parte del artículo puede causar problemas con el front-end de su sitio web si es nuevo en el desarrollo. Es mejor no hacer esto en servidores de producción hasta que se sienta seguro sobre el proceso y la teoría detrás de esta idea. Solo haga esto si sabe exactamente lo que quiere en el front-end en términos de Javascript y CSS.

Antes de comenzar a comprimir y optimizar su código aún más, debe saber exactamente qué archivos CSS y archivos Javascript desea cargar en la página. Por ahora, l oad su propio archivo de archivos CSS y Javascript comprimido en el encabezado y pie de página y desactivar todos los archivos Javascript y CSS que las salidas de WordPress. Puede hacerlo en los siguientes dos ganchos:

El fragmento de código anterior generalmente se encuentra en su archivo header.php en la carpeta de su tema, y ​​genera todo el código de su encabezado donde podría incluir Javascript, CSS y más. Puede leer más sobre esto en el Codex de WordPress aquí. Otro lugar donde WordPress inyecta código es en el pie de página. Puede ver esto en el archivo footer.php de su tema. También puede leer sobre esto en el códice. El gancho será el siguiente fragmento de código:

A continuación, debe tomar el control de todo Javascript y todo CSS de su tema. Para hacer eso, debe decirle a WordPress que no permita que se generen archivos Javascript y CSS. Un tema generalmente registra estos archivos en sus respectivos archivos functions.php , pero debe decirle a WordPress que no permita que ninguno de ellos en el encabezado o pie de página se registre en su archivo functions.php. Cada tema debe tener ese archivo functions.php, así que busque el suyo (o hágalo en la raíz de su tema) y agregue el siguiente código a su archivo functions.php:

Si actualiza la página, debería ver que, en su mayor parte, no se cargaron archivos javascript.

Consejo: Todo Javascript debe cargarse en el pie de página, mientras que CSS se carga en el encabezado del sitio web. Esto permite que el navegador represente la estructura del sitio web primero antes de que comience con Javascript. Normalmente, esto da como resultado la mejor experiencia para los usuarios.

Si actualiza la página ahora, verá un sitio realmente desordenado porque no se generan archivos CSS. Eso es lo que quieres. Ahora, controlará todo colocando sus archivos en lugar de todos esos archivos Javascript y CSS.

Entonces, digamos que sabe qué hoja de estilo desea cargar. Puede ser su salida comprimida de Gulp o Grunt ubicada en una carpeta como (tema) /assets/build/CSS/main.css o algo similar. Incluso puede ser el archivo style.css en la raíz de su carpeta de temas. De cualquier manera, desea generar la hoja de estilo principal. Aquí está el código (edítelo para que coincida con la ubicación y el nombre de su archivo):

Entonces, ahora digamos que ha comprimido un archivo Javascript de la misma manera que comprimió el CSS. Ahora puede cargar el Javascript en el pie de página de su sitio así:

Vuelva a cargar la página y ahora debería poder ubicar cada archivo en el código fuente. Eso asegura que el código PHP que tiene en su archivo functions.php esté funcionando. Ahora puede consultar la pestaña Red y ver si ha mejorado en el tamaño y el tiempo de carga general.

Conclusión

Lo más importante que debe recordar es que es absolutamente posible solucionar los problemas de carga de su página, pero se necesita una resolución creativa de problemas y un poco de investigación. Recuerde echar un vistazo a las herramientas nativas de su navegador para ayudarlo a encontrar el problema. Luego, busque los complementos antes mencionados y las estrategias para producir sitios web prolijos y bien formados para el consumo público. ¡Puedes hacerlo!

Déjame saber si mis consejos te ayudaron a mejorar los tiempos de carga en tu sitio web en los comentarios a continuación.