Connect with us

SEO

How To Identify And Reduce Render-Blocking Resources

Published

on

How To Identify And Reduce Render-Blocking Resources

Identifying and reducing resources responsible for blocking the rendering of your web page is a critical optimization point that can make or break your page speed.

It can be so critical that it can pay dividends to your site’s page experience metrics (and your user’s satisfaction) as a result.

In 2021, the average time it took to fully render a mobile web page was 22 seconds. In 2018, it was 15 seconds.

Clearly, this is a substantially higher number than Google’s recommended time of 2-3 seconds. It’s also substantially higher than it used to be.

What could be causing these issues with render-blocking resources?

What is driving this increase in overall page render speed?

One interesting trend to note is that there has been an increasing reliance on third-party fonts compared to system fonts. Using third-party fonts as a resource tends to interfere with the processing and rendering of a page.

With system fonts, the browser does not have to load anything extra, so it doesn’t have that additional processing step as a result.

Screenshot from Web Almanac, January 2022

This reliance across industries is likely to impact this rendering time. Of course, this is not the only cause of this issue with render-blocking resources.

In addition, Google’s own services tend to have a significant impact on rendering time, such as Google Analytics or using a third-party Facebook pixel for tracking purposes.

The desire to rely on such technologies is not necessarily terrible from a marketing perspective.

But, from a render-blocking resources perspective, it can cause significant increases in page load time and how Google (and users) perceives your page.

The ideal solution is to make sure that your page loads for user interaction as quickly as possible.

It’s also a possibility that poor web development practices in use by web developers today are to blame.

Either way, this is something in every website project that should be addressed as part of your Core Web Vitals audits.

Page experience, however, is not just about how fast the entire page loads.

Instead, it’s more about the overall experience of the page as measured by Google’s page experience framework, or Core Web Vitals.

This is why you want to work on improving and optimizing your page speed for the critical rendering path throughout the DOM, or document object model.

What Is The Critical Rendering Path?

The critical rendering path refers to all of the steps that it takes in order to render the entire page, from when the browser first begins receiving data to when it finally compiles the page at the final render.

This is a process that can take only several milliseconds if you optimize it right.

Optimizing for the critical rendering path means making sure that you optimize for the performance of rendering on many different devices.

This is accomplished by optimizing the critical rendering path to get to your first paint as quickly as possible.

Basically, you’re reducing the amount of time users spend looking at a blank white screen to display visual content ASAP (see 0.0s below).

An example of optimized vs unoptimized rendering from Google.Screenshot from Google Web Fundamentals, January 2022

There’s a whole process on how to do this, outlined in Google’s developer guide documentation, but I will be focusing on one heavy hitter in particular: reducing render-blocking resources.

How Does The Critical Rendering Path Work?

The critical rendering path refers to the series of steps a browser takes on its journey to render a page, by converting the HTML, CSS, and JavaScript to actual pixels on the screen.

An example of Critical Rendering Path.Screenshot from Medium, January 2022

Essentially, the browser needs to request, receive, and parse all HTML and CSS files (plus some additional work) before it will start to render any visual content.

This process occurs within a fraction of a second (in most cases). Until the browser completes these steps, users will see a blank white page.

The following is an example of how users may experience how a page loads according to the different stages of the page load process:

How users perceive page rendering.Screenshot from web.dev, January 2022

Improving the critical rendering path can thus improve on the overall page experience, which can help contribute to improved performance on Core Web Vitals metrics.

How Do I Optimize The Critical Rendering Path?

In order to improve the critical rendering path, you have to analyze your render-blocking resources.

Any render-blocking resources may end up blocking in the initial rendering of the page, and negatively impact your Core Web Vitals scores as a result.

This involves an optimization process of:

  • Reducing the quantity of resources that are critical to the rendering path. This can be done by using a defer method for any possible render-blocking resources.
  • Prioritizing content that is above-the-fold, and downloading important media assets as early as you possibly can.
  • Compress the file size of any remaining critical resources.

By doing this, it’s possible to improve both Core Web Vitals and how your page physically renders to the user.

Why Should I Care?

Google’s user behavior data reports that most users abandon a slow site after about 3 seconds.

In addition to studies that show that reducing page load time and improving the page experience leads to greater user satisfaction, there are also several major Google updates on the horizon that you will want to prepare for.

Identifying and optimizing render-blocking resources will be critical to stay on top of the game when these updates hit.

Google will be implementing page experience on the desktop in 2022, beginning their rollout of desktop page experience in February and finishing up in March.

