Speed Test: Pygmentize vs. SyntaxHighlighter:
Bob Ray
asked me how the Pygmentize snippet compares against his SyntaxHighlighter snippet, in terms of page load times...so I ran a basic test to compare them. These results aren't exactly conclusive, as I don't have the resources to create a tightly-controlled test environment, but they're good enough to give us a rough idea of how well Pygmentize performs. (Spoiler: Pygmentize is surprisingly fast.)
Setup
I created 2 test pages. Both use a bare-bones MODX template that contains only 3 dynamic tags:
[[*longtitle]]
[[*pagetitle]]
[[*content]]
These tags are, of course, placed in a normal HTML page template that contains no additional embedded content or resources. In other words, there are no unrelated images, .js, or .css files loaded.
shtest.html
For the first page, the content was a small piece of JavaScript code (~50 lines of code), wrapped in <pre> tags and preceded by the SyntaxHighlighter snippet tag like this:
[[SyntaxHighlighter? &brushes=`JScript`]]
<pre class="brush: js">
~50 lines of code
</pre>
pytest.html
For the second page, the content was the Pygmentize snippet tag like this:
[[Pygmentize? &S=`friendly` &file=`test.js`]]
...where test.js is a file I saved to "/assets/code/" and which contains the same ~50 lines of code that were in the <pre> tags of the first page.
Tool + Settings
WebPageTest
Location: Kansas City, MO
Browser: Chrome
Connection Speed: FIOS
Runs: 10
Process
I ran both pages twice (for a total of 20 individual test runs) and averaged the results. I will show the data here for each set (of 10) and the averages.
Test Results
SyntaxHighlighter
Load Time First Byte Start Render
Run 1-10 0.335s 0.093s 0.297s
Run 11-20 0.310s 0.093s 0.337s
-----------------------------------------------------
Average 0.323s 0.093s 0.317s
Pygmentize
Load Time First Byte Start Render
Run 1-10 0.219s 0.091s 0.191s
Run 11-20 0.228s 0.095s 0.204s
-----------------------------------------------------
Average 0.224s 0.093s 0.198s
Conclusion
To the non-technical eye, these results may suggest that Pygmentize is the clear winner, but that's not necessarily the case. In reality, these two snippets work differently--with many variables to consider--and this test targeted just one possible scenario and reported on one small set of test data (i.e., page load times). Here are some additional points to consider...
Pygmentize uses your server's processor and memory to parse the code snippet and wrap each token in the appropriate HTML tags before returning it to MODX.
How intensive is this use of server resources? I don't know. But Pygmentize's results aren't cached, so in its current form, this snippet causes the Pygmentize python script to execute on every page load. Scaling might quickly become an issue here.
SyntaxHighlighter, on the other hand, is mostly a client-side program. The MODX snippet's main function is to provide a convenient mechanism for pairing code snippets with their corresponding SyntaxHighlighter brushes. The main difference here is that SyntaxHighlighter uses the CPU and memory resources of the Users' computer, as it's all handled via JavaScript.
So...while the test results above show Pygmentize as being faster, keep in mind that this test was run on a very low-traffic server. Additionally, keep in mind that this test was for "out of the box" performance--SyntaxHighlighter could have been optimized, according to the tips provided in
Bob's tutorial under the heading,
Speed Considerations.