Tras ir probando y aplicando varios temas gratuitos de Tistory, esta vez decidí intentar crear yo mismo un tema.
Durante el proceso de creación del tema estuve comprobando continuamente la puntuación en PageSpeed Insights de Google, pero por más que lo intentaba, me resultaba difícil superar los 50 puntos.
Pensé que sería más fácil elegir un tema ya optimizado de antemano y modificar el CSS de ese tema, así que decidí probar el rendimiento de los temas básicos.
1. Entorno de prueba
Como el entorno de prueba debía ser uniforme, abrí un blog nuevo.
En la entrada utilizada para la prueba hay algo de texto repartido, 10 imágenes y 1 mapa.
Los plugins que usé fueron 4 en total: youtube, optimización de imágenes para temas responsive, inserción de entradas publicadas anteriormente y ver más entradas de la categoría.
La prueba la realicé con PageSpeed Insights de Google.
En esa dirección se pueden comprobar el rendimiento, los indicadores de búsqueda y otros datos diversos.
2. hello world
Quise comprobar el tiempo de respuesta del servidor básico excluyendo el HTML y el CSS del tema.
Por mucho que se optimice el tema, si el tiempo de respuesta desde el servidor es lento de base, no hay nada que hacer.
Así que en la edición del tema borré todo el HTML y el CSS y decidí mostrar únicamente un hello world con la etiqueta <h1>.
Tal como se ve abajo....
Haciendo esto y accediendo a esa dirección, se puede comprobar que no aparece nada más que hello world! en pantalla.
Y luego introduje esta dirección en PageSpeed Insights.
1) Entorno móvil
La puntuación de rendimiento en entorno móvil fue de 78 puntos.
El problema es que esta página solo muestra un simple hello world! con etiqueta h1.
Esto significa que, por mucho que se optimice el sitio, si se utiliza el servidor de Tistory es imposible superar los 78 puntos en entorno móvil.
A continuación se muestran los detalles de los indicadores medidos.
Tardó entre 3,3 y 4,2 segundos desde que se pinta el primer contenido hasta que se pinta el último.
Solo cargar desde el servidor CSS, min.js y otros JavaScript lleva 1,7 segundos, y simplemente mostrar hello world lleva 4,1 segundos.
Parece que en la optimización para móviles no queda más remedio que empezar con desventaja.
2) Entorno de escritorio
En escritorio, la puntuación fue casi cercana a 100 puntos.
Supongo que cuando el valor del header indica móvil, se envía más JavaScript para ofrecer el entorno móvil.
Como no me interesaba demasiado el detalle concreto, lo dejé pasar.
Ahora pasemos a probar uno por uno los temas y ver sus puntuaciones.
Lo importante a tener en cuenta es que las puntuaciones de abajo no son valores absolutos.
Las puntuaciones pueden variar en función del estado del servidor y las condiciones de red en el momento de la prueba.
3. Prueba por tema
1) Letter
2) Magazin
3) Book Club
4) #1
5) #2
6) Odyssey
7) Poster
8) Portfolio
9) Square
10) Whatever
4. Resumen de resultados
1) Comparación simple de puntuaciones por tema
En móvil y escritorio, el que obtuvo la puntuación más alta fue Square.
Probablemente se deba a que es el más simple de los temas básicos.
Tipo de tema | Puntuación móvil | Puntuación escritorio |
hello world! | 78 | 98 |
Letter | 51 | 77 |
Magazine | 49 | 71 |
Book Club | 49 | 73 |
#1 | 53 | 81 |
#2 | 51 | 65 |
Odyssey | 52 | 76 |
Poster | 55 | 79 |
Portfolio | 52 | 80 |
Square | 55 | 93 |
Whatever | 49 | 82 |
2) Detalle de puntuaciones móviles
Tipo de tema | Rendimiento | Accesibilidad | Recomendaciones | Optimización para motores de búsqueda |
hello world! | 78 | 89 | 96 | 100 |
Letter | 51 | 72 | 82 | 92 |
Magazine | 49 | 69 | 82 | 92 |
Book Club | 49 | 72 | 82 | 92 |
#1 | 53 | 75 | 82 | 85 |
#2 | 51 | 76 | 82 | 85 |
Odyssey | 52 | 65 | 79 | 92 |
Poster | 55 | 72 | 82 | 92 |
Portfolio | 52 | 65 | 82 | 92 |
Square | 55 | 68 | 79 | 92 |
Whatever | 49 | 72 | 79 | 92 |
3) Detalle de puntuaciones en escritorio
Tipo de tema | Rendimiento | Accesibilidad | Recomendaciones | Optimización para motores de búsqueda |
hello world! | 98 | 89 | 96 | 100 |
Letter | 77 | 74 | 81 | 92 |
Magazine | 71 | 68 | 81 | 92 |
Book Club | 73 | 72 | 81 | 92 |
#1 | 81 | 76 | 81 | 85 |
#2 | 65 | 76 | 78 | 85 |
Odyssey | 76 | 71 | 78 | 92 |
Poster | 79 | 72 | 81 | 92 |
Portfolio | 80 | 65 | 81 | 92 |
Square | 93 | 68 | 74 | 92 |
Whatever | 82 | 72 | 78 | 92 |
13. Análisis de resultados y conclusión
En conclusión, el rendimiento de los temas básicos de Tistory fue de un nivel más o menos similar entre sí.
Square, que obtuvo una puntuación alta en rendimiento, mostró en cambio una puntuación algo baja en accesibilidad y recomendaciones, mientras que el tema #1 fue el que obtuvo la puntuación más alta en accesibilidad y recomendaciones. En cuanto a la optimización para motores de búsqueda, la mayoría obtuvo 92 puntos debido a la ausencia de valores alt en las imágenes.
Si tienes cierto nivel de comprensión de frontend, lo mejor sería modificar el tema Square entre los temas básicos y corregir accesibilidad y recomendaciones; si no es el caso, elijas el tema que elijas entre los demás, el límite de rendimiento será similar.
Para la optimización móvil, parece razonable fijar un objetivo de entre 50 y 78 puntos, y para la optimización en escritorio, entre 70 y 90 puntos.
Entonces, te deseo mucho éxito.
댓글을 불러오는 중...