Cómo hacer que su sitio web de WordPress se cargue más rápido usando complementos

Tener un sitio web bonito con mucho contenido excelente es importante si desea captar la atención de los lectores. Desafortunadamente, si su página se carga demasiado lentamente, es posible que los lectores nunca vean su contenido. ¿Por qué? Solo tiene unos segundos para captar su atención y evitar que pasen al siguiente sitio. Los lectores no quieren esperar a que se cargue su contenido. Cuanto más larga sea la espera, más probable es que los pierdas.

Por esta razón, es extremadamente importante optimizar la velocidad de carga de su página. Hay varias buenas herramientas en línea para ayudar a medir su velocidad y solucionar problemas. Una de las herramientas más populares es Google PageSpeed ​​Insights.

Perspectivas de PageSpeed

Google PageSpeed ​​Insights es una herramienta en línea de uso gratuito que probará la velocidad de carga de cualquier sitio web, identificará problemas, los priorizará y brindará sugerencias para solucionarlos.

Para este artículo estoy usando mi propio sitio que usa Divi de Elegant Themes como un blog básico. Estoy mostrando lo que debe corregirse, las sugerencias que hace la herramienta y cómo las solucioné. La puntuación da resultados tanto para dispositivos móviles como para computadoras de escritorio. Me estoy centrando en el escritorio. Algunos de los problemas móviles se resolverán en el camino.

La mayoría de estos problemas se resolverán mediante el uso de complementos. Al decidirse por un complemento, quédese con los complementos que se han actualizado recientemente y tienen una buena reputación. Muchos complementos resolverán más de un problema.

Una advertencia: algunos complementos no funcionan bien con otros porque ambos intentan hacer el mismo trabajo. Esto podría tener un efecto diferente al que desea. Recomiendo probarlos en un sitio de prueba antes de usarlos en su sitio principal. No solo los complementos en sí, sino también las combinaciones de complementos. Antes de probar complementos en su sitio en vivo, asegúrese de tener una copia de seguridad reciente.

Mi puntaje

Mi puntaje es un terrible 46 . Lo primero que debe notar es que hay tres secciones diferentes en los resultados:

• Debería arreglar (2 artículos)
• Considere arreglar (6 elementos)
• Aprobado (2 artículos)

Cada sección se expande para mostrar cuáles son los problemas y dan consejos sobre cómo solucionarlos. He descubierto que es mejor comenzar con el primer elemento e ir en orden. Resolverlos en orden también resolverá otros problemas de la lista.

Nota: incluso tuve algunas fallas en el camino. Los incluí para que pudiera estar al tanto de posibles problemas.

debería arreglar

Tengo dos artículos que necesitan atención inmediata:

• Habilitar la compresión
• Elimine JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página

Habilitar la compresión

Mi problema más importante es que no estoy usando compresión. Muestra que puedo reducir el tamaño de mi transferencia de archivos en un 79%. Esto se puede hacer usando gzip o deflate.

Potenciador de puntuación de rendimiento de WP

Este complemento gratuito tiene compresión gzip y resolverá varios otros problemas, como problemas de CSS y JavaScript, al eliminar cadenas de consulta, agregar un encabezado de codificación de aceptación variable y configurar el almacenamiento en caché de caducidad. Lo elegí porque tiene una versión 4.7/5 con más de 10 000 instalaciones activas. Fue desarrollado para acelerar la carga de la página y mejorar las pruebas de puntuación de la página.

Esto me dio una puntuación de 78 con un mensaje para reducir el tiempo de respuesta del servidor. Esto tiene mucho que ver con mi plan de hosting. Estoy arreglando esto moviendo mi sitio web a un nuevo plan de alojamiento. Eso está más allá del alcance de este artículo.

Una cosa interesante de esto es que resolvió algunos de los principales problemas con el siguiente número: eliminar JavaScript y CSS que bloquean el procesamiento en el contenido de la mitad superior de la página. Este problema ahora se ha movido a Considerar arreglarlo. También arregló completamente el almacenamiento en caché del navegador Leverage. El sitio ahora está pasando 4 reglas donde antes solo pasaba 2.

Reduzca el tiempo de respuesta del servidor

Lo extraño de esto es que el tiempo de respuesta del servidor aumentó de .96 a 1.4. Reducir el tiempo de respuesta del servidor ahora estaba en Debería corregirse. Esto requería un complemento de almacenamiento en caché.

Caché total W3

