Hay un montón de conceptos erróneos acerca de los grandes temas WordPress polivalentes como Avada y el tema X diciendo que podrían mejorar el ranking de su sitio. Es cierto que la mayoría de los temas multifuncionales tienen algo de hinchazón acompañado con ellos (especialmente cuando se emparejan con WooCommerce), pero cuando se optimizan correctamente pueden cargar rápidamente. Así que hoy vamos a echar un vistazo en profundidad al tema multifuncional Total de WordPress y ver qué tan rápido podemos conseguir que se cargue en los servidores de Kinsta. Esta no es la típica revisión del tema de WordPress simplemente indicando las características, ¡vamos a sumergirnos en el tema Total de WordPress!

Tema Total de WordPress

En primer lugar, el tema Total de WordPress es creado por el equipo en WPExplorer, que también ejecuta un blog popular de WordPress que muchos de ustedes probablemente han leído en algún momento. Está actualmente disponible en ThemeForest por $59.00, y 12 meses de apoyo por $17.63 adicionales. Es un tema polivalente moderno que se puede utilizar fácilmente para cualquier tipo de sitio WordPress, desde tiendas en línea (apoya WooCommerce), blogs, foros (soporta bbPress) e incluso sitios de noticias. Cuando se trata de grandes temas polivalentes como este, realmente cualquier cosa es posible. Si puede imaginarlo, puede construirlo. Eche un vistazo a algunos ejemplos de la vida real de sitios usando el tema Total de WordPress. Los sitios de Total tienen muchas formas y tamaños, así que si te preguntas si un sitio utiliza el tema de Total, comprueba nuestra herramienta de detección de temas de WordPress.
2. logotipo de tema total de wordpress

Características

¡Siendo un tema multipropósito tiene un montón de características! No vamos a entrar en todos ellos, pero aquí viene un par de las características importantes a tener en cuenta:

  • Compatible con WPML: facilita la traducción
  • Generador de páginas de arrastrar y soltar (Visual Composer) con más de 90 bloques de construcción
  • Incluye Revolution, deslizadores de capas y tipos de publicaciones personalizadas
  • Compatibilidad con tema hijo secundarios y RTL
  • Optimizado para SEO, compatible con navegadores cruzados y totalmente compatible con la primera indexación móvil
  • Más de 40 demostraciones pre-construidas con datos de demostración XML para prepararse y comenzar rápido
  • Personalizador de temas con más de 300 opciones de temas, fácil de cambiar todo, como Google Fonts
  • Compatible con todos los plugins populares de WordPress como Yoast SEO
  • Actualizaciones gratuitas de temas y soporte directo de desarrolladores

3. tema total de wordpress demostración

Instalación Fresca de WordPress

Comenzamos con una nueva instalación de WordPress en Kinsta (ubicación central de Google Cloud en Google) con el tema Veinte Dieciséis predeterminado instalado. SSL está configurado y HTTPS está habilitado. Antes queríamos realizar unas cuantas pruebas para saber exactamente cuánto tiempo de carga agrega el tema Total. Ejecutamos 5 pruebas de velocidad en Pingdom y tomamos el promedio. Como se puede ver a continuación nuestros nuevos relojes registran 383 ms.

4. prueba de velocidad de intalación fresca de wordpress

Asegúrese de revisar nuestro tutorial en profundidad sobre cómo trabaja Pingdom  y la comprensión del análisis detallado.

Instalación del Tema Total de WordPress

Lo primero que haremos es instalar el tema Total de WordPress e importar los datos ficticios. Puede seguir su documentación de instalación o siga nuestros pasos a continuación.

Paso 1

Se puede comprar el tema Total de WordPress en ThemeForest. En este tutorial, vamos a utilizar los datos ficticios para que seamos más rápidos así seleccionamos «Todos los archivos y documentación» para descargar.

5. descargar tema total de wordpress

Paso 2

A continuación, en el tablero de WordPress haga clic en «Temas» bajo Apariencia. Haga clic en «Añadir nuevo» y luego «Subir tema». Deberá seleccionar el archivo «Total.zip» dentro de la carpeta del tema.

\themeforest-6339019-total-responsive-multipurpose-wordpress-theme\Total-3.6.0\Installable-Theme\Total.zip

Dependiendo de la velocidad de su host de WordPress, puede tardar unos segundos en instalarse.

6. instalar tema total de wordpress

Paso 3

Luego haga clic en “Activar.”

7. activatar tema total de wordpress

Paso 4

El tema Total requiere unos cuantos plugins que deberá instalar para acceder a todas las funciones incluidas. Seleccione los plugins recomendados y haga clic en «Instalar».

8. instalar plugins

Paso 5

Luego necesitamos instalar los datos de demostración. Bajo el «Importador de Demo», haga clic en el tema «Base Lite». Se puede hacer todo el tema «Base», pero esto no es recomendable, ya que es muy grande. El Base Lite es una versión ligeramente despojada.

9. datos de instalación del tema total demostración

Paso 6

A continuación, le pedirá que instale «WooCommerce». Si no está usando esto, le recomendamos dejarlo deshabilitado, ya que WooCommerce puede agregar carga innecesaria. Sin embargo, para este tutorial lo habilitaremos para poder optimizarlo más tarde. Simplemente haga clic en él y se instalará, a continuación, haga clic en «Siguiente».

10. demostación del tema total

Paso 7

Si está ejecutando una instalación nueva, seleccione todo el contenido y haga clic en «Confirmar importación». Dependiendo de la velocidad de su host de WordPress, puede tardar unos minutos en importar todo el contenido. En los servidores de Kinsta sólo tomó alrededor de 20 segundos.

11. importar datos del tema total

¡Y eso es! Sus datos de demostración ahora son importados y su sitio WordPress debería verse ahora como el demo de Base Lite como se ve a continuación.

12. tema total de wordpress base lite

Configuración de WooCommerce – Opcional

Si utiliza WooCommerce, se le pedirá que finalice el asistente de configuración. Eche un vistazo a nuestro tutorial en profundidad sobre cómo configurar WooCommerce. Hicimos la configuración de WooCommerce para los siguientes ejemplos.

13. asistente de configuración de woocommerce

Optimización del Tema Total de WordPress

¡Ahora viene la parte divertida! Vamos a ver cómo optimizar el tema Total de WordPress un poco. Primero, necesitamos obtener una velocidad básica para empezar. Así que ejecutamos 5 pruebas de velocidad en Pingdom y tomamos el promedio. Como se puede ver a continuación nuestra velocidad de línea de base con los datos de demostración instalados registraron 1.06 segundos, con 54 solicitudes HTTP y un tamaño de página total de 1.4 MB.

14. tema total velocidad básica

Paso 1 – Sincronizar Google Analytics Localmente (Opcional)

Casi todo el mundo usa Google Analytics, por eso nosotros lo utilizaremos también en nuestras pruebas, ya que el 99% de las personas que usan el tema Total de WordPress probablemente lo tienen en ejecución. Así que nosotros también. El plugin Complete Analytics Optimization Suite (CAOS) gratuito le permite sincronizar localmente el script de Google Analytics y a su vez puede acelerar ligeramente las cosas.

15. plugin CAOS

Decimos que esto es opcional porque Google no recomienda oficialmente este método, sin embargo, hemos utilizado esto en un par de sitios de tráfico intenso y trabaja muy bien. Sincronizando el script de Google Analytic a nivel local, puede ayudar a mejorar su capacidad de advertencia y velocidad del leverage browser cache debido al hecho de que el navegador del usuario no tiene que tardar en descargar el archivo desde el servidor externo de Google. A continuación, se muestra un ejemplo de las diferencias con el plugin anterior instalado. Siéntese libre de probarlo en su propio sitio y ejecutar sus propias pruebas.

Google Analytics Normal Instalado

Primero, ejecutamos 5 pruebas en Pingdom con Google Analytics instalado de la manera normal. Como puede ver, solo agregando Google Analytics añade aproximadamente 25 segundos a nuestro tiempo de carga total y 4 solicitudes HTTP adicionales. El equipo en WPExplorer hizo un gran trabajo en el tema polivalente Total, ya que estos son tiempos de carga bastante rápidos para empezar. Y por supuesto, los servidores de Kinsta están bien optimizados para garantizar un rendimiento excelente. Kinsta utiliza la cache al nivel de servidor por lo que no se necesita ningún plugin de cache.

