¿Por qué es importante la velocidad del sitio web?
Hay mucha investigación que muestra indiscutiblemente que la velocidad de carga de un sitio web es realmente importante. En una época en la que diariamente aparecen nuevas tecnologías, donde la velocidad de las computadoras y del Internet aumenta enormemente, la capacidad de atención del visitante es mucho menor de lo que solía ser hace algunos años.
Solo tendra unos pocos segundos para captar y conservar la atención de sus visitantes y no debe desperdiciar esos segundos en la carga. No importa si vende productos, ofrece servicios o tiene un blog sencillo. Si su sitio web es lento, perderá tráfico, visitantes y posiblemente dinero. En general, si su sitio web tarda más de 4 segundos en cargarse, es lento y necesita optimización.
En YOONTA, hemos dedicado mucho tiempo a desarrollar una plataforma que optimiza la velocidad y aplica tecnologías de mejora del rendimiento para nuestros clientes de WordPress específicamente. Aunque tener un servidor web que use el hardware y las tecnologías de mejora de la velocidad más recientes es esencial para el rendimiento de su sitio, no es lo único. Existen otras herramientas y técnicas que puede utilizar y aplicar para mejorar la velocidad de su sitio web de WordPress las cuales nos gustaría compartir con usted.
Identificar y Priorizar los problemas
Prueba de rendimiento o comparativa
Lo primero que debe hacer es averiguar si realmente tiene un problema. La forma más fácil de hacerlo es utilizar pruebas de rendimiento. Existen algunas herramientas gratuitas como:
Si realiza una comparativa en su sitio utilizando GTMetrix, obtendrá resultados de la prueba de velocidad de la página de Google y de la prueba lenta de Yahoo en un solo informe. Los resultados se ordenan por orden de gravedad.
La herramienta Pingdom muestra los resultados en varias pestañas, pero dos de ellas son las más importantes. La Cascada, que muestra el tiempo de carga del sitio y la cantidad de tiempo que toma cada recurso y la pestaña Grado de Rendimiento, que le brinda recomendaciones sobre cómo mejorar, similar a GTMetrix.
Existen muchas otras herramientas y en general, si tiene tiempo; cuantas más pruebas realice en su sitio, mejor. Sin embargo, estas dos herramientas suelen ser suficientes para obtener una imagen clara del rendimiento de su sitio web en términos de velocidad.
Aunque la mayoría de las herramientas de evaluación comparativa le otorgarán un "grado", no se mate por conseguirlo. Si su sitio web se carga en menos de un segundo, ha hecho la mayor parte del trabajo.
Problemas más comunes
Si las pruebas de rendimiento muestran que tiene un problema con la velocidad de su sitio, el siguiente paso es identificar los bloqueadores reales. Aunque cada sitio web es diferente y tiene sus propios problemas de velocidad, algunos de ellos son muy comunes y es seguro comenzar con ellos:
- Demasiados mensajes en la portada
- Demasiados plugins sociales, plugins para compartir y widget
- Demasiadas fuentes externas
- Temas pesados con demasiadas características
- Imágenes grandes y no optimizadas.
Priorizar los problemas
Su investigación y análisis de las causas de la lentitud pueden resultar en una larga lista de cosas que podría hacer. No obstante, necesita priorizar esa lista. La solución de algunos de estos problemas puede llevar mucho tiempo, pero no dará lugar a grandes mejoras en la velocidad. Hay dos cosas que debe considerar al priorizar sus arreglos:
- ¿Qué tan difícil será arreglar el problema?
- ¿Qué efecto tendrá la resolución del problema en su sitio?
Puede usar las respuestas a estas preguntas para crear una lista de optimizaciones a partir de aquellas que tendrán el impacto más significativo por el tiempo empleado.
Tamaño de la página y Optimizaciones de contenido
1) Reduzca el número de publicaciones que se muestran en su página de inicio
La reducción del número de publicaciones que se muestran en su página de inicio se puede hacer fácilmente desde el panel de administración de WordPress. Ir a:
Ajustes -> Ajustes de Lectura -> Número máximo de entradas a mostrar en el sitio
Luego, cambie el valor de «Número máximo a mostrar en el sitio» de las entradas a un número más bajo.
Alternativamente, puedes usar un plugin como YITH Desplazamiento Infinito. Mostrará dinámicamente más publicaciones cuando sus usuarios se desplacen hacia abajo cerca del final de su página, de manera similar a como Facebook muestra más publicaciones cuando se desplaza.
2) Dividir las publicaciones largas en su página de inicio
Si su sitio tiende a contar con publicaciones largas, puede dividirlas en páginas usando la etiqueta dentro del contenido de la publicación. Al hacer esto, verá una paginación debajo de la página o las publicaciones y sus usuarios podrán navegar a través de ellas haciendo clic en las páginas siguientes.
Esto dividirá una página grande y lenta en varias más rápidas.
3) Sustituya el sliderde imágenes múltiples por una imágen estática
Los «sliders» usualmente usan mucho JavaScript para funcionar. Además, no todos los complementos que habilitan la funcionalidad del deslizador en los sitios de WordPress están escritos en código ligero y optimizado. Por último, pero no menos importante, los sliders no son particularmente fáciles de usar en dispositivos móviles. Entonces, si su diseño lo permite, simplemente reemplace su slider con una sola imagen estática.
Sin embargo, si realmente necesita y quiere un deslizador, le recomiendo usar el editor Elementor. Viene en una versión gratuita y profesional, que incluye más características. Este complemento ofrece un deslizador rápido y ligero que tiene todo lo que la mayoría de las personas necesitarían de un complemento deslizador. Otra buena solución es el complemento Meta Slider, que es otra extensión gratuita y bien escrita.
4) Utilice tamaños de imágen apropiados
Las imágenes son una parte esencial de un sitio web y pueden necesitar algo de tiempo para ser transferidas desde el servidor mientras el sitio se está cargando.
Si desea mostrar una imagen de 300 x 300 píxeles, no cargue una imagen de 1024 x 1024 píxeles y luego configúrela para mostrarla más pequeña con HTML o CSS.
5) Optimice el tamaño de la imagen sin dañar la calidad
Recomiendo usar un complemento gratuito llamado EWWW Image Optimizer. Optimiza el tamaño de sus imágenes sin dañar su calidad y les quita todos los datos innecesarios que guarda su cámara cuando toma una fotografía (por ejemplo, la ubicación GPS de la foto, la marca y el modelo de la cámara utilizada).
Incluso si la imagen se reduce solo en unos pocos KB, cuando combina todas las imágenes en una página, generalmente la ganancia de rendimiento es significativa.
6) Reducir el uso de fuentes externas
Cada fuente que utilice de Google Free Fonts u otro servicio similar tiene múltiples variaciones, peso (300, 400, 500, 700), codificación (Latin, Cyrillic), estilo, etc.
Revise su sitio web e incluya sólo la variación de fuente que realmente está usando.
Además, si está cargando una fuente para un pequeño fragmento de texto en algún lugar de su sitio, le recomiendo que se comprometa con el diseño y simplemente use una fuente que ya tenga en otras páginas.
7) Administrar la cantidad de comentarios en su sitio
Si recibe muchos comentarios, esto puede ralentizar su sitio de dos maneras. Primero: esto hace que su página sea más dinámica (si ha habilitado el almacenamiento en caché, debe borrarse más a menudo) y segundo: cada comentario aumenta tamaño de su página y a la salida HTML.
En tales casos, recomiendo reemplazar el sistema de comentarios de WordPress predeterminado con un complemento llamado Epoch. Reemplazará la manera predeterminada en que WordPress maneja los comentarios con un código más optimizado que realmente pueda acelerar su sitio, especialmente si recibe muchos comentarios.
Disqus también es una opción, pero es un servicio de terceros que se basa en un complemento para reemplazar su sistema de comentarios predeterminado por el de ellos. Se incluirán los comentarios de su sitio, pero ya no se almacenarán en su servidor.
8) Habilitar la compresión GZIP en sus páginas
Con la compresión GZIP habilitada, la salida HTML final de su sitio y algunos de los recursos estáticos se comprimirán antes de ser transmitidos a su visitante. Después, el navegador de su visitante descomprime el contenido antes de renderizar. Es mucho más rápido comprimir y descomprimir este contenido que transferirlo sin compresión.
Habilitar la compresión GZIP es muy fácil y casi no requiere esfuerzo. Simplemente agregue este código al archivo .htaccess en su carpeta principal de Word Press:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
GZIP descomprime el contenido antes de renderizar, lo que hace que la transferencia sea más rápida.
9) Minificar y combinar JS y archivos CSS
La minificación y la combinación son dos técnicas con un propósito, el cual es reducir el tamaño y la cantidad de archivos JavaScript y CSS que carga su sitio. La minificación elimina todos los símbolos innecesarios eliminando los preciosos bits que no se cargan cada vez que solicita una URL.
Por otro lado, la combinación une varios archivos JavaScript y CSS en uno. Esto reduce la cantidad de solicitudes que realiza su sitio. Hay algunos complementos que hacen esto bastante bien. WP Rocket, una opción premium o WP Super Minify, un buen complemento gratuito, pueden hacer el trabajo.
10) Habilitar caché
El caché es una excelente tecnología que guarda el resultado de diferentes operaciones que su sitio debe realizar para producir su contenido final. Luego sirve este «producto» listo para el siguiente visitante de su sitio. Con una buena solución en caché habilitada y en funcionamiento, su sitio será tan rápido como una página estática hasta que realice un cambio.
Cuando esto ocurra, la página se cargará de manera dinámica para el primer visitante después de la modificación. Después, el caché se actualizará y la próxima vez cargará la versión mucho más rápida y en caché de la página.
La forma más fácil de almacenar en caché su sitio es a través de un complemento. Esto guarda el contenido almacenado en caché en el disco duro del servidor y mejora significativamente el rendimiento del sitio, ya que su contenido no se cargará dinámicamente cada vez. WP Rocket es una excelente opción premium, o si está fuera de su presupuesto, pruebe con WP Super Cache.
Cuando el almacenamiento en caché está habilitado en el nivel del servidor, el contenido se guarda no en el disco duro, sino en la memoria RAM del servidor. Esto hace que el rendimiento del sitio sea mucho mayor, ya que la lectura de la memoria es más rápida que la lectura del disco.
Optimizaciones de temas y plugins
11) Seleccione un tema de un proveedor confiable
Al elegir un tema, busque uno en el repositorio de WordPress, o si está buscando un tema premium, busque una empresa de renombre que sea bien conocida en la comunidad de WordPress.
Cada hora que dedique a buscar su proveedor de temas y el tema en sí le ahorrará días más adelante cuando invierta tiempo y dinero en su sitio y agregue todo su contenido. Lea las reseñas de los temas, intente obtener algunos comentarios reales de los usuarios, compruebe si la empresa es de confianza en la comunidad de WordPress.
No confíe en un tema provisto por un autor desconocido que no responde a sus clientes.
Es importante tener un tema bien escrito porque la calidad del código del tema afecta a todas las partes de su sitio. Por ejemplo, algunos temas tienen un plugin de funciones y características adicionales, como publicaciones relativas bajo sus publicaciones normales. Dicha función con frecuencia causa tiempos de carga lentos debido a la forma en que se estructuran las consultas a la base de datos MySQL. En resumen, no tiene que ser un buen desarrollador para tener un buen sitio, pero asegúrese de que su tema esté escrito por uno bueno.
12) Evite los temas exagerados
Cuando busque un tema para su sitio web, seguramente se encontrará con temas que afirman que se pueden usar para prácticamente cualquier tipo de sitio web. Muchas de estas están llenas de funciones, controles deslizantes, carruseles, etc. Todas estas funciones requieren recursos de JavaScript y CSS para funcionar y si no las está usando, simplemente está desperdiciando recursos.
Las funciones, como los carruseles y los controles deslizantes, no deben formar parte de su tema. Siempre puedes agregarlos usando un complemento más adelante cuando quieras que se carguen. Por lo tanto, elija un tema que tenga la función principal que necesita sin toneladas de características adicionales.
13) Siempre utilice un tema hijo al crear su sitio
Las actualizaciones de WordPress se lanzan a menudo y muchas de ellas incluyen optimizaciones de rendimiento. Los temas son más difíciles de actualizar, pero los buenos a menudo obtienen nuevas versiones con numerosas actualizaciones. El uso de un tema hijo le permite mantener el tema principal actualizado, manteniendo intactas todas sus personalizaciones. Es fácil establecer un tema hijo, solo siga las instrucciones en WordPress.org.
14) Optimizar para dispositivos móviles
Cada año, más y más tráfico proviene de los dispositivos móviles. Las tablets y los teléfonos inteligentes son cada vez más populares para navegar que las computadoras de escritorio estándar. Por eso, es importante asegurarse de que su sitio funcione lo más rápido posible en dichos dispositivos.
Por lo general, cuando las personas navegan por su página en su teléfono móvil, usan 2G, 3G o LTE, lo que generalmente es una conexión más lenta que la que tienen en casa. Por eso es una buena práctica mostrar solo lo que los usuarios necesitan ver en el móvil, en lugar de una versión reducida de sus páginas. Aquí hay algunos pasos para optimizar su sitio móvil:
- Examine sus páginas con la prueba de Google Mobile-Friendly que le dará información si una parte determinada de su página no está bien optimizada para móviles.
- Seleccione siempre un tema que sea mobile-first (móvil primero) o que tenga una versión móvil nativa. Cuando ejecute pruebas para su sitio web, asegúrese de usted prueba la versión móvil también.
- Si su tema no tiene una versión móvil, considere usar un complemento como WP Touch que generará una versión móvil de su página. Sin embargo, siempre es preferible tener una versión móvil nativa.
15) Utilie una fuente para íconos
Las imágenes similares a íconos se han convertido en una tendencia en los últimos años. Si desea utilizar estas imágenes, intente utilizar una fuente de icono en lugar de imágenes separadas. Genericon’d es un gran complemento que te ayudará.
Con él, puede agregar íconos vectoriales como si fueran símbolos del alfabeto normal.
16) No superar la funcionalidad con los plugins
Si un complemento incluye varias funciones, asegúrese de usar la mayoría de ellas. No instale otro complemento si uno de sus complementos activos ya puede hacer el trabajo.
Por ejemplo, si está utilizando el complemento Yoast SEO y desea tener un Sitemap XML de Google, simplemente habilite esta funcionalidad en la página de configuración del complemento en lugar de agregar otro complemento, aunque hay docenas disponibles en el repositorio de complementos.
17) Mantenga siempre los plugins actualizados
La mayoría de las actualizaciones de los complementos ofrecen parches de seguridad, nuevas funciones, correcciones de errores, mejoras de velocidad o una combinación de los anteriores.
Además, hay nuevas características, funciones, etc. que se introducen constantemente con las actualizaciones principales de WordPress. Muchas de ellas están diseñadas para permitir que los complementos funcionen mejor y más rápido. Al mantener sus complementos actualizados, obtendrá todas las mejoras de rendimiento de la versión más reciente.
Mantener sus complementos actualizados le permitirá utilizar versiones más recientes de PHP, incluido PHP7, lo que le da a su sitio un gran aumento de rendimiento.
Si no está utilizando un complemento, elimínelo. No hay necesidad de mantenerlo en su cuenta. Es una buena práctica de seguridad y una cosa menos para ralentizar su back-end.
18) Borre las opciones de plugin de su base de datos
Algunos complementos dejan las opciones y los datos de configuración en su base de datos después de eliminarlos. Para deshacerse de esa basura, utilice un complemento llamado Garbage Collector.
La mayoría de los complementos no se molestan en limpiar tu base de datos después de que los hayas desinstalado. Eliminan los archivos del complemento, pero las tablas con diferentes configuraciones que han estado utilizando permanecen. Este complemento identificará las opciones que ningún complemento está utilizando y le permitirá borrarlas. Aunque es una operación relativamente segura, recomiendo hacer una copia de seguridad de su base de datos antes de eliminar cualquier información.
Optimizaciones del servidor y del alojamiento
19) Tome la ventaja del nivel de caché del servidor
Los proveedores especializados de alojamiento de WordPress a menudo proporcionan algún tipo de almacenamiento en caché. La compaía de Hosting, con que trabajamos en Yoonta, SiteGround, ha implementado NGINX como un proxy inverso y ha desarrollado un complemento especial de WordPress llamado SG CachePress. Guarda el resultado de todas las operaciones de PHP, consultas de bases de datos, etc. en la memoria RAM del servidor y luego, cuando otro visitante abre la misma página, proporciona el contenido de la memoria sin siquiera llegar al servidor web.
Puede habilitar fácilmente el almacenamiento en caché a nivel de servidor desde su panel de control, lo que le brinda una gran mejora en el rendimiento. Dependiendo del sitio web, su tiempo de carga puede ir de 2-3 segundos a 0.5 segundos. Además, el uso de dicho servicio de almacenamiento en caché aumentará la cantidad de tráfico que puede manejar en su cuenta. Una prueba con una instalación de WordPress predeterminada en la misma cuenta de alojamiento de SiteGround muestra resultados sorprendentes:
No hace falta decir que es una gran cantidad de tráfico que se maneja sin problemas, principalmente debido al sistema de almacenamiento en caché que se ejecuta en el servidor.
Para sitios web con grandes bases de datos, también puede implementar el almacenamiento en caché de objetos como Memcached o Redis. Estos son servicios que su proveedor de alojamiento debe instalar en su servidor y le brindan la capacidad de usarlos con su aplicación. Por ejemplo, en SiteGround proporcionamos Memcached como parte de nuestros servicios de rendimiento de WordPress, que se pueden activar con un solo clic.
20) Usar un CDN
Si tiene visitantes de diferentes regiones geográficas, es una buena idea usar un servicio CDN como Key CDN, Max CDN o CloudFlare. Los proveedores de CDN esencialmente clonan su sitio web entre múltiples nodos host. Luego, cuando un visitante solicita una URL, se sirve desde el nodo host más cercano en lugar de desde el servidor central. Yoonta ofrece integración gratuita de CloudFlare para sus clientes, pero puede habilitar cualquier otro servicio CDN de su elección.
21) Utilizar SSL usar HTTP/2
SSL protege a sus visitantes y clientes mediante el cifrado de toda la información que viaja entre el navegador y el servidor, garantizando una mayor seguridad para sus usuarios y sus datos. Es esencial para los sitios de comercio electrónico y para aquellos que manejan datos confidenciales y se recomienda encarecidamente para todos los sitios web que sigan desarrollos recientes en la web. Anteriormente, se creía que la certificación SSL ralentizaba su sitio web. ¡Ya no! Si tiene un servidor que admite HTTP / 2 y un certificado SSL que funciona, su tráfico pasará por HTTP / 2.
Si está preocupado por el costo de un certificado SSL, hay una solución gratuita llamada Let´s Encrypt. Con él puede mantener la seguridad de sus sitios web sin comprometer la velocidad.
Conclusión
La optimización de la velocidad es una parte continua e importante de la construcción y el mantenimiento de su sitio de WordPress. Sin la optimización, corre el riesgo de pagar más, perder visitas y conversiones e incluso dañar su marca y reputación.
Al seguir los pasos anteriores, muchos de los cuales se pueden implementar sin un nivel profundo de experiencia técnica, estará bien encaminado para garantizar una experiencia de sitio web óptima para todos sus visitantes.