According to Google, the same three Core Web Vitals metrics (LCP, FID, and CLS) along with their associated thresholds will now be linked to desktop ranking.

Also, Google is working on a brand-new possibly experimental Core Web Vitals metric, taking into account maximum event duration, and total event duration.

Their explanation of these factors they are considering are:

Maximum event duration: the interaction latency is equal to the largest single event duration from any event in the interaction group.
Total event duration: the interaction latency is the sum of all event durations, ignoring any overlap.

With many studies linking reductions in page load times to improvements in valuable KPIs (conversions, bounce rate, time on site), improving site latency has become a top-of-mind business goal for many organizations.

SEO professionals are in a unique position to guide this effort, as our role is often to bridge the gap between business goals and web developers’ priorities.

Having the ability to audit a site, analyze results, and identify areas for improvement helps us to work with developers to improve performance and translate results to key stakeholders.

The Goals Of Optimizing Render-Blocking Resources

One of the primary goals of optimizing the critical rendering path is to make sure that the resources that are needed to render that important, above-the-fold content are loaded as quickly as is humanly possible.

Any render-blocking resources must be deprioritized, and any resources that are preventing the page from rendering quickly.

Each optimization point will contribute to the overall improvement of your page speed, page experience, and Core Web Vitals scores.

Why Improve Render-Blocking CSS?

Google has said many times that coding is not necessarily important for ranking.

But, by the same token, gaining a ranking benefit from page speed optimization improvements can potentially help, depending on the query.

When it comes to CSS files, they are considered to be render-blocking resources.

Why is this?

Even though it happens in the midst of a millisecond or less (in most cases), the browser won’t start to render any page content until it is able to request, receive, and handle all CSS styles.

If a browser renders content that’s not styled properly, all you would get is a bunch of ordinary text and links that are not even styled.

This means that your page will basically be “naked” for lack of a better term.

Removing the CSS styles will result in a page that is literally unusable.

The majority of content will need repainting in order to look the least bit palatable for a user.

Example of CSS enabled vs CSS disabled.

If we examine the page rendering process, the gray box below is a representation of the browser time needed to get all CSS resources. This way, it can begin constructing the DOM of CSS (or CCSOM tree).

This could take anywhere from a millisecond to several seconds, depending on what your server needs to do in order to load these resources.

It can also vary, which could depend on the size, along with the quantity, of these CSS files.

The following render tree shows an example of a browser rendering all the files along with CSS within the DOM:

DOM CSSOM Render Tree.Screenshot from Medium, January 2022

In addition, the following shows an example of the rendering sequence of a page, in which all the files load in a process, from the construction of the DOM to the final painting and compositing of the page, which is known as the critical rendering path.

Because CSS is a render-blocking resource by default, it makes sense to improve CSS to the point where it doesn’t have any negative impact on the page rendering process at all.

The Official Google Recommendation States The Following:

“CSS is a render-blocking resource. Get it to the client as soon and as quickly as possible to optimize the time to first render.”

The HTML must be converted into something the browser can work with: the DOM. CSS files are the same way. This must be converted into the CSSOM.

By optimizing the CSS files within the DOM and CSSOM, you can help decrease the time it takes for a browser to render everything, which greatly contributes to an enhanced page experience.

Why Improve Render-Blocking JavaScript?

Did you know that loading JavaScript is not always required?

With JavaScript, downloading and parsing all JavaScript resources is not a necessary step for fully rendering a page.

So, this isn’t really a technically required part of page render.

But, the caveat to this is: Most modern sites are coded in such a way that JavaScript (for example the Bootstrap JS framework) is required in order to render the above-the-fold experience.

But, if a browser finds JavaScript files before the first render of a page, the rendering process can be stopped until later and after JavaScript files are fully executed.

This can be specified otherwise by deferring JavaScript files for later use.

One example of this is if there are JS functions like an alert that’s built into the HTML. This could stop page rendering until after the execution of this JavaScript code.

JavaScript has the sole power to modify both HTML and CSS styles, so this makes sense.

Parsing and execution of JavaScript could be delayed because of the fact that JavaScript can potentially change the entire page content. This delay is built into the browser by default – for just such a “just in case” scenario.

Official Google Recommendation:

“JavaScript can also block DOM construction and delay when the page is rendered. To deliver optimal performance … eliminate any unnecessary JavaScript from the critical rendering path.”

How To Identify Render-Blocking Resources

To identify the critical rendering path and analyze critical resources:

  • Run a test using webpagetest.org and click on the “waterfall” image.
  • Focus on all resources requested and downloaded before the green “Start Render” line.

Analyze your waterfall view; look for CSS or JavaScript files that are requested before the green “start render” line but are not critical for loading above-the-fold content.

Example of start render.Screenshot from WebPageTest, January 2022

After identifying a (potentially) render-blocking resource, test removing it to see if above-the-fold content is affected.

In my example, I noticed some JavaScript requests that may be critical.

Even though they are critical, it’s sometimes a good idea to test removing these scripts to test how shifting elements on the site affect the experience.

Example of web page test results showing render-blocking resources.Screenshot from WebPageTest, January 2022

There are also other ways to improve such resources.

For non-critical JavaScript files, you may want to look into combining the files and deferring them by including these files at the bottom of your page.

For non-critical CSS files, you can also reduce how many CSS files you have by combining them into one file and compressing them.

Improving your coding techniques can also result in a file that’s faster to download and causes less impact on the rendering speed of your page.

Ways To Reduce Render-Blocking Elements On The Page

Once you determine that a render-blocking resource is not critical for rendering content above-the-fold, you will want to explore a myriad of methods that are available in order to improve the rendering of your page and defer non-critical resources.

There are many solutions to this problem, from deferring JavaScript and CSS files to reducing the impact that CSS can have.

One possible solution is to not add CSS using the @import rule.

Make Sure Not To Add CSS Using The @Import Rule

From a performance perspective, even though @import appears to keep your HTML file cleaner, it can actually create issues with performance.

The @import declaration will actually cause the browser to process a CSS file more slowly. Why? Because it is also downloading all of the imported files.

Rendering will be entirely blocked until the process completes.

Indeed, the best solution is to use the standard method of including a CSS stylesheet using the <link rel=”stylesheet”> declaration in the HTML.

Minify Your CSS And JavaScript Files

If you are on WordPress, using a plugin to minify your CSS and JavaScript files can have a tremendous impact.

The process of minification takes all of the unnecessary spaces within a file and compresses it even further, so you can end up with a nice performance boost.

Also, even if you are not on WordPress, you can use the services of a well-qualified developer in order to complete the process manually.

This will take more time but can be well worth it.

Minified files are usually much lighter than their former counterparts, and this means that initial rendering will complete much faster.

In addition to this, after the minification process, you can also expect the download process to be faster, because less time is necessary to download non-render blocking resources.

Use System Fonts Instead Of Third-Party Fonts

While third-party fonts may appear to make a site “prettier,” this is not exactly the case.

While it may look amazing on the surface, these third-party font files often take a longer time to load and can contribute to your render-blocking resources problem.

Because of the external files, the browser has to make external requests in order to download these files to render your page, which may result in significantly higher download times.

If you’re on a team that has less than ideal development best practices, then it could stand to reason that you have many third-party font files that are not necessary for rendering your site.

In which case, removing all these unnecessary files can improve your render-blocking resources significantly and contribute to your overall improvement in Core Web Vitals.

Using system fonts, on the other hand, only keeps the processing within the browser, without external requests.

Also, there are likely system fonts that may be very similar to the third-party fonts you are using.

Improve Your Coding Techniques And Combining Files

If you’re working with code yourself, you may (or may not … no one is judging here) find that techniques are less than optimal.

One example: you are using inline CSS everywhere, and this is causing processing and rendering glitches within the browser.

The easy solution is to make sure that you take all of the inline CSS and code them properly within the CSS stylesheet file.

If another developer’s code is not up to par, this can create major issues with page rendering.

For example: Say that you have a page that’s coded using older techniques rather than modern and leaner ones.

Older techniques could include significant code bloat and result in slower rendering of the page as a result.

To eliminate this, you can improve your coding techniques by creating leaner and less bloated code, resulting in a much better page rendering experience.

Combining files can also improve the situation.

For example: If you have eight or 10 JavaScript files that all contribute to the same task, you can hire the services of a developer who can then combine all of these files for you.

And, if they are less critical JavaScript files, then to further decrease the page rendering problems, these files can also be deferred by adding them to the end of the HTML code on the page.

By combining files and improving your coding techniques, you can contribute significantly to better page rendering experiences.

Key Takeaways

Finding solutions to reduce render-blocking resources have been an SEO audit staple for a while now. It’s important for several reasons:

By reducing render-blocking resources, you make your site faster. You can also reverse engineer your site to take advantage of elements that will play into Google’s overall page experience update.

You also put yourself in a position to take advantage of a boost you will get from Google’s Core Web Vitals metrics.

Core Web Vitals are not going away. They have become a critical optimization point in order to facilitate the fastest potential rendering times possible within your current framework.

With new Core Web Vitals metrics being introduced in the future, making sure that you’re up-to-date on existing metrics is always a great idea.

Finding and repairing render-blocking resources also ensures that you continue keeping your website visitors happy and that it’s always in top shape for prime time.

More resources:


Featured Image: Naumova Marina/Shutterstock




Source link

SEO

Everything You Need To Know

Published

on

Of all the many, many functions available in Google Ads, I have a few that are my favorites. And sitelink assets – previously known as sitelink extensions – are at the top of my list.

Why? Because they’re so versatile. You can do almost anything with them if you think through your strategy carefully.

For example, you can use the mighty sitelink in your advertising to:

  • Promote low search volume themes.
  • Push lagging products out the door.
  • Maximize hot sellers.
  • Highlight certain product categories.
  • Answer common questions.
  • Handle PR problems.

And that’s just a start! Sitelink assets can almost do it all.

Best Practices For Using Sitelink Assets Extensions

If you truly want to get the most out of your sitelinks, you need to think about your intention.

To help you with that, I’m going to lay out a few sitelink guidelines.

1. Get clear on your objectives. Before you start, you need to think about your goals. What are you trying to achieve with these assets? Are you advertising products or services? Will the asset work well with both branded and non-branded keywords? Your answers to these questions will help determine if your sitelinks are versatile and useful to the searcher.

2. Use sitelinks as part of your larger strategy. Don’t think of your sitelinks in isolation. You should also consider the accompanying ad, landing page, and other assets. Make sure they all work together in service to your overarching strategy.

3. Use a mix of sitelinks. Sitelinks can serve multiple purposes, so make sure you’re using a variety. For example, you don’t want to use every sitelink on an ad to promote on-sale products. Instead, use a mix. One could promote an on-sale product, one could generate leads, one could highlight a new product category, and one could direct prospective clients to useful information.

4. Create landing pages for your sitelinks. Ideally, you want to send users to landing pages that tightly correlate with your sitelink instead of just a regular page on your website.

5. Track sitelink performance and adjust. It’s not enough to set up sitelinks. You should also track them to see which links are getting traction and which ones are not. This doesn’t mean that all sitelinks should perform equally (more on this below), but it does mean they should perform well given their type and objectives.

Why it’s Better To Use A Mix Of Sitelink Assets

Let’s dive deeper into this idea of using a mix of sitelinks by looking at an example.

In a new client account, we created four different types of sitelinks:

  • Two sitelinks are product-focused (as requested by the client).
  • One sitelink connects users with an engineer to learn more about the product (“Speak to an Engineer”). It has more of a sales focus.
  • One sitelink allows users to learn more about the products without speaking to an engineer (“What is?”).

The “What is?” sitelink is outperforming the “Speak to an Engineer” sitelink when we measure by CTR. While we need more data before making any changes, I predict we’ll eventually swap out the sales-y “Speak to an Engineer” sitelink for something else.

The fact that the educational link (“What is?”) is performing better than the sales-y link (“Speak to an Engineer”) isn’t too surprising in this case. The product is a new, cutting-edge robot that not many people are aware of, yet. They want more info before talking to someone.

Screenshot by author, January 2023

By using a mix of sitelinks, and assessing the performance of each, we gained a lot of valuable information that is helping to guide our strategy for this account. So going with a mix of sitelinks is always a good idea. You never know what you’ll discover!

Sitelink Assets Examples

Now, let’s look at some specific examples of sitelink assets in Google Ads.

Example 1: Chromatography

Sitelinks extension - Chromatography exampleScreenshot from Google, January 2023

Application Search: This ad is for a highly technical product that can be used in a wide variety of applications. (Chromatography is a laboratory technique for separating mixtures.) So putting “application search” in a sitelink here might make sense. It helps prospective clients find what they’re looking for.

Sign up and Save Big: A good sitelink for lead generation and potential revenue.

Technical Support: I’m not a big fan of putting technical support in sitelinks. Tech support seems more targeted to current users rather than prospective users. But who knows, maybe they really do want to help current users get tech support via their advertising.

Guides and Posters: Again, this sitelink is a bit unusual, but it might be appropriate for this product. Perhaps people are downloading branded posters and posting them in their workplaces. If so, it’s a great way to build brand awareness.

Example 2: Neuroscience Courses

Sitelink Extensions - Nueroscience courses exampleScreenshot from Google, January 2023

I love everything about these sitelinks! The advertising is using them to reach people in all phases of the buyer journey.

For people not ready to commit:

  • Study Neuroscience: This sitelink is broad and informational. It’s helpful to people who have just started to explore their options for studying neuroscience.
  • Get Course Brochure: This sitelink is also great for people in the research phase. And while we mostly live in an online world, some people still prefer to consume hard-copy books, brochures, etc. With this sitelink, the school is covering its bases.

For people getting close to committing:

  • Online Short Course: This is the course the school offers. It’s a great sitelink for those almost ready to sign up.

For people ready to sign up:

  • Register Online Now: This is the strongest call to action for those ready to commit. It takes people directly to the signup page.

Example 3: Neuroscience Degrees

Let’s look at another example from the world of neuroscience education: this time for a neuroscience degree program.

Sitelink extensions - neuroscience degree exampleScreenshot from Google, January 2023

In contrast to the previous two examples, the sitelinks in this ad aren’t as strong.

Academics Overview: This sitelink seems more appropriate for a broad term search, such as a search on the school’s name. If the searcher is looking for a specific degree program (which seems like the intention based on the term and the ad), the sitelinks should be something specific to that particular degree program.

Scholarships: Just as with the above sitelink, “Scholarships” doesn’t seem very helpful either. The topic of scholarships is important—but probably doesn’t need to be addressed until the person determines that this school is a good fit.

Example 4: Code Security

Next, let’s look at two Google search ads for code security products.

Sitelink extensions - code security exampleScreenshot from Google, January 2023

 

The sitelinks in these two ads look like typical assets you’d find for SaaS, cloud-based, or tech companies. They click through to a lot of helpful information, such as product plans and success stories.

I particularly like the Most Common Risks sitelink in the second ad. It leads to a helpful article that would be great for engaging top-of-funnel leads.

On the flip side, I’m not a big fan of the Blog sitelink in the first ad. “Blog” simply isn’t very descriptive or helpful.

Still, there are no right or wrong sitelinks here. And it would be interesting to test my theory that blog content is not a top-performing asset!

Sitelink Assets Are More Than An Afterthought

I hope I’ve convinced you of the usefulness and versatility of sitelinks when created with specific objectives that align with your broader strategy.

So don’t create your sitelink assets as an afterthought.

Because if you give them the careful consideration they deserve, they’ll serve you well.

Note: Google sitelink assets were previously known as sitelink extensions and renamed in September 2022.

More resources:


Featured Image: Thaspol Sangsee/Shutterstock



Source link

Continue Reading

SEO

AI Content In Search Results

Published

on

AI Content In Search Results

Google has released a statement regarding its approach to AI-generated content in search results.

The company has a long-standing policy of rewarding high-quality content, regardless of whether humans or machines produce it.

Above all, Google’s ranking systems aim to identify content that demonstrates expertise, experience, authoritativeness, and trustworthiness (E-E-A-T).

Google advises creators looking to succeed in search results to produce original, high-quality, people-first content that demonstrates E-E-A-T.

The company has updated its “Creating helpful, reliable, people-first content” help page with guidance on evaluating content in terms of “Who, How, and Why.”

Here’s how AI-generated content fits into Google’s approach to ranking high-quality content in search results.

Quality Over Production Method

Focusing on the quality of content rather than the production method has been a cornerstone of Google’s approach to ranking search results for many years.

A decade ago, there were concerns about the rise in mass-produced human-generated content.

Rather than banning all human-generated content, Google improved its systems to reward quality content.

Google’s focus on rewarding quality content, regardless of production method, continues to this day through its ranking systems and helpful content system introduced last year.

Automation & AI-Generated Content

Using automation, including AI, to generate content with the primary purpose of manipulating ranking in search results violates Google’s spam policies.

Google’s spam-fighting efforts, including its SpamBrain system, will continue to combat such practices.

However, Google realizes not all use of automation and AI-generated content is spam.

For example, publishers automate helpful content such as sports scores, weather forecasts, and transcripts.

Google says it will continue to take a responsible approach toward AI-generated content while maintaining a high bar for information quality and helpfulness in search results.

Google’s Advice For Publishers

For creators considering AI-generated content, here’s what Google advises.

Google’s concept of E-E-A-T is outlined in the “Creating helpful, reliable, people-first content” help page, which has been updated with additional guidance.

The updated help page asks publishers to think about “Who, How, and Why” concerning how content is produced.

“Who” refers to the person who created the content, and it’s important to make this clear by providing a byline or background information about the author.

“How” relates to the method used to create the content, and it’s helpful to readers to know if automation or AI was involved. If AI was involved in the content production process, Google wants you to be transparent and explain why it was used.

“Why” refers to the purpose of creating content, which should be to help people rather than to manipulate search rankings.

Evaluating your content in this way, regardless of whether AI-generated or not, will help you stay in line with what Google’s systems reward.


Featured Image: Alejandro Corral Mena/Shutterstock



Source link

Continue Reading

SEO

Seven tips to optimize page speed in 2023

Published

on

Tips-to-optimize-page-speed-in-2023

30-second summary:

  • There has been a gradual increase in Google’s impact of page load time on website rankings
  • Google has introduced the three Core Web Vitals metrics as ranking factors to measure user experience
  • The following steps can help you get a better idea of the performance of your website through multiple tests

A fast website not only delivers a better experience but can also increase conversion rates and improve your search engine rankings. Google has introduced the three Core Web Vitals metrics to measure user experience and is using them as a ranking factor.

Let’s take a look at what you can do to test and optimize the performance of your website.

Start in Google Search Console

Want to know if optimizing Core Web Vitals is something you should be thinking about? Use the page experience report in Google Search Console to check if any of the pages on your website are loading too slowly.

Search Console shows data that Google collects from real users in Chrome, and this is also the data that’s used as a ranking signal. You can see exactly what page URLs need to be optimized.

Optimize-to-Start-in-Google-Search-Console

Run a website speed test

Google’s real user data will tell you how fast your website is, but it won’t provide an analysis that explains why your website is slow.

Run a free website speed test to find out. Simply enter the URL of the page you want to test. You’ll get a detailed performance report for your website, including recommendations on how to optimize it.

Run-a-website-speed-test-for-optimization

Use priority hints to optimize the Largest Contentful Paint

Priority Hints are a new browser feature that came out in 2022. It allows website owners to indicate how important an image or other resource is on the page.

This is especially important when optimizing the Largest Contentful Paint, one of the three Core Web Vitals metrics. It measures how long it takes for the main page content to appear after opening the page.

By default, browsers assume that all images are low priority until the page starts rendering and the browser knows which images are visible to the user. That way bandwidth isn’t wasted on low-priority images near the bottom of the page or in the footer. But it also slows down important images at the top of the page.

Adding a fetchpriority=”high” attribute to the img element that’s responsible for the Largest Contentful Paint ensures that it’s downloaded quickly.

Use native image lazy loading for optimization

Image lazy loading means only loading images when they become visible to the user. It’s a great way to help the browser focus on the most important content first.

However, image lazy loading can also slow cause images to take longer to load, especially when using a JavaScript lazy loading library. In that case, the browser first needs to load the JavaScript library before starting to load images. This long request chain means that it takes a while for the browser to load the image.

Use-native-image-lazy-loading-for-optimization

Today browsers support native lazy loading with the loading=”lazy” attribute for images. That way you can get the benefits of lazy loading without incurring the cost of having to download a JavaScript library first.

Remove and optimize render-blocking resources

Render-blocking resources are network requests that the browser needs to make before it can show any page content to the user. They include the HTML document, CSS stylesheets, as well as some JavaScript files.

Since these resources have such a big impact on page load time you should check each one to see if it’s truly necessary. The async keyword on the HTML script tag lets you load JavaScript code without blocking rendering.

If a resource has to block rendering check if you can optimize the request to load the resource more quickly, for example by improving compression or loading the file from your main web server instead of from a third party.

Remove-and-optimize-render-blocking-resources

Optimize with the new interaction to Next Paint metric

Google has announced a new metric called Interaction to Next Paint. This metric measures how quickly your site responds to user input and is likely to become one of the Core Web Vitals in the future.

You can already see how your website is doing on this metric using tools like PageSpeed Insights.

Optimize-with-new-Interaction-to-Next-Paint-metric

Continuously monitor your site performance

One-off site speed tests can identify performance issues on your website, but they don’t make it easy to keep track of your test results and confirm that your optimizations are working.

DebugBear continuously monitors your website to check and alerts you when there’s a problem. The tool also makes it easy to show off the impact of your work to clients and share test results with your team.

Try DebugBear with a free 14-day trial.

Continuously-monitor-your-site-performance

 

Source link

Continue Reading

Trending

en_USEnglish