W3 Total Cache es, con mucho, el complemento más popular para acelerar el rendimiento del servidor de su sitio web. Tiene casi un millón de instalaciones activas y una calificación de 4.4/5. Optimiza su sitio a través del almacenamiento en caché. Puede elegir las diferentes opciones de almacenamiento en caché de forma individual. Incluyen página, base de datos, objeto y navegador. Almacenará en caché futuros encabezados y etiquetas de entidad, fuentes y resultados de búsqueda que caducan. También tiene características para minimizar su JS, CSS y HTML. Acelerará su puntaje de Google PageSpeed ​​al menos 10 veces cuando esté completamente configurado.

Lo probé con todas las funciones de almacenamiento en caché activadas. Esto llevó mi puntaje a 86 . Por primera vez, mi sitio ahora está en verde y todos los problemas que tuve estaban bajo Considere arreglar. Ahora pasa 5 reglas, incluido el tiempo de respuesta del servidor, que ahora dice "el servidor respondió rápidamente".

Considere arreglar

Cuando ejecuté la prueba por primera vez, esta sección tenía más problemas que cuando finalmente llegué a ella. Muchos de estos problemas se resolvieron cuando solucioné problemas en el área Debería corregirse.

Problemas incluidos originalmente:

• Aproveche el almacenamiento en caché del navegador
• Tiempo de respuesta del servidor
• Minimizar JavaScript
• Optimizar Imágenes
• Minimizar CSS
• Minimizar HTML

He aquí un vistazo a los problemas actuales.

Elimine Javascript y Css que bloquean la representación en el contenido de la mitad superior de la página

JavaScript y CSS que se encuentran en la mitad superior de la página pueden ralentizar la carga de la página al colocar demasiada carga en el navegador. Tienen que cargarse antes de que se pueda cargar cualquier otra cosa por encima del pliegue.

Hay varias formas de solucionarlo:

• Aplazar la carga
• Cargar de forma asíncrona
• Insértelos directamente en el HTML

Aquí están los complementos que usé para solucionar este problema.

Autooptimizar

Este complemento minimizará (eliminará todo el formato innecesario y reducirá el tamaño del archivo y la carga en el navegador) y comprimirá su JavaScript, CSS y HTML. Agregará encabezados de vencimiento y los almacenará en caché. Moverá sus estilos al encabezado de la página y las secuencias de comandos al pie de página. Usando la configuración avanzada, puede ajustarlo para sus necesidades específicas.

Esto también resolverá algunos problemas, como minimizar JS y CSS en la lista.

Al principio, solo encendí la configuración básica para HTML, JS y CSS. Esto llevó mi puntaje a 88 y redujo los problemas a 3 recursos CSS. Uno fue creado por el propio complemento y los otros dos son fuentes de Google. Ahora pasa 7 reglas. Resolvió Minify CSS y Minify HTML.

Mejor Minificar WordPress

El objetivo principal de este complemento es minimizar su CSS y JS, pero también tiene una característica interesante que le permite mover sus archivos al pie de página u otras ubicaciones (por eso lo elegí). Utiliza un sistema de puesta en cola para mejorar la compatibilidad con navegadores, complementos y temas.

Cuando lo instalé, se eliminaron todas las configuraciones de diseño de mi tema y todos mis menús, imágenes, enlaces, etc., aparecieron en el extremo izquierdo de la pantalla. Afortunadamente, el formateo volvió cuando lo desinstalé. Puede haber sido algo en la configuración que necesitaba ser ajustado. Estoy seguro de que este es un buen complemento porque tiene más de 60 000 instalaciones activas y una calificación de 4.4/5. Solo incluí este como una advertencia de que podría no funcionar de la manera que lo necesita sin alguna configuración.

Como mi puntaje era 88 y sabía cuáles eran los 3 problemas, decidí pasar al siguiente problema.

Optimizar Imágenes

El tamaño de la imagen juega un papel importante en la velocidad de carga de la página. A veces, puede usar un tamaño de imagen mucho más pequeño y una calidad más baja sin mucha diferencia visual cuando se ve en la web. Esto no solo acelera el tiempo de carga y usa menos ancho de banda, sino que también acelera el tiempo de respaldo y reduce el espacio de almacenamiento en su servidor.

Optimizador de imágenes EWWW

Este complemento optimizará automáticamente sus imágenes a medida que las cargue y las convertirá al formato que produce el tamaño más pequeño. También optimizará las imágenes que ya hayas subido. También puede hacer que aplique reducciones con pérdida para imágenes PNG y JPG.

