Сравните плагины синтаксической подсветки и скорость отображения сайта библиотеки 5-го типа
Syntax Highlighter: плагины и библиотеки, отображающие исходный код.
Когда вам интересно, какой подсветчик синтаксиса использовать в WordPress
・ При вставке плагина становится тяжелее.
・ Поскольку выделитель с именем ○○○ тяжелый, я переключился на другой плагин.
・ Особенно легкий с использованием библиотек JS и CSS
Я часто видел информацию.Я измерил, насколько реально изменяется скорость отображения между плагином и библиотекой и насколько она отличается в зависимости от плагина.
Список целей сравнения скорости отображения
- Маркер не представлен
- Призмджс(Библиотека)
- Подсветка синтаксиса Prism(Версия плагина библиотеки Prismjs)
- Подсветка синтаксиса Crayon(Плагин)
- Подсветка синтаксиса Mivhak(Плагин)
Характеристики каждого из них кратко изложены ниже.
https://insilico-notebook.com/wp-highlighter-list/
Метод измерения
Следующие сервисы использовались для сравнения непрочитанной скорости веб-страниц.
PageSpeed Insight: Инструмент измерения веб-производительности, предоставленный Google.
GTmetrix: Сайт, на котором отображается скорость отображения и очки улучшения.
環境
Сервер: стандарт mixhost
Емкость диска-SSD 150 ГБ
ЦП, ЦП хост-сервера: виртуальные 3 ядра, Xeon 24 ядра 48 потоков
Память, память хост-сервера: 4 ГБ, 256 ГБ
Тема Wordpress:кокон
Поскольку Highlight.js стандартно реализован в Cocoon, нельзя сказать, что подсветчик не был введен в строгом смысле слова, но я решил измерить степень задержки по разнице.
結果
| PageSpeed Insight | GTmetrix | |||
| мобильный | ПК | Оценка скорости страницы | Yslow Grade | |
| Маркер не представлен | 82.5 | 100 | 89 | 76 |
| Библиотека Prismjs | 82 | 100 | 89 | 76 |
| Призматический хайлайтер | 81 | 100 | 89 | 76 |
| Карандашный маркер | 76.5 | 99 | 88 | 75 |
| Мивхак Хайлайтер | 71.5 | 99 | 87 | 75 |
Оценка скорости страницы GTmetrix и оценка медленной скорости Y - это количественные результаты служб измерения скорости сайта Google и Yahoo соответственно (оценка скорости страницы Gtmetrix - это комплексная оценка результатов PageSpeed Insight).В каждом случае в качестве результата использовалось среднее значение, измеренное дважды.
Если вы посмотрите на это на мобильном телефоне, вы увидите, что тип библиотеки, безусловно, быстрее, за ним следуют более легкие плагины и более тяжелые плагины, а оценка скорости отображения ухудшается.Однако, похоже, разницы при рассмотрении на ПК практически нет.
Что касается кода, я думаю, что большинство людей обращаются к нему с ПК.В зависимости от процента доступа с мобильных устройств и ПК, плагины могут не быть такими чувствительными.