Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress

Prueba de Rendimiento: Los Mejores Temas de WordPress en ThemeForest

by
Length:LongLanguages:

Spanish (Español) translation by Naudys Angulo (you can also view the original English article)

El rendimiento es uno de los aspectos más importantes de cualquier sitio web, pero es algo que la gente raramente parece tener en cuenta al comprar temas de WordPress. En este resumen tomaremos los diez temas más vendidos en Themeforest, en orden de apariencia, los ejecutaremos a través de algunas pruebas de rendimiento básicas y las clasificaremos de arriba a abajo.

Los Temas Elegidos

La lista de ThemeForest de los temas más vendidos de WordPress se actualiza semanalmente, pero a menudo se ven jugadores familiares que sostienen los mejores lugares durante algún tiempo. Hemos tomado el top ten (visto a continuación) y se enfrentaron entre sí con algunas pruebas de rendimiento comunes.

2017s Best Selling WordPress Themes - updated weekly
Temas más Vendidos de WordPress - actualizado semanalmente

Las Pruebas

Existen muchas herramientas disponibles para probar sitios web, hemos elegido algunos clásicos: Google Pagespeed Insights, Webpagetest.org, Pingdom y las herramientas de desarrollo de Chrome. La mayoría le dará retroalimentación sobre la velocidad de carga de una página web, su peso general, la eficiencia de sus activos se canaliza, en última instancia, dando algún tipo de puntuación. Hicimos una demo de cada tema a través de estas herramientas y recopilamos las cifras (ver tabla al final del post).

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

Algunas cosas a tener en cuenta:

  • Estas demos están todas organizadas por los autores temáticos individuales. Las especificaciones de hosting no son todas iguales.
  • Se eligió una demo aleatoriamente donde había varias opciones disponibles. WooCommerce, BuddyPress, o cualquier otro plugin de plataformas fueron evitados donde fue posible. Tampoco se utilizaron temas que tuviesen una imagen clara (como los portafolios de fotografía).
  • Todas las URL fueron probadas en California, donde fue posible.
  • Los resultados exactos pueden variar día a día.
  • Demos de temas a menudo se construyen para hacer un impacto visual, lleno de imágenes de alta calidad y la mayor funcionalidad posible. Esto significa que las demos raramente son un reflejo exacto de cómo un sitio web resultante podría verse y comportarse. Es probable que, con tu propia copia, mejoras las puntuaciones de rendimiento de todas estas demos.

Avada

Creative demo
Avada: Demo creativa
  • Perspectivas Pagespeed móvil: 46%
  • Pagespeed insights desktop: 48%
  • Webpagetest.org: Recto en las A, a excepción de una F grande en la compresión de imágenes. AAAFA☑
  • Pingdom: 91% (grado A)
  • Pingdom velocidad de carga: 1.94 s
  • Chrome Herramientas de Desarrollo peso de página: 2.8Mb
  • Auditoría de accesibilidad: puntaje del 94% (excelente). Los atributos de ARIA siguen las mejores prácticas, los elementos están bien estructurados y las metaetiquetas se utilizan correctamente.

Las imágenes pesadas son un contribuidor enorme a la baja puntuación perspectiva pagespeed ; 77,2% del peso de la página se atribuye a las imágenes. Archivos como avada-creative-home1.jpg podrían haberse reducido de 344,6 KB a ~ 40 KB sin mucho esfuerzo. Ciertamente es justo decir que, con sentido común, su propia instalación de Avada podría hacerse mucho más ligero y más rápido. Es bueno ver que Avada está construido teniendo en cuenta la accesibilidad.

The7

The7 Construction demo
The7: Demo de la construcción
  • Pagespeed insights móvil: 64%
  • Pagespeed insights desktop: 91%
  • Webpagetest.org: A en general. AAAAA☑
  • Pingdom: 68% (grado D)
  • Pingdom velocidad de carga: 1.51 s
  • Chrome Herramientas de Desarrollo peso de página: 1.3Mb
  • Auditoría de accesibilidad: Puntuación del 83% (no está mal). Algunos elementos de imagen carecen de atributos alt, la relación de contraste de color podría ser mejor en parte del texto (en relación con su fondo).  Pero en general, los elementos están bien estructurados y la accesibilidad es sólida.

En términos generales, esta demo se carga muy rápidamente; sus imágenes y activos no son demasiado pesados, y la página se puede utilizar relativamente pronto después de la carga. Sin embargo, su grado Pingdom no es óptimo. Las mejoras podrían hacerse combinando parte del JavaScript, así como el CSS, mientras que el almacenamiento en caché podría ser más fácil al no forzar números de versión en los nombres de archivo (por ejemplo: /assets/css/settings.css?ver=5.4.5.2).

BeTheme

BeTheme 3D demo
BeTheme: Demo 3D
  • Pagespeed insights móvil: 76%
  • Pagespeed insights desktop: 87%
  • Webpagetest.org: Recto en las A AAAAA☑
  • Pingdom: 98 (grado A)
  • Pingdom velocidad de carga: 1.27 s
  • Chrome Herramientas de Desarrollo peso de página: 1.8Mb
  • Auditoría de accesibilidad: 80% Cae por debajo de las razones de contraste (esto es un tema bastante oscuro) y su uso imperfecto de los roles de ARIA.

Este tema se carga muy rápidamente. Gran parte de su contenido visible se prioriza mediante la inclusión de estilos esenciales en línea en la head (cabeza), y gran parte de lo que se carga es minificado y concatenado.  Como es a menudo 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 demo bajo el dorado umbral de 1Mb.

Impreza

Impreza Restaurant demo
Impreza: Demo de restaurante
  • Pagespeed insights móvil: 63%
  • Pagespeed insights desktop: 68%
  • Webpagetest.org: FAABF☒
  • Pingdom: 80% (grado B)
  • Pingdom velocidad de carga: 2.34 s
  • Chrome Herramientas de Desarrollo peso de página: 2.5Mb
  • Auditoría de accesibilidad: 94% (excelente). Atributos correctamente utilizados en los elementos, incluidos los roles de ARIA. Nombres de elementos discernibles y contenido bien descrito.

Mientras que la velocidad de carga de la demo del restaurante de Impreza no es mala, sus resultados se ven obstaculizados por más de 2Mb de imágenes. También hay que destacar la falta de CDN y el pobre tiempo de respuesta del servidor; dos aspectos que son específicos para el alojamiento de esta demo y los que usted puede mejorar fácilmente.

Enfold

Enfold Gym demo
Enfold: Demo de gimnasio
  • Pagespeed insights móvil: 60%
  • Pagespeed insights desktop: 60%
  • Webpagetest.org: AAADB☒
  • Pingdom: 70% (grado C)
  • Pingdom velocidad de carga: 2.79 s
  • Chrome Herramientas de Desarrollo peso de página: 5.2Mb
  • Auditoría de accesibilidad: 89% Una de las demostraciones temáticas de mayor puntuación para la accesibilidad, mostrando una fuerza subyacente en su calidad de construcción.

Una vez más, CDN no utilizado para el alojamiento de esta demo, que le pierde unos puntos en webpagetest.org. Una falta de HTTPS también podría haber ganado Enfold una marca negra.  Como de costumbre, esta demo cae en la trampa de ser tan visualmente impresionante como sea posible, sacrificando el peso de la página por la calidad de la imagen. A más de 5Mb este es el peso pesado del manojo, pero el tamaño de la imagen es siempre algo fácilmente remediado.

X

X Church demo
X: Demo de la Iglesia
  • Pagespeed insights móvil: 77%
  • Pagespeed insights desktop: 74%
  • Webpagetest.org: DFAAB☒
  • Pingdom: 87% (grado B)
  • Pingdom velocidad de carga: 2.45 s
  • Chrome Herramientas de Desarrollo peso de página: 2.1Mb
  • Auditoría de accesibilidad: 91% Una puntuación A11y muy saludable, decepciona sólo por la falta de atributos de alt en algunas imágenes, baja relación de contraste en algunas áreas (este tema de la iglesia es bastante silenciado) y la ausencia de un atributo de título en un iframe. Sin embargo, dado que el iframe es de un embed 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 hace un trabajo razonable manteniendo los gastos generales de la imagen a un mínimo; webpagetest le otorga un sólido 97/100 para la compresión de imágenes. En cambio, sus bajisimas  puntuaciones vienen en gran medida del hospedaje, sin CDN, sin HTTPS, mal tiempo de respuesta inicial, y una falta de "mantener vivo" - también conocido como una conexión HTTP persistente, algo que puede ser fácilmente activado. Como siempre, las mejoras fáciles que usted mismo podría poner en práctica.

Bridge

Bridge Spa demo
Bridge: Demo de Spa
  • Pagespeed insights móvil: 70%
  • Pagespeed insights desktop: 83%
  • Webpagetest.org: DAAAF☒
  • Pingdom: 85% (grado B)
  • Pingdom velocidad de carga: 2.12 s
  • Chrome Herramientas de Desarrollo peso de página: 1.6Mb
  • Auditoría de accesibilidad: 91% (muy bien). Puntos pequeños que reducen la puntuación general, pero los atributos de ARIA siguen las mejores prácticas y los elementos de página tienen nombres discernibles, describen bien su contenido y están debidamente estructurados.