16. script normal de google analytics

Google Analytics Sincronizado Localmente

Luego, con el plugin CAOS mencionado anteriormente, lo configuramos para sincronizar Google Analytics localmente. Entonces ejecutamos otras 5 pruebas en Pingdom. Esto hace que nuestras solicitudes HTTP totales disminuyan en 2 y nuestro tiempo de carga hasta 1.26 segundos. No es mucho, pero ligeramente más rápido que la configuración normal de Google Analytics.

17. velocidad local de google analytics

Paso 2 – Desactivar Embebidos

Si no utiliza embebidos automáticos, lo primero que debe hacer es desactivar las este tipo de contenido. Esto genera una solicitud HTTP adicional en su sitio de WordPress (como se ve a continuación) para cargar el archivo wp-embed.min.js. Y esto se carga en cada página.

18. script de embebidos de wordpress

Si bien este archivo es de sólo 1.2 KB, cosas como estas se suman con el tiempo. La solicitud en sí es a veces una operación más grande que el tamaño de la transferencia directa del contenido. La forma más sencilla de hacerlo es simplemente instalar un plugin gratuito llamado Disable Embeds.

plugin de desactivar embebidos wordpress

Si está interesado en otras maneras de hacerlo, vea nuestro post en profundidad sobre cómo deshabilitar embedidos. Ejecutamos 5 pruebas adicionales en Pingdom. Esto reduce nuestras solicitudes HTTP totales a 1 y nuestro tiempo de carga hasta 1.25 segundos. Una vez más, recuerda que todas estas cosas se suman para al tiempo hasta que terminemos.

20. prueba de velocidad con desactivación embebidos

Paso 3 – Retirar Cadenas de Consulta de las URLS

Otro problema común es tratar las cadenas de consulta. Normalmente, los archivos CSS y JavaScript tienen la versión de archivo al final de sus URL, como https://domain.com/file.min.css?ver=4.5.3. Algunos servidores y servidores proxy no pueden almacenar en cache cadenas de consulta. Así que mediante la eliminación de ellas a veces puede mejorar su cache. Hay plugins gratuitos como Query Strings Remover que puede hacer esto para usted automáticamente en WordPress.

plugin para retirar cadenas de consulta

Luego ejecutamos otras 5 pruebas en Pingdom. Como puede ver, no mejoró nuestra velocidad, pero sí mejoró nuestro rendimiento. Lo elevó de un 93 a un 99.

21. velocidad con retiración de cadenas de consulta

Vea nuestro tutorial en profundidad sobre cómo retirar cadenas de consulta de URLs.

Paso 4 – Optimización de Imágenes

El siguiente paso es ejecutar la optimización de imágenes en nuestra biblioteca de medios de WordPress. Esta una de las optimizaciones más importantes que puede realizar, ya que las imágenes representan, en promedio, más del 60% del peso de una página. Especialmente si estás utilizando imágenes grandes en su control deslizante en el tema Total. En este ejemplo, estamos usando el plugin Imagify Image Optimizer del equipo en WP Rocket.

imagify image optimizer

En el plugin entramos en “Optimización en lote» bajo la biblioteca de medios. Dejamos el nivel de compresión por defecto de Aggressive establecido y hacemos clic en «Imagif’em all.» ¡Fuimos capaces de ahorrar 7.63mb de 11.89mb! Todo con un solo clic.

22. velocidad después de optimización de biblioteca multimedia de wordpress

Luego ejecutamos otras 5 pruebas en Pingdom. Esto redujo nuestro tiempo de carga otra vez y redujo nuestro tamaño total de la página por el 30%. Las imágenes predeterminadas incluidas en los datos ficticios son bastante pequeñas, así verán ganancias de rendimiento mucho más rápidas cuando se ejecute esto en un sitio en vivo no optimizado.

23. velocidad desdpués de optimización de imágenes

Paso 5 – Activar un CDN

El siguiente paso es habilitar una red de distribución de contenidos (CDN) en tu sitio. Esto nos permite mostrar el contenido más rápidamente en todo el mundo.

Los clientes de Kinsta pueden utilizar la CDN de Kinsta que viene con su configuración. Esto, junto con la función de minificación de código, están incorporadas directamente en el panel de control de MyKinsta. Esto permite a los clientes habilitar la minificación automática de CSS y JavaScript con un simple clic, acelerando de manera efectiva sus sitios sin ningún esfuerzo manual.

24. prueba de velocidad con cdn

Paso 6 – Desactivar Scripts Innecensarios en la Página Principal

Otra forma de acelerar el sitio es desactivar los scripts innecesarios para que no se carguen en la página principal y en el resto del sitio. WooCommerce tiene algunos scripts que no son requeridos de cargar en la página principal. Y si no está utilizando la función de lightbox, también puede desactivarla. Para ello utilizamos el plugin Gonzalez premium que nos permite deshabilitar individualmente los scripts de nuestra elección, como los siguientes.

//wpdev.ink/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js

//wpdev.ink/wp-content/plugins/woocommerce/assets/css/woocommerce.css
//wpdev.ink/wp-content/themes/Total/assets/css/wpex-woocommerce-responsive.css
//wpdev.ink/wp-content/themes/Total/assets/lib/ilightbox/minimal/ilightbox-minimal-skin.css

25. desactivar scripts

Después ejecutamos otras 5 pruebas en Pingdom. Esto nos llevó a un tiempo de carga de 1.18 segundos y redujo nuestro número total de solicitudes HTTP por 5.

26. velocidad después de desactivar scripts innecesarios

Paso 7 – Optimización de a Velocidad de Slider Revolution

No somos fanáticos de los deslizadores, pero todavía se los usan. Afortunadamente, hay algunas cosas que se puede hacer en los ajustes de Slider Revolution para acelerarlo. Recomendamos encender las opciones «Insertar JavaScript en pie de página» y «Aplazar Carga de JavaScript».

27. optimización de revolution slider

Luego ejecutamos otras 5 pruebas en Pingdom. Esto nos llevó a un tiempo de carga de 1.15 segundos.

28. velocidad después de optimización de revolution slider

Un problema que encontramos con Slider Revolution es que por defecto no cargará todos sus activos de la CDN. Hemos visto que los siguientes scripts seguían cargando desde nuestro servidor de origen:

https://wpdev.ink/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.slideanims.min.js

https://wpdev.ink/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.layeranimation.min.js
https://wpdev.ink/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.navigation.min.js

Esto es algo que probablemente debería tratarse con el desarrollador del plugin.

No Olvidarse de  HTTP/2

También es importante recordar que mediante HTTP/2, ya no es necesaria la concatenación (combinación) de los scripts. En algunos casos, incluso puede ralentizar su sitio ahora. Para probar esto instalamos el plugin Autoptimize, habilitando optimización de HTML/CSS/JS, Así como la opción CDN. Entonces ejecutamos otras 5 pruebas en Pingdom. Al final, en realidad no ayudó al sitio en absoluto, y en realidad fue más lento. Con HTTP / 2 y paralelismo, hace un gran trabajo al cargar múltiples archivos pequeños rápidamente. Sin embargo, si todavía no está ejecutando HTTPS, que es lo que requiere HTTP / 2, ¡el complemento Autoptimize puede ayudar mucho!

29. concatenación de http2 scripts

Resumen

En general, quedamos bastante impresionados con el tema Total de WordPress del equipo en WPExplorer. Gracias a los servidores rápidos de Kinsta, incluso una nueva instalación del mismo con Google Analytics se registró en unos rápidos 1.26 segundos. Y una vez optimizado un poco, un tiempo de carga de 1.15 segundos es bastante rápido para un sitio con WooCommerce instalado! Si esta revisión del tema Total de WordPress fue útil, háganoslo saber a continuación en los comentarios. Podríamos hacer otro tutorial profundo en el tema Avada o Tema X si desea.

Brian Jackson

Brian tiene una gran pasión por WordPress, lo ha estado utilizando durante más de 10 años e incluso ha desarrollado un par de plugins premium. Brian disfruta de los blogs, las películas y el senderismo. Conéctese con Brian en Twitter.