Prueba de rendimiento los temas de WordPress más vendidos en ThemeForest

El rendimiento es uno de los aspectos más importantes de cualquier sitio web, pero es algo que las personas rara vez toman en cuenta al comprar temas de WordPress. En este resumen, analizaremos los diez temas más vendidos en Themeforest, en orden de aparición, los analizaremos a través de algunas pruebas básicas de rendimiento y veremos qué conclusiones podemos extraer..

Los temas elegidos

La lista de temas de WordPress más vendidos de ThemeForest se actualiza semanalmente, pero a menudo verás a jugadores conocidos que ocupan los primeros lugares durante algún tiempo. Hemos tomado los diez primeros (que se muestran a continuación) y los hemos enfrentado entre sí con algunas pruebas de rendimiento comunes.

Temas de WordPress más vendidos - actualizados semanalmente

Los exámenes

Hay muchas herramientas disponibles para probar sitios web, hemos elegido algunos clásicos: Google Pagespeed Insights, Webpagetest.org, Pingdom y Chrome dev tools. La mayoría comentará qué tan rápido se carga una página web, su peso general, la eficiencia con la que se canalizan sus activos y, en última instancia, otorga algún tipo de puntuación. Realizamos una demostración de cada tema a través de estas herramientas y compilamos las figuras (ver tabla al final del post).

Además de estas pruebas, utilizamos el complemento de auditoría de accesibilidad para las herramientas de desarrollo de Chrome. Esto no está conectado con el rendimiento como tal, pero los resultados siempre dan una idea de cómo se construye un tema.

Algunas cosas a tener en cuenta:

  • Estas demostraciones son todas alojadas por los autores de los temas individuales. Las especificaciones de alojamiento no son todas iguales.
  • Se eligió una demostración aleatoria donde había múltiples opciones disponibles. WooCommerce, BuddyPress o cualquier otro complemento de la plataforma se evitaron siempre que fue posible. Tampoco se utilizaron temas abiertamente basados ​​en imágenes (como las carteras de fotografías).
  • Todas las URL fueron probadas desde California, donde fue posible.
  • Los resultados precisos pueden variar día a día..
  • Las demostraciones de temas a menudo se crean para generar un impacto visual, lleno de imágenes de alta calidad y la mayor funcionalidad posible. Esto significa que las demostraciones rara vez son un reflejo preciso de cómo se verá y se comportará un sitio web resultante. Es probable que, con su propia copia, mejore las puntuaciones de rendimiento de todas estas demostraciones..
  • Todos los autores de temas son bienvenidos a mejorar sus puntuaciones en estas demostraciones. El artículo será actualizado para reflejar los nuevos números..

Avada

Avada: Demo creativa.
  • Información de Pagespeed móvil: 73%
  • Desktop de insights de Pagespeed: 88%
  • Webpagetest.org: Rectas A: AAAAA☑
  • Pingdom: 92% (grado A)
  • Velocidad de carga de pingdom: 0,97 s
  • Peso de la página de herramientas de desarrollo de Chrome: 1.3Mb
  • Auditoría de accesibilidad: 94% de puntuación (excelente). Los atributos de ARIA siguen las mejores prácticas, los elementos están bien estructurados, las etiquetas meta se usan correctamente.

Excelentes puntajes en todos los ámbitos. Las pruebas iniciales fueron menos sólidas, pero ThemeFusion pudo mejorar significativamente los números al optimizar las imágenes utilizadas en esta demostración. La puntuación del escritorio de Pageview Insights pasó de 48% a 88% puramente en la parte posterior del peso de la imagen, ¡mostrando cuán importante es la optimización de la imagen! Es bueno ver que Avada también está construido teniendo en cuenta la accesibilidad..

El7