Una de las demos más ligeras aquí, pero los delizamientos de la imagen están siempre poniendo en marcha el peso de la página, incluso con imágenes bien optimizadas como éstos. Minificar el HTML y otros activos habrían ayudado a que el puntaje de penetración de las velocidades de paginación y el alojamiento mejorado hicieran de nuevo maravillas- un mejor tiempo de respuesta del servidor, un CDN y el almacenamiento en caché son buenos frutos.

Flatsome

Flatsome Go Explore demo
Flatsome: Demo de Ir a Explorar
  • Pagespeed insights móvil: 53%
  • Pagespeed insights desktop: 57%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 96% (grado A)
  • Pingdom velocidad de carga: 1.02 s
  • Chrome Herramientas de Desarrollo peso de página: 3.7Mb
  • Auditoría de accesibilidad: 83% Puntos perdidos en el frente A11y por no nombrar botones correctamente (los botones del ícono de lista de deseos de WooCommerce no pueden ser leídos correctamente por los lectores de pantalla) y algunos enlaces son igualmente vagos. El bajo contraste en algunos elementos y los identificadores de elementos duplicados también son sencillas de solucionar.

No se ve a través de los ojos favorables por Pagespeed Insights, aunque las otras métricas de puntuación absolutamente amor Flatsome! El buen alojamiento sirve la página eficientemente (los autores del tema toman nota), los activos se minimizan y las imágenes de carga perezosa ayudan a lo que de otro modo sería una carga de páginas de peso medio progresivamente.

Jupiter

Jupiter Bellona template
Jupiter: Plantilla Bellona
  • Pagespeed insights móvil: 38%
  • Pagespeed insights desktop: 44%
  • Webpagetest.org: AAAFA☑
  • Pingdom: 92% (grado A)
  • Pingdom velocidad de carga: 1.07 s
  • Chrome Herramientas de Desarrollo peso de página: 3.3Mb
  • Auditoría de accesibilidad: 91% (muy bien). Debido a la naturaleza impactante de los gráficos (que me encanta, por cierto), el texto sobre algunas de las imágenes hace débiles las relaciones de contraste. La estructura de la página y el uso descriptivo de los elementos, junto con el uso apropiado 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ía enormemente los gastos generales en esta demo.  home-bg-08.jpg solo pesa casi un megabyte; corriendo a través de TinyPNG se afeita el 87% de inmediato. ¿Por qué no? Como sugieren Pingdom y Webpagetest, la mayoría de los aspectos de rendimiento son muy buenos.

Newspaper (Periódico)

Newspaper Tech news
Newspaper: Noticias de Tecnología
  • Pagespeed insights móvil: 76%
  • Pagespeed insights desktop: 77%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 93% (grado A)
  • Pingdom velocidad de carga: 1.19 s
  • Chrome Herramientas de Desarrollo peso de página: 1.5Mb
  • Auditoría de accesibilidad: 86% Una buena puntuación-se podría mejorar describiendo correctamente los enlaces y los botones que se utilizan en realidad para los controles de JavaScript, conmutadores y similares.

Las grandes puntuaciones a través del tablero, las mejoras estándares se aplican (optimización de la imagen, JS y compresión / concatenación de CSS) pero tenga presente que esta demo también viene amueblada con un tirón grande que promueve otras versiones del tema (complicación agregada que su propia versión probablemente no necesite). Sin mucho esfuerzo, esta demo podría entrar en la clase de peso sub-1Mb.

Cómo Hacer Tus Temas de WordPress Más Rápidos

Después de haber comprado un tema de WordPress, ¿cómo podría optimizarlo?

No te sorprenderá: un primer puerto de llamada fácil al optimizar tu sitio web son tus imágenes. Elimina las imágenes no deseadas, comprime las que necesitas, guarda los JPEG como "progresivos" (por lo que al menos hay algo que ver mientras se están cargando) y empezarás bien. También puede instalar un plugin Lazy Loading para llevar las cosas un paso más allá. Hemos visto que muy pocas de estas demos priorizan la optimización de la imagen, pero eso significa al menos que usted podrá mejorar en sus puntuaciones

Respecto a las puntuaciones notoriamente volubles de Pagespeed Insights, habrás notado que todas estas demos (con la excepción de una) mejor puntuación para el escritorio que sus versiones móviles. Esto ya no refleja la forma en la que la web se utiliza, por lo que para mantener a Google (y los usuarios) feliz tenga en cuenta el desempeño móvil. Una primera actitud móvil también ayudará a su SEO.

¿Cómo podría hacer esto? Concatenar y minificar 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 todo lo posible para incluir estilos vitales de "vista inicial" en línea en la <head> y haga que su sitio web sea utilizable lo más rápido posible, evitando que los scripts de "bloqueo de render" reduzcan el proceso de carga. Si el control deslizante en la parte superior de la página principal requiere que toda la página se cargue 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 caché también; instalar y configurar W3 Total Cache es un juego de niños. Utilice 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

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.