Compare los complementos de resaltador de sintaxis y las velocidades de visualización del sitio de 5 tipos de biblioteca
Resaltador de sintaxis: complementos y bibliotecas que muestran el código fuente
Cuando se pregunte qué resaltador de sintaxis usar en WordPress
・ Se vuelve pesado cuando se inserta un complemento.
・ Como el resaltador llamado ○○○ es pesado, cambié a otro complemento.
・ Especialmente liviano con bibliotecas JS y CSS
A menudo vi la información.Medí cuánto cambia realmente la velocidad de visualización entre el complemento y la biblioteca, y cuánto difiere según el complemento.
Lista de objetivos de comparación de velocidad de visualización
- Resaltador no introducido
- prismas(Biblioteca)
- Resaltador de sintaxis de prisma(Versión del complemento de la biblioteca Prismjs)
- Resaltador de sintaxis de crayón(Enchufar)
- Resaltador de sintaxis de Mivhak(Enchufar)
Las características de cada uno se resumen a continuación.
https://insilico-notebook.com/wp-highlighter-list/
Método de medición
Los siguientes servicios se utilizaron para comparar la velocidad no leída de las páginas web.
PageSpeed Insight: Herramienta de medición del rendimiento web proporcionada por Google
GTmetrix: Sitio que muestra puntos de mejora y velocidad de visualización
环境
Servidor: estándar mixhost
Capacidad de disco SSD 150GB
CPU, CPU del servidor host: virtual 3 núcleos, Xeon 24 núcleos 48 hilos
Memoria, memoria del servidor host: 4GB, 256GB
Tema de Wordpress:capullo
Dado que Highlight.js está implementado como estándar en Cocoon, no se puede decir que el resaltador no se haya introducido en un sentido estricto, pero decidí medir el grado de retraso por la diferencia.
结果
| PageSpeed Insight | GTmetrix | |||
| Móvil | パ ソ コ ン | Grado de velocidad de página | Grado de Yslow | |
| Resaltador no introducido | 82.5 | 100 | 89 | 76 |
| Biblioteca Prismjs | 82 | 100 | 89 | 76 |
| Resaltador de prisma | 81 | 100 | 89 | 76 |
| Resaltador de crayón | 76.5 | 99 | 88 | 75 |
| Resaltador Mivhak | 71.5 | 99 | 87 | 75 |
Page Speed Grade de GTmetrix y Y slow Grade son resultados cuantificados de los servicios de medición de velocidad del sitio de Google y Yahoo, respectivamente (Page Speed Grade de Gtmetrix es una evaluación completa de los resultados de PageSpeed Insight).En cada caso, se utilizó como resultado el valor medio medido dos veces.
Si lo mira en el móvil, puede ver que el tipo de biblioteca es ciertamente más rápido, seguido de los complementos más ligeros y los complementos más pesados, y la puntuación de velocidad de visualización empeora.Sin embargo, parece que casi no hay diferencia al considerarlo en una PC.
Al referirse al código, creo que la mayoría de la gente accede a él desde una PC.Dependiendo del porcentaje de acceso a dispositivos móviles y PC, es posible que los complementos no necesiten ser tan sensibles.