The7: demo de construcción
  • Información de Pagespeed móvil: 64%
  • Escritorio de insights de Pagespeed: 91%
  • Webpagetest.org: A en todos los ámbitos. AAAAA☑
  • Pingdom: 68% (grado D)
  • Velocidad de carga de pingdom: 1.51 s
  • Peso de la página de herramientas de desarrollo de Chrome: 1.3Mb
  • Auditoría de accesibilidad: 83% de puntuación (nada mal). Faltan algunos elementos de la imagen. alt atributos, relación de contraste de color podría ser mejor en algunos de los textos (en relación con su fondo). Pero en general, los elementos están bien estructurados y la accesibilidad es sólida..

En general, esta demo carga bastante rápido; sus imágenes y recursos no son demasiado pesados, y la página se puede usar relativamente pronto después de cargarla. Sin embargo, su grado de Pingdom no es óptimo. Las mejoras se podrían realizar combinando algunos de JavaScript, al igual que el CSS, mientras que el almacenamiento en caché se podría hacer más fácil al no forzar los números de versión en los nombres de archivo (por ejemplo: /assets/css/settings.css?ver=5.4.5.2).

BeTheme

BeTheme: demo 3D
  • Información de Pagespeed móvil: 76%
  • Escritorio de insights de Pagespeed: 87%
  • Webpagetest.org: AAAAA☑ de Straight A
  • Pingdom: 98 (un grado)
  • Velocidad de carga de pingdom: 1.27 s
  • Peso de la página de herramientas de desarrollo de Chrome: 1.8Mb
  • Auditoría de accesibilidad: 80% se queda corto en cuanto a los ratios de contraste (este es un tema bastante oscuro y melancólico) y su uso imperfecto de los roles ARIA.

Este tema se carga muy rápidamente. Gran parte de su contenido visible se prioriza al incluir estilos esenciales en línea en el cabeza, y gran parte de lo que está cargado está minimizado y concatenado. Como suele ser el caso, las imágenes representan la mayor parte del peso de la página (69.5%), por lo que no sería difícil obtener la página de inicio de esta demostración por debajo del umbral de oro de 1Mb..

Impreza

Impreza: demo restaurante
  • Información de Pagespeed móvil: 63%
  • Desktop de insights de Pagespeed: 68% 
  • Webpagetest.org: FAABF☒
  • Pingdom: 80% (grado B)
  • Velocidad de carga de pingdom: 2,34 s
  • Peso de la página de herramientas de desarrollo de Chrome: 2.5Mb
  • Auditoría de accesibilidad: 94% (excelente). Atributos utilizados correctamente en los elementos, incluidos los roles ARIA. Nombres de elementos discernibles y contenido bien descrito..

Si bien la velocidad de carga de la demostración del restaurante Impreza no es mala, sus puntuaciones de rendimiento se ven obstaculizadas por más de 2Mb de imágenes. También es de destacar la falta de CDN y el mal tiempo de respuesta del servidor; dos aspectos que son específicos del alojamiento de esta demostración y los que puede mejorar fácilmente. 

Envolver

Enfold: demo de gimnasio
  • Información de PagesPeed móvil: 60%
  • Pagespeed insights desktop: 60%
  • Webpagetest.org: AAADB☒
  • Pingdom: 70% (grado C)
  • Velocidad de carga de pingdom: 2,79 s
  • Peso de la página de herramientas de desarrollo de Chrome: 5.2Mb
  • Auditoría de accesibilidad: 89% Una de las demostraciones temáticas de mayor puntuación para accesibilidad, que muestra una fortaleza subyacente en su calidad de construcción..

Nuevamente, no se usa CDN para hospedar esta demostración, lo que la pierde algunos puntos en webpagetest.org. La falta de HTTPS también podría haber ganado una marca negra de Enfold. Como de costumbre, esta demostración cae en la trampa de ser lo más visualmente impresionante posible, sacrificando el peso de la página por la calidad de la imagen. Con más de 5Mb, este es el peso pesado del grupo, pero el tamaño de la imagen siempre es algo fácil de remediar.

X

X: demo de la iglesia
  • Información de PagesPeed móvil: 77%
  • Pagespeed insights desktop: 74%
  • Webpagetest.org: DFAAB☒
  • Pingdom: 87% (grado B)
  • Velocidad de carga de pingdom: 2,45 s
  • Peso de la página de herramientas de desarrollo de Chrome: 2.1Mb
  • Auditoría de accesibilidad: 91% Una puntuación A11y muy saludable, solo decepcionada por la falta de alt atributos en algunas imágenes, baja relación de contraste en algunas áreas (este tema de la iglesia es bastante mudo) y ausencia de un título atribuir en un iframe. Sin embargo, dado que el iframe es de una incrustación de YouTube, que no viene con un atributo de título como estándar, perdonaremos esa supervisión.

Esta demostración es una de las pocas que realiza un trabajo razonable manteniendo los gastos generales de imagen al mínimo; webpagetest le otorga un sólido 97/100 para la compresión de imágenes. En cambio, sus puntuaciones bajas provienen en gran parte del alojamiento; sin CDN, sin HTTPS, tiempo de respuesta inicial deficiente y falta de "mantener vivo", también conocido como conexión HTTP persistente, algo que se puede activar fácilmente. Como siempre, mejoras fáciles que usted mismo podría llevar a cabo..

Puente

Bridge: Spa demo
  • Información de Pagespeed móvil: 78%
  • Escritorio de insights de Pagespeed: 91%
  • Webpagetest.org: AAAAA☒
  • Pingdom: 80% (grado B)
  • Velocidad de carga de pingdom: 1.11 s
  • Peso de la página de herramientas de desarrollo de Chrome: 1.6Mb
  • Auditoría de accesibilidad: 91% (muy buena). Los puntos pequeños reducen el puntaje general, pero los atributos de ARIA siguen las mejores prácticas, y los elementos de la página tienen nombres discernibles, describen bien su contenido y están bien estructurados.

Una de las demostraciones más ligeras aquí, pero los controles deslizantes de imagen siempre aumentarán el peso de la página, incluso con imágenes bien optimizadas como estas. La reducción de HTML y otros activos hubiera ayudado a que la información de Pagespeed móvil obtuviera una puntuación, aunque la puntuación del escritorio es extremadamente buena. El alojamiento mejorado volvería a hacer maravillas: un mejor tiempo de respuesta del servidor, un CDN y el almacenamiento en caché es un tema de poca importancia.

Flatsome

Flatsome: Ir explorar demo
  • Información de Pagespeed móvil: 53%
  • Desktop de insights de Pagespeed: 57%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 96% (grado A)
  • Velocidad de carga de pingdom: 1.02 s
  • Peso de la página de herramientas de desarrollo de Chrome: 3.7Mb
  • Auditoría de accesibilidad: 83% de puntos perdidos en el frente de A11y al no nombrar correctamente los botones (los lectores de pantalla no pueden leer correctamente los íconos de la lista de deseos de WooCommerce) y algunos enlaces son igualmente vagos. El bajo contraste en algunos elementos y las ID de elementos duplicadas también son soluciones fáciles.

No visto a través de los ojos favorables por Pagespeed Insights, aunque las otras métricas de puntuación adoran a Flatsome. El buen alojamiento sirve a la página de manera eficiente (los autores de los temas toman nota), los activos se minimizan y las imágenes de carga lenta ayudan a lo que de lo contrario sería una carga de páginas de peso medio progresivamente.

Júpiter

Jupiter: Plantilla Bellona
  • Información de Pagespeed móvil: 38%
  • Pagespeed insights desktop: 44%
  • Webpagetest.org: AAAFA☑
  • Pingdom: 92% (grado A)
  • Velocidad de carga de pingdom: 1.07 s
  • Peso de la página de herramientas de desarrollo de Chrome: 3.3Mb
  • Auditoría de accesibilidad: 91% (muy buena). Debido a la naturaleza impactante de los gráficos (que a mi me encantan, por cierto), el texto de algunas de las imágenes hace que las relaciones de contraste sean débiles. La estructura de la página y el uso descriptivo de los elementos, junto con el uso adecuado de ARIA, compensan las deficiencias de contraste..

