Avoid delays in loading your website’s scripts 

Do you want a fast website or one that looks perfect before it starts to appear? If you build your website using many scripts or external resources, it may not start showing up the information quickly.

When users visit a website, scripts may block its rendering while it loads. One common culprit is JavaScript. There is even a name for it: Render-blocking.

Search engines take speed very seriously, especially for the top section of your website, commonly known as above-the-fold.

If your website doesn’t feel snappy, users may leave. Wasting time is frustrating. I suggest you start showing content as soon as possible, even if it looks imperfect.

Nobody likes loading bars.

Fortunately, there are ways to prevent scripts from blocking your website’s loading.

If you use WordPress and many plugins, Query Monitor can help detect the scripts that take longer to load, including external HTTP requests. To prevent loading problems, I prefer to use the fewest plugins and scripts or try to configure them better.

Inlining your external JavaScript means you can include external scripts so they don’t make external requests. However, always test whether including everything is the best approach; it is always a game of balancing aesthetics vs. speed. If your HTML document grows too much, it can be worse than calling external scripts.

Async or Defer the scripts and assets not crucial for your website to work: fonts, CSS, and scripts. The goal is to use today’s HTTP/2 and HTTP/3 protocols to deliver data more efficiently.

Ironically, if you used to combine scripts in the past, it may be time to review this strategy. I realized I was overoptimizing websites, making them slower to today’s standards.

Delivering websites using compression algorithms such as GZIP or Brotli can make them much faster. Server cache and CDNs can help you serve the assets quicker and closer to a user’s location.

I love how the WordPress Site Editor renders content by default, inlining CSS only to the blocks used on a particular page. A good block-based theme, like Twenty Twenty-Four, can make a difference when optimizing.

Jos Velasco.

If you like this kind of content that tries to explain things in a non-technical way, please share and subscribe. Please feel free to contact me with questions about WordPress or hosting websites.

CC0 licensed photo by mufshid from the WordPress Photo Directory.

Share this post if you liked it:


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *