Compare syntax highlighter plugins and library-type 5 site display speeds
Syntax Highlighter: Plugins and libraries that display source code
When you're wondering which syntax highlighter to use in WordPress
・ It becomes heavy when a plug-in is inserted.
・ Since the highlighter named ○○○ is heavy, I switched to another plug-in.
・ Especially lightweight using JS and CSS libraries
I often saw the information.I measured how much the display speed actually changes between the plug-in and the library, and how much it differs depending on the plug-in.
List of display speed comparison targets
- Highlighter not introduced
- Prismjs(Library)
- Prism Syntax Highlighter(Prismjs library plugin version)
- Crayon Syntax Highlighter(Plugin)
- Mivhak Syntax Highlighter(Plugin)
The features of each are summarized below.
https://insilico-notebook.com/wp-highlighter-list/
Measuring method
The following services were used to compare the unread speed of web pages.
PageSpeed Insight: Web performance measurement tool provided by Google
GTmetrix: Site that outputs display speed and improvement points
Environment
Server: mixhost standard
Disk capacity-SSD 150GB
CPU, host server CPU: virtual 3 cores, Xeon 24 cores 48 threads
Memory, host server memory: 4GB, 256GB
Wordpress theme:cocoon
Since Highlight.js is implemented as standard in Cocoon, it can not be said that highlighter has not been introduced in a strict sense, but I decided to measure the delay degree by the difference.
Result
PageSpeed Insight | GTmetrix | |||
mobile | computer | Page Speed Grade | Yslow Grade | |
Highlighter not introduced | 82.5 | 100 | 89 | 76 |
Prismjs library | 82 | 100 | 89 | 76 |
Prism Highlighter | 81 | 100 | 89 | 76 |
Crayon Highlighter | 76.5 | 99 | 88 | 75 |
Mivhak Highlighter | 71.5 | 99 | 87 | 75 |
GTmetrix's Page Speed Grade and Y slow Grade are quantified results of Google and Yahoo's site speed measurement services, respectively (Gtmetrix's Page Speed Grade is a comprehensive evaluation of the results of PageSpeed Insight).In each case, the average value measured twice was used as the result.
If you look at it on mobile, you can see that the library type is certainly faster, followed by the lighter plugins and the heavier plugins, and the display speed score gets worse.However, it seems that there is almost no difference when considering it on a PC.
When referring to the code, I think most people access it from a PC.Depending on the percentage of mobile and PC access, plugins may not need to be so sensitive.
In-Depth Discussions
Comment list
There are not any comments yet