Compare syntax highlighter plugins and library-type 5 site display speeds

2018/11/24

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

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.