![\"Discover](\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/11\/Discover-what-your-real-users-are-experiencing.png\")
You can also defer third-party scripts used for tracking such as GA4, Facebook Pixel, etc. However, I do not recommend deferring these scripts, as it will distort your statistical data. Friend.<\/p>\n\n\n\n
So that is the trade-off we need to make, the index will not be able to reach 100%. The alternative to achieving 100% is to use Cloudflare's tracking, the downside is that the parameters are not as detailed as others.<\/p>\n\n\n\n
Async, Defer, Delay<\/h2>\n\n\n\n
Most websites have used Async and Defer to improve page load times and performance scores, but the increase is not significant.<\/p>\n\n\n\n
Let's first look at the code snippets to understand the differences in how each technique is implemented.<\/p>\n\n\n\n
Normal Load\n<script src=\"script.js\"><\/script>\n\nAsync\n<script async src=\"script.js\"><\/script>\n\nDefer\n<script defer src=\"script.js\"><\/script>\n\nDelay\n<script delay=\"script.js\"><\/script><\/code><\/pre>\n\n\n\n<script delay=\"script.js\"><\/script><\/code> is not an official HTML attribute. It only serves as a placeholder. I will use Javascript delay code instead delay = src<\/code> when there is user interaction.<\/p>\n\n\n\nWhen using attribute async <\/strong>, it will load the script in parallel with parsing the page and then execute it as soon as the script loads.<\/p>\n\n\n\nWhen using attribute defer <\/strong>, it loads the script in parallel with parsing the page but only executes after the page has finished loading.<\/p>\n\n\n\nAs you might guess, defer <\/strong><\/strong>is a much better choice than async<\/strong>. You can find a detailed comparison between both in this article by Flavio Copes<\/a>.<\/p>\n\n\n\nThere are methods delay. delay<\/strong>, due to missing attributes src<\/strong> so the browser won't load the script. So it also gives good performance and scores.<\/p>\n\n\n\nDoing<\/h2>\n\n\n\n
If you are using WordPress, there are already a number of plugins available that can implement this feature out of the box. But if you are passionate about writing code without using plugins or using drag-and-drop builders, you can refer to option 2.<\/p>\n\n\n\n
For WordPress websites<\/h3>\n\n\n\n
The following plugins provide the Delay JavaScript feature:<\/p>\n\n\n\n
\n- Flying Scripts<\/a> (Free of charge)<\/li>\n\n\n\n
- LiteSpeed Cache<\/a> (Free of charge)<\/li>\n\n\n\n
- WP-Rocket<\/a><\/li>\n\n\n\n
- FlyingPress<\/a><\/li>\n\n\n\n
- Perfmatters<\/a><\/li>\n<\/ul>\n\n\n\n
Delay Javascript with code<\/h3>\n\n\n\n
Here is the code I use to Delay Javascript. The best place to place this code is at the bottom, specifically the footer.<\/p>\n\n\n\n
const autoLoadDuration = 5; \/\/In Seconds\nconst eventList = [\"keydown\", \"mousemove\", \"wheel\", \"touchmove\", \"touchstart\", \"touchend\", \"scroll\"];\n\nconst autoLoadTimeout = setTimeout(runScripts, autoLoadDuration * 1000);\n\neventList.forEach(function(event) {\n window.addEventListener(event, triggerScripts, { passive: true })\n});\n\nfunction triggerScripts() {\n runScripts();\n clearTimeout(autoLoadTimeout);\n eventList.forEach(function(event) {\n window.removeEventListener(event, triggerScripts, { passive: true });\n });\n}\n\nfunction runScripts() {\n document.querySelectorAll(\"script[delay]\").forEach(function(scriptTag) {\n scriptTag.setAttribute(\"src\", scriptTag.getAttribute(\"delay\"));\n });\n}<\/code><\/pre>\n\n\n\nExplanation: the above code will search all scripts <script><\/code> has attributes delay<\/code> and replace it with src<\/code> when there is user interaction (key press, mouse click, mouse move, scroll, touch, swipe) or after 5 seconds.<\/p>\n\n\n\n2 variables autoLoadDuration<\/code> and eventList<\/code> You can specify it to your own liking.<\/p>\n\n\n\nThese files defer safely<\/h2>\n\n\n\n
The following are file categories that I recommend you defer to. However, you still have to make sure that everything is working as it should before deployment.<\/p>\n\n\n\n
\n- Advertising scripts (Google Adsense, Amazon Ads, Taboola, Outbrain, Media.net,...).<\/li>\n\n\n\n
- Embed follow and like buttons on social networks.<\/li>\n\n\n\n
- Live chat (Zendesk, Customerly, Intercom, tawk.to, Olark,...).<\/li>\n\n\n\n
- Third-party scripts (Disqus Comments, Facebook Comments, Cookie Consent, etc.)<\/li>\n\n\n\n
- Script is not needed to display above-the-fold content.<\/li>\n<\/ul>\n\n\n\n
To be more certain, you need to carefully check the delayed files in Devtools to see if it affects the user experience.<\/p>","protected":false},"excerpt":{"rendered":"
N\u1ebfu ai \u0111\u00f3 h\u1ecfi t\u00f4i l\u00e0m c\u00e1ch n\u00e0o \u0111\u1ec3 c\u1ea3i thi\u1ec7n th\u1eddi gian t\u1ea3i trang web v\u00e0 c\u00e1c ch\u1ec9 s\u1ed1 quan tr\u1ecdng trong Google Speed Lighthouse, t\u00f4i s\u1ebd tr\u1ea3 l\u1eddi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3016","post","type-post","status-publish","format-standard","hentry","category-website"],"_links":{"self":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/3016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/comments?post=3016"}],"version-history":[{"count":0,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/3016\/revisions"}],"wp:attachment":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media?parent=3016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/categories?post=3016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/tags?post=3016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}