Comparez les plugins de surligneur de syntaxe et les vitesses d'affichage de site de type bibliothèque 5
Syntax Highlighter: Plugins et bibliothèques qui affichent le code source
Lorsque vous vous demandez quel surligneur de syntaxe utiliser dans WordPress
・ Il devient lourd lorsqu'un plug-in est inséré.
・ Étant donné que le surligneur nommé ○○○ est lourd, je suis passé à un autre plug-in.
・ Particulièrement léger en utilisant les bibliothèques JS et CSS
J'ai souvent vu les informations.J'ai mesuré à quel point la vitesse d'affichage change réellement entre le plug-in et la bibliothèque, et à quel point elle diffère en fonction du plug-in.
Liste des objectifs de comparaison de vitesse d'affichage
- Surligneur non introduit
- Prismejs(Bibliothèque)
- Surligneur Prism Syntax(Version du plugin de la bibliothèque Prismjs)
- Surligneur de syntaxe au crayon(Brancher)
- Surligneur de syntaxe Mivhak(Brancher)
Les caractéristiques de chacun sont résumées ci-dessous.
https://insilico-notebook.com/wp-highlighter-list/
Méthode de mesure
Les services suivants ont été utilisés pour comparer la vitesse de non-lecture des pages Web.
PageSpeed Insight: Outil de mesure des performances Web fourni par Google
GTmetrix: Site qui génère la vitesse d'affichage et les points d'amélioration
環境
Serveur: standard mixhost
Capacité du disque-SSD 150 Go
CPU, CPU du serveur hôte: virtuels 3 cœurs, Xeon 24 cœurs 48 threads
Mémoire, mémoire du serveur hôte: 4 Go, 256 Go
Thème Wordpress:cocon
Puisque Highlight.js est implémenté en standard dans Cocoon, on ne peut pas dire que le surligneur n'a pas été introduit au sens strict, mais j'ai décidé de mesurer le degré de retard par la différence.
結果
| PageSpeed Insight | GTmetrix | |||
| Mobile | PC | Vitesse de la page | Yslow Grade | |
| Surligneur non introduit | 82.5 | 100 | 89 | 76 |
| Bibliothèque Prismjs | 82 | 100 | 89 | 76 |
| Surligneur Prism | 81 | 100 | 89 | 76 |
| Crayon surligneur | 76.5 | 99 | 88 | 75 |
| Surligneur Mivhak | 71.5 | 99 | 87 | 75 |
Page Speed Grade et Y slow Grade de GTmetrix sont des résultats quantifiés des services de mesure de la vitesse du site de Google et Yahoo, respectivement (le Page Speed Grade de Gtmetrix est une évaluation complète des résultats de PageSpeed Insight).Dans chaque cas, la valeur moyenne mesurée deux fois a été utilisée comme résultat.
Si vous le regardez sur mobile, vous pouvez voir que le type de bibliothèque est certainement plus rapide, suivi des plugins plus légers et des plugins plus lourds, et le score de vitesse d'affichage s'aggrave.Cependant, il semble qu'il n'y ait presque aucune différence lorsque l'on considère cela sur un PC.
En se référant au code, je pense que la plupart des gens y accèdent à partir d'un PC.En fonction du pourcentage d'accès mobile et PC, les plugins peuvent ne pas avoir besoin d'être aussi sensibles.