10 formas fáciles de acelerar su sitio de WordPress [estudio de caso]

Muchos elementos hacen un sitio web exitoso: diseño, contenido, SEO, compatibilidad con dispositivos móviles, por nombrar solo unos pocos. Sin embargo, algo que se ha vuelto cada vez más importante con el tiempo es la velocidad del sitio. Los consumidores están impacientes. Si un sitio web tarda demasiado en cargarse, va a otra cosa. ¿Cuánto tiempo antes de que tengan picazón en los pies? Dos segundos, eso. El problema se ve exacerbado por el hecho de que los visitantes usan dispositivos en gran parte móviles que a menudo tienen una conexión de datos más lenta que las computadoras y computadoras portátiles de escritorio. Como resultado, los usuarios de WordPress tienen dificultades para hacer sus sitios lo antes posible. Sin embargo, hacer esto puede parecer una tarea desalentadora que requiere mucho conocimiento técnico.
Para que sea más accesible, en este artículo le mostraremos algunas formas simples de hacer que su sitio de WordPress sea más rápido. Sin embargo, en lugar de decirle solo qué hacer, demostraremos todo con un ejemplo práctico. A continuación, intentaré acelerar mi propio sitio web y mostrarle cada paso, incluidos los resultados antes y después. Movemos directamente a eso. Lo primero que primero: copia de seguridad durante el proceso de acelerar su sitio de WordPress, puede hacer cosas que pueden desconectarlo o interrumpirlo. Por esta razón, comenzaremos con lo que siempre debemos hacer cuando intentemos hacer cambios importantes en nuestro sitio: hacer una copia de seguridad.
Con una nueva copia de seguridad, puede volver a cómo estaban antes, si algo no va bien. Entonces, como primer paso, descargué tanto los archivos del sitio como la base de datos. Si está siguiendo, le aconsejo que haga lo mismo. Si lo hace manualmente o a través del complemento, depende de usted. Paso 1: Evalúe el daño después de hacer una copia de seguridad, es hora de verificar cuánto trabajo hemos hecho. Esto significa ver cómo funciona actualmente el sitio en términos de velocidad de carga de la página. Solo si tiene datos antes/después, puede ver si sus acciones han marcado la diferencia. Para ser honesto, ya que no había hecho nada sobre la optimización de la velocidad en mi sitio, tenía un poco de miedo. Para evaluar el desafío, utilizamos estas herramientas: Pingdom
Gtmetrix
Google PageSpeed ​​Insights
Después de conectar mi URL a cada uno de estos sitios para ver cómo evaluar el rendimiento del sitio, el juicio Gtmetrix fue bastante duro:
Pingdom, por otro lado, pintó una imagen un poco más amigable:

Cada sitio también ofrece un diagrama en cascada que muestra qué parte de la solicitud del sitio requiere cuánto tiempo:

En aras de la finalización, hice una prueba rápida con Google PageSpeed ​​Insights para verificar el rendimiento móvil (pista: no fue bueno). Afortunadamente, todas las herramientas de prueba proporcionan información sobre cómo mejorar la velocidad de carga de mi página. El más recomendado fue:

Activar la compresión
Use el almacenamiento de su navegador en caché
Reducir las solicitudes HTTP
Eliminar JavaScript y CSS por encima del pliegue
Optimizar las imágenes
Reducir CSS y JavaScript
Reducir el tiempo de respuesta del servidor
De acuerdo, ahora que sabía a lo que me enfrentaba, la pregunta era cuánto podía implementar. En primer lugar, era hora de una limpieza de primavera. Paso 2: Elimine complementos y temas innecesarios Una de las cosas que noté durante la copia de seguridad fue que tengo demasiados archivos. Por lo general, esta es una señal de que hay algunos complementos en el sitio que realmente no uso. El problema con esto: muchos complementos agregan cosas al encabezado del sitio que están cargando cada vez que alguien pide verlos. Como vi anteriormente, las solicitudes HTTP son una de las cosas que realmente pueden ralentizar un sitio, por lo que mi primer paso fue conectar y ordenar la lista de complementos. Eliminé todo lo que realmente no uso y he deshabilitado los complementos que solo uso ocasionalmente. En mi caso, esto ha eliminado cinco complementos. Mientras estaba en esto, también hice una parada rápida en mi menú temático para ver si hay algo que ya no necesito.
Por supuesto, tendría sentido hacer todas estas cosas antes de la copia de seguridad, pero quería una imagen clara antes y después de mis mejoras. Paso 3: Ejecute el perfilador de rendimiento del complemento Cuando no esté seguro de por qué los complementos que puede manejar, el perfilador de rendimiento del complemento lo ayuda. Es un complemento que, como su nombre, escanea los complementos en términos de rendimiento y es útil para identificar a aquellos que ralentizan su sitio. Aunque han pasado dos años desde la última actualización, el complemento todavía parece funcionar. Simplemente puede instalarlo en su sitio y luego iniciar un escaneo en herramientas> P3 Plugin Profiler. Esto lo deja con un desglose de cuánto tiempo debe cargarse cada complemento. Una vez que sepa exactamente qué complementos hacen su sitio lentamente, puede deshacerse de ellos por completo o buscar alternativas. En mi caso, los complementos agregaron casi un segundo a cargar mi página. Es bastante y tuve que encontrar formas de reducir este número. Noté que realmente no necesito resaltado de sintaxis de crayón y que también podría deshacerme de Google Analytics para WordPress, porque rara vez reviso mi análisis en mi sitio. Para el futuro, también consideraría la codificación dura de mis tipos de publicaciones personalizadas, por lo que ya no tengo que cargar los tipos de complementos completos, sin embargo, este es un paso para otro momento.
Paso 4: Actualice todo más allá, es hora de actualizar. Mantener WordPress, los temas y los complementos no solo le brinda acceso a las últimas funciones, sino que también le permite aprovechar cualquier mejora de velocidad. Como resultado, mi sitio tenía muchas actualizaciones notables de complementos y aún no he actualizado la última versión de WordPress, por lo que me ocupé de esto en las actualizaciones del tablero>. La actualización también es una de las principales razones para la copia de seguridad al principio. A veces las cosas salen mal durante el proceso, en cuyo caso siempre es mejor tener una copia de su sitio. antes de seguir adelante. Resulta que también necesitaba una actualización temática para funcionar con la última versión de WordPress, así que lo hice rápidamente. Paso 5: optimice su base de datos porque tratamos con la mitad del sitio, ahora es el momento de volver a la otra mitad de la base de datos. Si ha leído nuestro artículo sobre la limpieza de la base de datos, es posible que con el tiempo pueda acumular mucho peso. Cuando esto sucede, puede ralentizar seriamente la recuperación de datos para cualquier solicitud del sitio.
Para optimizar la base de datos, utilicé el complemento WP Optimize mencionado en el artículo anterior.Puede ayudar a eliminar las sobrecargas de datos de las tablas de la base de datos, así como entradas innecesarias, como las versiones antiguas de las publicaciones y otras.Al hacer esto, no solo lanzé más de 200 MB en mi base de datos, sino que también me hice realidad, sino que también limité la cantidad de revisiones publicadas que WordPress crea para evitar que mi base de datos se vuelva demasiado grande en el futuro.Puede encontrar instrucciones sobre cómo hacer esto al publicar sobre la limpieza de la base de datos.Paso 6:

Optimizar imágenes de imágenes a menudo representa la mayoría de cualquier página web, especialmente si se compone de elementos visuales, al igual que la página inicial de mi sitio. Por esta razón, las imágenes deben optimizarse tanto como sea posible. Esta es también una de las recomendaciones dadas para mi sitio web de Google PageSpeed ​​Insights, especialmente para la versión móvil. En general, hay varias formas de optimizar las imágenes. El primero es usar solo imágenes tan grandes como debe aparecer en su sitio. Esta es también la razón por la cual WordPress crea varias versiones de cada visual que carga para que pueda usar lo más pequeño posible. Una segunda forma de reducir el tamaño de las imágenes es el uso de la compresión. Esto significa eliminar datos que no son necesarios. Puede usar un servicio como TinyPng o un complemento como Smush.it para hacerlo. Ya comprimí mis fotos cuando las creé con Photoshop. Para continuar tratando de mejorar su rendimiento, decidí darle un giro de fotones. Photon es uno de los módulos en Jetpack (un complemento que ya está en mi sitio), prometiendo dar a los navegadores solo las dimensiones de la imagen que necesitan y también para alojar imágenes en su red de entrega de contenido para una entrega. Más rápido. No tengo experiencia real con esto, por lo que será divertido ver qué sale de eso. Paso 7:
Active bien la compresión, ahora que hemos cubierto todos los elementos básicos, es hora de pasar a cosas más técnicas. En primer lugar, quería activar la compresión GZIP. Al igual que en su computadora, esto significa que archiva los archivos para que los haga más pequeños para que los navegadores necesiten menos tiempo para descargarlos. Ya tenemos un artículo sobre cómo activar la compresión GZIP en WordPress, por lo que no repetiré todo aquí. Debido a este artículo, comenzar la compresión fue tan fácil como copiar el código proporcionado y pegarlo al archivo. Htaccess de mi servidor. Guardar y listo. Paso 8: Active la memoria del navegador en el caché Una de las formas más recomendadas de acelerar mi sitio era comenzar a memorizar el navegador en el caché. La memoria del navegador en caché es prácticamente para decirle a los navegadores de sus visitantes que almacenen partes del sitio en disco duro para uso futuro. De esta manera, los recursos que no cambiarán probablemente se pueden reutilizar la próxima vez que pasen y no deben descargarse nuevamente. En WordPress, puede elegir más complementos de almacenamiento en caché, el caché total W3 más famoso y WP Super Cache. Ambos pueden hacer todas las cosas necesarias para memorizar el sitio web en el caché. Se dice que WP Super Cache es más fácil de usar si es un principiante. Como me gusta ser un poco más técnico de vez en cuando, opté por copiar el fragmento del código del excelente artículo de Daniel Pataki sobre cómo usar el almacenamiento en caché del navegador e ingresarlo a mi archivo .htaccess (donde ya he pegado el código un gzip activo). compresión). Fácil de sacudir. Paso 9:
Minimiza y combina una de las mejores formas de reducir la cantidad de solicitudes HTTP hechas por el navegador es minimizar y concandir los archivos CSS y Javscript. Estas palabras solo significan eliminar todo el formato dentro de los archivos que las hacen legibles para los humanos (espacio, muescas, comentarios y todo lo que no necesitan) y su combinación en uno. Como resultado, el navegador debe descargar cada vez menos archivos para que se pueda cargar el sitio. Un complemento que promete que hará esto por usted es autoptimizado, que quería probar para mi sitio. Es igual de fácil instalar y elegir lo que desea que el complemento optimice. Paso 10: Cuida las pequeñas cosas en su mayor parte, eso fue. Se ocupamos de problemas más grandes. Ahora, todo lo que queda es echar un vistazo al diagrama de cascada para ver qué cosas más pequeñas se destacan. Por ejemplo, noté que falta un archivo, llamado logo.png.
Corregí esto poniendo el archivo en su lugar, eliminando así el inútil tiempo de espera. También noté que estaba cargando más estilos de fuentes en mi sitio, aunque realmente uso uno de ellos. Esto podría corregirse rápidamente en funciones.php. ¡Trastorno de tambor de resultados finales! ¿Estás listo para los resultados? Y yo. Aquí están ellos:

En Pingdom, mi sitio pasó de 82 a 90 y redujo el tiempo de carga en casi un segundo. Al mismo tiempo, el tamaño de la página se redujo casi la mitad, y las aplicaciones enviadas al servidor se redujeron en 12.
La imagen en GTMetrix es similar.El sitio ha pasado de una D y una E a evaluaciones sólidas B. Si bien el tiempo de carga de la página realmente ha aumentado, GTMTRIX también muestra la reducción del tamaño de la página y las solicitudes.No está mal durante una hora de trabajo, ¿verdad?Sin embargo, hay más para mejorar y hundirse en la cascada, vemos cuál debe ser el siguiente paso: