Syntax Highlighter Plugins – Serveranfragen und Datenvolumen

Wenn du auf deiner Website oder deinem Blog Code-Beispiele anzeigen möchtest, wirst du früher oder später auf einige Plugins aufmerksam. Diese stellen den Code nicht nur gut lesbar dar, sondern bieten auch weitere Funktionen wie zum Beispiel kopieren oder hervorheben von Zeilen. Hier soll es aber nicht um die Funktionen im Einzelnen gehen, denn wirklich große Unterschiede gibt es nicht. Alle Plugins machen das, wozu sie da sind. Ich habe mir einige Plugins installiert und deren Geschwindigkeit bzw. Serveranfragen angeschaut – und hier gibt es große Unterschiede.

Wenn du darauf bedacht bist, deine Website möglichst schlank und schnell zu halten, solltest du dir die Plugins, die du einsetzen möchtest, vorher genau ansehen. Die Anfragen an den Server sollen ja möglichst gering gehalten werden. Natürlich muss in erster Linie der Funktionsumfang passen und ein wenig persönlicher Gefallen spielt ganz klar auch eine Rolle. Von den getesteten Syntax-Highlight-Plugins machen alle genau das, was sie auch sollen. Nämlich Codebeispiele lesbar darstellen. Einige Plugins bieten mehrere Styles, die immer geladen werden. Selbst dann, wenn nur eines davon verwendet werden kann. Das führt natürlich zu einer Erhöhung der Serveranfragen.

Ich möchte hier einmal kurz zeigen, welche der bekanntesten Syntax-Highlighter wie viele Serveranfragen generiert. Basis dafür war eine leere WordPress-Testinstallation mit dem Standard „Hello-World“-Artikel. Als Theme kam das Bones-Framework zum Einsatz. Weitere Plugins waren nicht installiert.

Getestet habe ich folgende Plugins:

• FV Code Highlighter
• Google Syntax Highlighter
• Prettify GC Syntax Highlighter
• Syntax Highlighter Crayon
• Syntax Highlighter Evolved
• WP SynHighlight
• WP Syntax Highlighter

Ausgangssituation

Ohne aktives Plugin wurden sieben Anfragen mit insgesamt 47,5KB gestellt:

Mit aktiviertem Plugin:

FV Code Highlighter

Der FV Code-Highlighter generiert drei Serveranfragen. Zusätzlich müssen 2,2KB geladen werden.

Google Syntax Highlighter

Der Google Syntax Highlighter generiert ganze 14 Anfragen. Dabei müssen zusätzliche 18,3KB geladen werden. Dieses Plugin ist so ein Fall, bei dem immer sämtliche Styles geladen werden, obwohl nur eins Verwendung findet.

Prettify GC Syntax Highlighter

Der Prettify GC Syntax Highlighter verhält sich bei den Anfragen ebenso moderat wie der FV Code Highlighter, jedoch müssen dabei mehr Daten übertragen werden.

Syntax Highlighter Crayon

Bei diesem Code-Highlighter geht es, wie bei dem Google-Highlighter, richtig zur Sache. Die Anfragen sind identisch, jedoch werden hier auch gleich noch zusätzliche 44,5KB fällig.

Syntax Highlighter Evolved

Befriedigende „Ausbeute“ bei diesem Highlighter. Es werden 4 Anfragen generiert und 13KB geladen.

WP SynHighlight

Etwas mehr Anfragen (7), dafür jedoch weniger Datenverkehr (4,4KB) verbucht das Plugin WP SynHighlight.

WP Syntax Highlighter

Ebenfalls gleichauf ist das bekannte Plugin WP Syntax Highlighter. Hier werden 7 Anfragen generiert, jedoch müssen zusätzliche 16,5KB heruntergeladen werden.

Wie gesagt, im Großen und Ganzen erledigen alle genannten Plugins ihren Job ordentlich. Wer etwas auf Geschwindigkeit achten möchte, sollte sich ein Plugin heraussuchen, welches nicht gerade eine Unmenge an Serveranfragen generiert. Hinzu komme noch das optische Erscheinungsbild des dargestellten Codes, welches ich hier jedoch nicht berücksichtigt habe. In dem meisten Fällen kann dies aber via CSS an die eigenen Bedürfnisse angepasst werden.

Ich denke nicht, dass es in vielen Blogs eine entscheidende Rolle spielt, ob nun 4KB oder 14KB mehr geladen werden müssen – so lange nicht mit mobilen Endgeräten und schlechter Verbindung darauf zugegriffen wird – dies  ist jedoch ein anderes Thema – Responsive Webdesign.
Den damit verbundenen Einfluss auf das Ranking (Google) würde ich an dieser Stelle nicht zu hoch ansiedeln, jedoch auch nicht völlig außer Acht lassen. Schließlich wissen wir nicht, zu wie viel Prozent dieser Faktor in die Gewichtung mit einbezogen wird.