{"id":648,"date":"2024-02-19T19:18:55","date_gmt":"2024-02-19T18:18:55","guid":{"rendered":"https:\/\/bsod.wtf\/?post_type=guide&p=648"},"modified":"2025-03-16T20:20:44","modified_gmt":"2025-03-16T19:20:44","slug":"pagespeed-wordpress-passive-listener","status":"publish","type":"guide","link":"https:\/\/bsod.wtf\/guide\/pagespeed-wordpress-passive-listener\/","title":{"rendered":"PageSpeed Insights und WordPress: \u201eVerwendet keine passiven Listener zur Verbesserung der Scrollleistung\u201c"},"content":{"rendered":"\n
Wenn es will, kann WordPress durchaus flink sein. Wenn du ein geeignetes Theme verwendest, ist sogar PageSpeed Insights beinahe<\/em> zufrieden. Eine Meldung, die du vielleicht erh\u00e4ltst und nicht so einfach weg bekommst, ist folgende:<\/p>\n\n\n\n Verwendet keine passiven Listener zur Verbesserung der Scrollleistung<\/p>\n\n\n\n Wenn du deine Event-Listener f\u00fcr Tipp- und Mausradbewegungen als passive markierst, kannst du damit die Scrollleistung deiner Seite verbessern.<\/p>\n\n\n\n Quelle: Um es kurz zu machen: Dieser Hinweis kann mit ein paar Zeilen Quellcode behoben werden. Diese k\u00f6nnen entweder in einem Plugin hinterlegt werden oder in der Achtung, es wird technisch. Dein Browser ist in der Lage, bestimmte Ereignisse abzufangen. Diese Ereignisse hei\u00dfen \u201eEvent\u201c. Derer gibt es sehr viele, manche k\u00fcmmern sich um alle denkbaren Arten des Scrollens, etwa mit dem Mausrad oder indem du die Seite auf einem Touchscreen verschiebst. Scripte haben die M\u00f6glichkeit, sich in ein solches Event mit einem \u201eEvent Listener\u201c einzuklinken und k\u00f6nnen dann tun, was sie f\u00fcr richtig halten.<\/p>\n\n\n\n Mit einem PageSpeed Insights moniert die Existenz eines nicht passiven Listeners in einem JavaScript von WordPress. Genauer gesagt geht es um verschachtelte Kommentare \u2013 also um die M\u00f6glichkeit, auf vorhandene Kommentare zu antworten.<\/p>\n\n\n\n Was der Code macht, ist zun\u00e4chst einmal das automatische Laden des Scripts zu verhindern. Das neue JavaScript stattet den Link zum Antworten auf einen Kommentar mit einem neuen Event aus. Das l\u00e4dt bei Bedarf (und nur dann) das Script von WordPress nach, wartet 50 Millisekunden und f\u00fchrt dann die Aktion f\u00fcr den Klick aus.<\/p>\n\n\n\n Der gr\u00f6\u00dfte Teil von dem Code ist von WebProTime<\/a> \u2013 ich habe ihn jedoch ein wenig lesbarer gemacht, ihn um jQuery befreit und die Funktionsnamen mit einem Pr\u00e4fix versehen. Damit keine Kollisionen mit anderen Scripten auftreten, die meinen, eine Funktion Wenn es will, kann WordPress durchaus flink sein. Wenn du ein geeignetes Theme verwendest, ist sogar PageSpeed Insights beinahe zufrieden. Eine Meldung, die du vielleicht erh\u00e4ltst und nicht so einfach weg bekommst, ist folgende: Verwendet keine passiven Listener zur Verbesserung der Scrollleistung Wenn du deine Event-Listener f\u00fcr Tipp- und Mausradbewegungen als passive markierst, kannst du … Weiterlesen …<\/a><\/p>\n","protected":false},"author":1,"featured_media":649,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[22],"guide-category":[20,21],"class_list":["post-648","guide","type-guide","status-publish","has-post-thumbnail","hentry","tag-wordpress","guide-category-programmierung","guide-category-wordpress"],"acf":[],"yoast_head":"\n\n
…js\/comment-reply.min.js?ver=X.X.X:Y:ZZZ<\/p>\n<\/blockquote>\n\n\n\nWie behebe ich das?<\/h2>\n\n\n\n
functions.php<\/code> deines Themes (dann aber bitte im Child Theme<\/a>, Updatesicherheit und so weiter). F\u00fcge diesen Code also an geeigneter Stelle ein:<\/p>\n\n\n
\nadd_action('init', function() {\n\twp_deregister_script('comment-reply');\n});\n\nadd_action('wp_footer', function() {\n\t$code = <<<'EOF'\n\t<script>\n\t\/\/ Function checks if a given script is already loaded\n\tfunction fixPagespeed_isScriptLoaded(src) {\n\t\treturn document.querySelector('script[src="' + src + '"]') ? true : false;\n\t}\n\t \n\t\/\/ When a reply link is clicked, check if reply-script is loaded. If not, load it and emulate the click\n\tvar fixPagespeed_commentReplyLink = document.querySelector('.comment-reply-link');\n\tif(fixPagespeed_commentReplyLink != null) {\n\t\tfixPagespeed_commentReplyLink.addEventListener('click', function(event) {\n\t\t\tif(!(fixPagespeed_isScriptLoaded("\/wp-includes\/js\/comment-reply.min.js"))) {\n\t\t\t\tvar script = document.createElement('script');\n\t\t\t\tscript.src = "\/wp-includes\/js\/comment-reply.min.js"; \n\t\t\t\tscript.onload = fixPagespeed_emRepClick(this.getAttribute('data-commentid'));\n\t\t\t\tdocument.head.appendChild(script);\n\t\t\t} \n\t\t});\n\t}\n\n\t\/\/ Function waits 50 ms before it emulates a click on the relevant reply link now that the reply script is loaded\n\tfunction fixPagespeed_emRepClick(comId) {\n\t\tfixPagespeed_sleep(50).then(() => {\n\t\t\tdocument.querySelectorAll('[data-commentid="'+comId+'"]')[0].dispatchEvent(new Event('click'));\n\t\t});\n\t}\n\t\/\/ Function does nothing, for a given amount of time\n\tfunction fixPagespeed_sleep(time) {\n\t\treturn new Promise((resolve) => setTimeout(resolve, time));\n\t}\n\t<\/script>\nEOF;\n\n\techo $code;\n});\n<\/pre><\/div>\n\n\n
Worauf will PageSpeed hinaus?<\/h2>\n\n\n\n
preventDefault()<\/code> haben die Scripte sogar die Macht, das normale Verhalten zu unterbinden; im Falle eines Scroll-Events also das Scrollen verhindern. Mit einem
{passive: true}<\/code>-Flag kann man dem Browser aber versprechen, dass genau das<\/em> nicht passieren wird, dass es also kein Problem ist, zu scrollen, wenn der Nutzer das w\u00fcnscht.<\/p>\n\n\n\n
Wie kommt das \u201eProblem\u201c in mein WordPress?<\/h2>\n\n\n\n
sleep()<\/code> zu nennen, sei eine gute Idee.<\/p>\n","protected":false},"excerpt":{"rendered":"