Cuando lo instalé, había varios archivos que quería que localizara e instalara. Creo que este complemento funcionaría muy bien con todos los archivos instalados, pero decidí encontrar uno que funcionara de inmediato.

WP Smush

Este complemento reducirá el tamaño de archivo de las imágenes sin reducir la calidad. Lo hace eliminando la información oculta. Analizará sus archivos y le dirá cuántas imágenes deben eliminarse. Puedes aplastarlos a granel.

La versión gratuita no elimina nada de más de 1 MB y solo eliminará 50 a la vez. Para más que eso, necesitará WP Smush Pro, que combinará imágenes de hasta 32 MB sin límite de cantidad a la vez. Realiza una copia de seguridad de los originales si los necesita. Los precios comienzan en $ 19 por mes.

Tenía 114 imágenes que necesitaban aplastarse. 8 de estas imágenes tenían más de 1 MB. Decidí arreglarlos a mano. Aplastó 98 imágenes y redujo el tamaño del archivo en 4,79 MB (8,82 %).

Esto llevó mi puntaje a 90 . Google Insights identificó 5 imágenes que no le gustaron, pero ninguna tenía más de 1 MB. Oscilaron entre 0,7 KB y 17 KB.

Optimización de imágenes a mano

Puede optimizar las imágenes a mano cambiando el tamaño, reduciendo la calidad y cambiando el formato. Una de mis herramientas favoritas y más usadas para manejar imágenes es Paint.NET. Es una aplicación gratuita de edición de imágenes y fotos para Windows que tiene muchas funciones para reducir el tamaño del archivo. ¿Cuál es tu favorito?

Minificar JavaScript, CSS y HTML

Pensé que había arreglado esto...

Mientras trabajaba en los otros problemas, vi que el único mensaje para minimizar era para JavaScript. Una vez que optimicé mis imágenes, los tres problemas volvieron. Volví sobre mis pasos para averiguar qué pasó.

Al probar Better WordPress Minify y luego volver a apagarlo, volvieron mis mensajes para minimizar CSS y HTML. Mi puntaje bajó a 88 y ahora tenía 5 reglas aprobadas. Encendí las funciones de minificación de W3 Total Cache y ahora superó todos los problemas de minificación. Ahora tenía una puntuación de 88 y pasó 8 reglas. Además, tenía seis archivos por encima del pliegue. Sabía que había resuelto algunos de estos, así que debo haber cambiado algo.

Resolví algunos problemas y descubrí que había desactivado Autoptimize cuando tuve el problema con Better WordPress Minify anteriormente. Volví a activar Autoptimize, apagué minify de W3 Total Cache y borré el caché (¡paso muy importante!). Ahora recuperé mi puntaje de 90 y el sitio aprobó 8 reglas. Volvía a tener tres archivos CSS en la mitad superior de la página y un mensaje para optimizar las imágenes.

Basándome en mi experiencia pasada, decidí no perder el tiempo con estos archivos. Creo que Google odia las imágenes de cualquier tamaño (no importa cuán pequeñas las obtenga, todavía recibo un mensaje para reducir el tamaño) y pasar de un PageScore de 46 a 90 es una victoria en mi libro. He aprendido de la manera más difícil a detenerme mientras estás adelante.

Puntuación final

Mi puntuación final fue 90/100. Los complementos que utilicé para obtener esta puntuación son:

• Optimizar automáticamente (todas las funciones activadas)
• W3 Total Cache (solo las funciones de almacenamiento en caché de páginas están activadas)
• WP Performance Score Booster (todas las funciones activadas)
• WP Smush (edición gratuita)

Para que conste, la puntuación móvil pasó de 36 a 78. Para solucionarlo, tendría que optimizar mis imágenes y archivos para dispositivos móviles.

Pensamientos finales

Sus visitantes, Google y otros motores de búsqueda odian los sitios web que se cargan lentamente. Con Google PageSpeed ​​Insights, puede saber exactamente cuáles son los problemas y obtener consejos sobre cómo resolverlos. Un puñado de complementos gratuitos es todo lo que necesita para pasar de un sitio lento que Google odia a un sitio rápido que Google ama. Solo tenga cuidado al experimentar: algunos complementos no funcionan bien con otros.

Me gustaría saber de usted. ¿Ha optimizado su sitio web de WordPress con Google PageSpeed ​​Insights? ¿Tu experiencia fue como la mía? ¿Utilizó diferentes complementos para resolver los problemas? Me gustaría conocer tu experiencia en los comentarios.