Voy a sonar como un disco roto aquí, pero cinco minutos de optimización de la imagen reducirían enormemente los gastos generales en esta demostración.. home-bg-08.jpg solo pesa casi un megabyte entero; ejecutarlo a través de TinyPNG elimina el 87% directamente. ¿Por qué no lo harías? Como lo sugieren Pingdom y Webpagetest, la mayoría de los otros aspectos de rendimiento son muy buenos..

Periódico

Periódico: noticias tecnológicas
  • Información de Pagespeed móvil: 76%
  • Escritorio de insights de Pagespeed: 77%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 93% (grado A)
  • Velocidad de carga de pingdom: 1.19 s
  • Peso de la página de herramientas de desarrollo de Chrome: 1.5Mb
  • Auditoría de accesibilidad: 86% Se podría mejorar una buena puntuación al describir correctamente los enlaces y botones que en realidad se usan para los controles de JavaScript, alternar y similares.

Excelentes puntuaciones en general, se aplican mejoras estándar (optimización de la imagen, compresión y concatenación JS y CSS), pero tenga en cuenta que esta demostración también viene con un gran despliegue que promueve otras versiones del tema (complicación adicional que su propia versión ser poco probable que necesite). Sin mucho esfuerzo, esta demostración podría ingresar a la categoría de peso sub-1Mb.

Cómo hacer que tu sitio de WordPress sea más rápido

Así que eso concluye nuestro resumen de puntuaciones. Habiendo comprado un tema de WordPress, ¿cómo podría optimizar el sitio que construye con él??

No le sorprenderá: un primer puerto de llamada fácil cuando optimice su sitio web son sus imágenes. Elimine las imágenes no deseadas, comprima las que necesite, guarde los archivos JPEG como "progresivos" (para que haya al menos algo que ver mientras se cargan) y tendrá un buen comienzo. También es posible que desee instalar un complemento de carga diferida para llevar las cosas un paso más allá. Hemos visto que muy pocas de estas demostraciones dan prioridad a la optimización de la imagen, pero al menos eso significa que podrá mejorar sus puntuaciones..

Con respecto a las notorias puntuaciones de Pagespeed Insights, te habrás dado cuenta de que todas estas demostraciones (con la excepción de una) tienen una mejor puntuación para el escritorio que sus versiones móviles. Esto ya no refleja la forma en que se usa la web, por lo que para mantener contentos a Google (y a los usuarios), considere cuidadosamente el rendimiento de los dispositivos móviles. Una primera actitud móvil también ayudará a tu SEO.

¿Cómo puedes hacer esto? Concatenar y minimizar CSS y JavaScript puede ser difícil con WordPress; el uso de complementos de terceros significa que los archivos pueden ser muchos y no tendrá mucho control sobre ellos sin ayuda. Aún así, haga su mejor esfuerzo para incluir estilos de "vista inicial" vitales en línea en el y haga que su sitio web sea utilizable lo más rápido posible al evitar que los scripts de "bloqueo de procesamiento" ralenticen el proceso de carga. Si el control deslizante en la parte superior de la página de inicio requiere que se cargue toda la página antes de que aparezca, Google lo penalizará..

Más allá de eso, considere su alojamiento. Habilitar la compresión GZIP. HTTPS tampoco hará ningún daño. Utilice un servicio de almacenamiento en caché también; Instalar y configurar W3 Total Cache es un juego de niños. Use un CDN si su contenido está destinado a una amplia audiencia. Por último, eche un vistazo a estos tutoriales y cursos para obtener más detalles y ayuda sobre el tema:

Recursos de rendimiento de WordPress

  • Optimice su sitio web sin AMP por Kezz Bracey
  • Por qué (WordPress) el rendimiento importa por Rachel McCollin
  • Acelerar WordPress por Barış Ünver
  • Optimización de Google PageSpeed ​​a 100 en WordPress por Jeff Reifman
  • Cómo usar los complementos de WordPress sin dañar el rendimiento de Barış Ünver