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..
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 semanalmenteHay 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:
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..
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
).
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..
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.
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.
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..
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.
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.
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..
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.
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: