Connect with us

HOWTO'S

How To Improve Largest Contentful Paint (LCP) on WordPress

Published

on

How To Improve Largest Contentful Paint (LCP) on WordPress

The Largest Contentful Paint (LCP) is a Core Web Vital metric and measures how long it takes for the largest element to become visible in the viewport. Until the LCP doesn’t load, you won’t see almost anything on the page. It’s because the LCP element is always above the fold — that’s at the top of the page.

LCP is usually an image or a text block. However, it could also be a video or an animation. The LCP element can differ between mobile and desktop.

As you can guess, the largest element is the most relevant one for user experience and perceived load speed.

Think about it: if the page’s biggest element doesn’t load fast, your user experience won’t be good. You would look at an almost blank page, waiting for the page to load… You could even leave the site! When browsing, a few seconds can make a huge difference.

That’s why Google has included LCP as one of the Core Web Vitals metrics — the metrics measuring how great your user experience is.

In June, LCP will roll out as part of the new ranking factor, the Page Experience Signal. For this reason, Largest Contentful Paint matters not only for delivering a great user experience but also for improving your SEO performance.

Advertisement

What’s more, LCP accounts for 25% of the overall PageSpeed Insights score. By improving its performance, you’ll likely improve your page speed grade.

In short, LCP is one of the most important performance metrics right now.

What’s a Good LCP Score

largest-contentful-paint

good score means that LCP should be less or equal to 2.5 seconds. If so, the page will get the green score and pass the assessment.

If LCP is between 2.5 and 4.0 s, the score “needs improvements” — you’ll get an orange grade.

Suppose the LCP is more than 4 seconds. Then the score is “poor”, and you need to fix it as soon as possible.

Let’s now see how we can find the LCP element.

How to Find and Measure the Largest Contentful Paint

There are several ways to find and measure the LCP element, both with Lab and Field Data. Here are the most popular tools you can use to test LCP.

Advertisement

Lab Data tools:

Field Data tools:

You can learn more about the difference between Lab and Field Data in our post on PageSpeed Insights.

Let’s go over some of the easiest and most effective tools: PageSpeed Insights and Search Console.

Measuring and Finding LCP with PageSpeed Insights

PageSpeed Insights is the easiest way to measure and find the LCP element.

After testing your URL’s page, you’ll get the LCP grade in the Lab Data and the Field Data (if available). You’ll also get the PageSpeed recommendations to improve your performance.

Go to the Diagnostics area and look for the “Largest Contentful Paint element” section. You’ll discover what’s the LCP element for the page you’re analyzing.

Let’s go over a couple of examples and make things easier to understand.

Advertisement

The LCP example From Mobile

Let’s analyze a WP Rocket blog page from mobile.

We test the performance of the page in the tool and go to the Diagnostics area. The LCP element is the H1, which is the blog post title:

LCP-mobile-example

As long as the main title loads fast, the page will deliver an excellent user experience.

LCP-mobile-example

The LCP example From Desktop

Let’s now take a look at the same URL from the desktop.

We go again to the Diagnostics Area and look for the LCP element. Not surprisingly, LCP is not the same as for mobile. For desktop, the LCP is an image:

LCP-element-desktop

More precisely, it’s the image of the post.

LCP-desktop-example

Since PageSpeed Insights is a page-based tool, we recommend that you run several tests for different pages.

For an overall analysis, you should also take advantage of the Search Console.

Measuring and Finding LCP on Search Console

You can assess your sitewide performance and detect any issues with the Core Web Vitals report in Search Console.

You’ll be able to access both performances from mobile and desktop:

Advertisement

Once you open the report, you’ll see how your site’s pages perform according to each threshold: good, needs improvement, and poor.

Core Web Vitals report mobile tab - Search Console

Search Console report groups each Core Web Vital performance by status, issue type, and URLs.

For example, you might have some URLs not performing well for LCP. If so, in the report, you may read “LCP issue: longer than 2.5 s (mobile).

By clicking on the row related to that specific issue, you’ll land on a page that provides the list of URLs that need to be fixed. While these URLs are an example, they can give you a pretty accurate idea of what’s going on.

It will be pretty easy to find the URL pattern and move forward with the fixing and the validation.

What Factors Affect LCP and Cause a Slow Score

For WordPress sites, three factors affect LCP: slow server response times, render-blocking JavaScript and CSS, and slow resource load time.

Slow Server Response Times

The browser makes a request to the server, but the server takes too long to send the content requested. Since the browser doesn’t receive the content quickly enough, it takes a while to get something rendered on your screen. As a result, load time is not great. The LCP score gets affected.

Advertisement

You’ll fix the issue by improving your Time to First Byte, using a CDN, and establishing third-party connections early.

Render-blocking JavaScript and CSS

The browser makes a request and gets the content from the server. At this point, the browser will render the content and show it, right? Not so fast.

To render any content, the browser has to analyze (or parse) the HTML of the page and make it “readable” into the HTML structure of the page — that’s the DOM tree. After that, the content will be rendered and fully displayed — unless some scripts and stylesheets block the HTML parsing. These scripts and stylesheets are the render-blocking resources.

As a result of this block, the parsing is delayed. Once again, the content you requested takes a bit before being loaded. The LCP performance gets affected again.

You’ll tackle these issues by deferring and removing unused JS files. Don’t worry! You’ll find all the information you need in the next section.

Slow Resource Load Times

Other files can also cause poor performance and a bad user experience: images, videos, and block-level elements like HTML and CSS files.

Advertisement

As you already know, LCP is related to the elements at the top of the page. And this issue comes up precisely when these files are rendered above-the-fold and take too long to load. As a result, loading time and LCP are affected once again.

You’ll manage the resource load times by optimizing images, minifying and compressing CSS, JS, HTML files, and preloading critical assets.

The bottom line: how fast the browser receives and renders the content requested determines the LCP score.

Let’s understand how to fix all these issues in detail.

c3f3153aff0b1618406603-LCP.png

Don’t Miss Out!

The Core Web Vitals Cheat Sheets are the easiest and fastest way to learn how to optimize LCP, FID, and CLS and prioritize your performance tasks.Enter your email here…Yes, I Want This!

How to Reduce a Largest Contentful Paint Longer Than 2.5 s or 4 s on Mobile and Desktop

Here are ten ways to improve the Largest Contentful Paint performance and fix the Search Console status “LCP issue: longer than 2.5s or LCP issue: longer than 4s“, both from mobile and/or desktop.

Advertisement

1. Improve the Time to First Byte and Reduce Server Response Time

2. Use a CDN

3. Defer JavaScript

4. Remove Unused JavaScript

5. Defer Non-Critical CSS and Inline Critical CSS

6. Minify CSS and JS Files

Advertisement

7. Optimize Your Images

8. Compress Text Files

9. Use Preload for Critical Assets

10. Establish Third-party Connections Early.

Let’s see them in detail.

🚀 For each suggestion, you’ll find a piece of information about its performance impact —  from low to high. The highest the impact is, the highest chance that the Largest Contentful Paint score will improve after following that specific recommendation.

Advertisement

1. Improve the Time to First Byte and Reduce Server Response Time

Performance Impact: high 🚀🚀🚀

One of the main reasons for a bad LCP is a slow server response time.

You can measure your server response time by looking at the Time to First Byte (TTFB).

Every time you want to consume any piece of content, the browser sends a request to the server. The TTFB measures how long it takes for the browser to receive the first byte of content from the server.

By improving your TTFB, you’ll improve your server response time and the LCP score.

Please note that a good TTFB should be under 200 ms — you can quickly check this metric by testing your URL’s site on WebPageTest.

Advertisement
WebPageTest example

There are two ways to fix a bad server time:

1. Enable Page Caching

By enabling page caching, your site’s pages will be stored as HTML files on the server after the page is loaded for the first time. As a result, the content will be displayed faster. It’s an easy and effective way to improve TTFB.

You can also choose one of the top WordPress hosting providers that include a server-level caching option.

WP Rocket can easily take care of page caching with no effort from your side.

A dedicated tab will allow you to enable mobile caching and set the options you prefer. WP Rocket enables 80% of web performance best practices automatically. So, if you’re in doubt, you’ll get covered anyway!

Cache tab

2. Choose a Fast Server Hosting Service

A fast hosting can make a huge difference in performance. And maybe it’s time to upgrade your hosting plan!

As the first thing, your hosting provider should have servers close to the majority of your users. The closer your users are to the server, the fastest the data will be sent.

You should also choose the right server host type. A dedicated hosting server will ensure the fastest performance. Take into consideration how much traffic your site gets, and make your decision.

Advertisement

By enabling caching and choosing a fast hosting, you’ll take care of the following PageSpeed Insights recommendations:

  • Reduce server response times (TTFB)
  • Serve static assets with an efficient cache policy.

2. Use a CDN

Performance Impact: medium 🚀🚀

A CDN helps you reduce the length of time between the user request and the server response. This amount of time is the latency. The back and forth between the browser request and the server response is the round trip time (RTT).

If your users are located far from the server’s location, it could take a while before all the assets (e.g., images, JS and CSS files, videos ) are sent. Latency and RTT will be high and will affect loading time and the LCP score.

You already saw how the location of your server could affect your site’s performance.

A CDN solves the issue thanks to a global network of servers. No matter where your users are located. Every time they request a page, they will receive the assets from the closest server. Simple as that.

RocketCDN is the best way to let your users access your site quickly and easily.

Advertisement

If you want to know more about the CDN benefits and the different types, you can read our article.

Choosing a CDN will help you address the following PageSpeed recommendations:

  • Serve static assets with an efficient cache policy
  • Enable text compression.

Please note that a CDN will address such recommendations only if properly configured. The default options might not be enough to improve performance as expected.

3. Defer JavaScript

Performance Impact: high 🚀🚀🚀

Render-blocking resources like JavaScript files are one of the main causes of a bad LCP score.

Deferring the JavaScript files will help you tackle the issue. In other words, you’ll change the priority of the JS files being loaded.

Remember? The browser parses the HTML, builds the DOM tree, and then renders the page — unless there is any blocking resource to slow the process down.

Advertisement

By deferring JavaScript, the browser will process and load the JS files only after parsing the HTML document and building the DOM tree. Since there won’t be anything to block the process, rendering will be much faster — and the LCP metric will improve.

You can add the defer attribute to the JavaScript files so that the browser can detect the resources to defer. The browser will analyze the HTML and build the DOM tree with no interruption.

Here’s an example of the defer attribute:

<script defer src="/example-js-script"></script>

The easiest way to manage the JavaScript resources is to take advantage of WP Rocket and its Load Javascript Deferred feature.

You can choose this option in the File optimization tab. What’s more, you can easily exclude specific JS files from being deferred — in case the defer feature conflicts with any file.

File optimization Tab - Load JavaScript deferred

You’ll address the “Eliminate render-blocking resources” PSI recommendation in a few clicks — even though the render-blocking resources issues don’t stop here.

Let’s move to the next point about tackling render-blocking resources.

Advertisement

4. Remove Unused JavaScript

Performance Impact: medium 🚀🚀

Another way to eliminate the render-blocking resources is to remove the JavaScript resources that are not used. They may not be used for two reasons:

  • They’re not used anymore on your site. They’re still in the code but are completely useless.
  • They aren’t included in the above-the-fold content. Therefore, they’re non-critical for building the DOM tree. Yet, these files have a reason to be there (e.g., Google Analytics tracking code).

You can find the list of the unused JS files in the PageSpeed report in the “Remove unused Javascript” section:

List of unused Javascript files - PageSpeed Insights Report

There are two ways to solve this issue in WordPress:

1. Load the JavaScript files only when needed.
For instance, the files should be loaded only on the pages that need that specific file — in any other case, the execution of JS should be disabled. You can take care of this aspect with plugins such as Perfmatters and Assets Cleanup.

2. Delay the JavaScript files.The JavaScript files won’t be loaded until the first user interaction (e.g., scrolling, clicking a button). If there’s no user interaction, the JS files won’t be loaded at all.By delaying JavaScript, the JS files won’t be detected by Lighthouse nor listed in the “Remove unused Javascript files” recommendation — even though not all the scripts from the PageSpeed recommendation list can be safely delayed.
For instance, the Google Analytics tracking code is usually included in this PageSpeed Insights recommendation. If you delay the JS files, the Google Analytics JS file won’t be reported anymore.
Note: Delaying JS files doesn’t have the purpose of solving this PSI recommendation per se. However, it works well in addressing this PageSpeed audit and improving your LCP score. So, it’s good for you to know.

So, how can you delay JS resources? You have different options.

If you’re looking for a free plugin to delay JavaScript files, you can use Flying Scripts.

Advertisement

Another way to safely tackle any unused JavaScript is to take advantage of WP Rocket! The plugin allows you to delay the JavaScript execution in a few clicks from the File optimization tab. You can easily include the list of scripts to delay and let the plugin do the job for you:

File optimization tab - Delay JavaScript execution

As we mentioned, by removing unused Javascript files, you’ll address the specific PageSpeed recommendation. Overall, you’ll work towards “Eliminating render-blocking resources” and “Reducing javascript execution time”.

Your LCP grade will get another boost.

5. Defer Non-Critical CSS and Inline Critical CSS

Performance Impact: medium 🚀🚀

As for the JS files, you should also defer non-critical CSS — all the files not relevant for rendering the page. In other words, you should change the priority for these files, too.

They will load after the browser has rendered the most relevant content on the page.

While deferring the CSS files, you should also inline critical CSS — the resources above-the-fold that need to be loaded as fast as possible. It means that you should identify the critical CSS (or Critical Path CSS) and inline them inside the HTML structure.

Advertisement

If you want to implement both actions on WordPress, here’s how the process looks like:

  1. First, you should extract and inline the Critical Path CSS (CPCSS) using one available generator tool. You can find one here.
  2. Then, you should load the rest of the classes asynchronously by applying the following pattern.

You can read more about the process in the dedicated Google resource.

Another tip is to avoid placing large non-critical CSS code in the <head> of the code.

If you want to take care of both critical and non-critical CSS quickly, you can take advantage of the Optimize CSS delivery feature provided by WP Rocket. This option will defer non-critical CSS and inline critical CSS — you don’t need to do anything else.

In the File optimization tab, you can choose the option:

File optimization Tab - Optimize CSS delivery

By implementing these actions, you’ll address the “Eliminate render-blocking resources” and “Avoid chaining critical requests” PageSpeed Insights recommendations.

6. Minify CSS and JS Files

Performance Impact: low 🚀

Another effective way to optimize Largest Contentful Paint is to minify CSS and JS files.

Advertisement

Minification comes down to optimizing your code by making it more compact. It means to remove any white spaces, line breaks, and comments included in the code. As a result, minification will reduce CSS and JS files’ size and make them load faster.

It sounds easy, but the reality is more complicated. It’s not always simple to minify both file types and be sure to have excluded all the right resources — especially if you’re not a developer. Either way, it’s time-consuming.

The easiest and most effective way to take care of minification is to use a plugin like WP Rocket.

In the file optimization tab, you’ll have the opportunity to minify both CSS and JavaScript files.

 File optimization tab - Minifying CSS and JS files

You’ll address the following PageSpeed Insights recommendations:

  • Minify CSS
  • Minify JS
  • Avoid enormous network payloads.

7. Optimize Your Images

Performance Impact: high 🚀🚀🚀

Optimizing images is another relevant way to fix a bad LCP score.

Images are often the LCP element from mobile or desktop. By improving their loading time, you’ll boost the Largest Contentful Paint performance.

Advertisement

Here’s what you can do to fix any performance issues about images.

Compress and resize your images. You should reduce the file size without losing quality. The smaller the image dimension is, the faster the loading time will be.

To be clear: if you use a tool to optimize your images on the desktop, you will only optimize the original size. The images that you upload on WordPress won’t be resized. As you may know, in WordPress, there are different image sizes. Unless you use a proper image optimization plugin, you won’t optimize anything for performance.

For optimizing a few images, you could use a tool like ImageOptim. On the other hand, if you want to optimize more images and their thumbnails in bulk, Imagify is the perfect solution. You’ll reduce your images’ weight without sacrificing their quality. You’ll save plenty of time!

Convert your images into new formats. Overall, Google recommends the WebP format. And that’s why all WordPress image optimizer plugins now include the option to convert images to WebP. Other formats you may take into account are JPEG 2000 and JPEG XR.  These formats are smaller than the JPEG, PNG, and GIF ones and help improve performance.

Use responsive images. You shouldn’t use the same images’ size for desktop and mobile. For instance, if the desktop image size is large, the mobile image size should be medium.

Advertisement

Page builders like Elementor allow users to upload different image sizes according to the device. Mobile image optimization is pretty essential, and the mobile score matters the most. Don’t underestimate its impact on your LCP grade!

Exclude the LCP element from lazy-loading. While overall lazy-load helps improve loading time, it can make the LCP score worse, especially when the LCP element is an image and gets lazy-loaded. That’s why excluding the LCP element from lazy-load and displaying it directly in the HTML of the page is an excellent way to optimize the LCP score.

Use a static image instead of a slider. Sliders can be very heavy to load because of the code. On the other hand, a static image made by HTML code is lighter and faster.

By optimizing your images, you’ll address the following PageSpeed Insights audits:

  • Serve images in next-gen formats
  • Properly size images
  • Efficiently encode images
  • Avoid enormous network payloads.

8. Compress Text Files

Performance Impact: high 🚀🚀🚀

You should also compress text files such as HTML, CSS, or JavaScript resources.

Compression means to “zip” your files in a smaller and lighter format so that they load faster. Once you reduce their size, the transfer between browser and server will be quicker. The browser will be able to load these resources faster. Load time and LCP will improve.

Advertisement

You can use compression formats such as GZIP and Brotli. On the one hand, GZIP is supported by most of the hosts. On the other one, Brotli is more performant and currently mostly recommended. Learn more about  GZIP vs. Brotli in our blog post.

You can easily enable GZIP compression on WordPress by using a plugin. You can choose between different options, from the straightforward Enable Gzip Compression plugin to WP Rocket, which automatically includes GZIP compression. Also, some hosts enable GZIP compression by default.

Either way, you’ll address the “Enable text compression” PageSpeed recommendation.

9. Use Preload for Critical Assets (As the Largest Contentful Paint Image)

Performance Impact: low 🚀

At this point, you know how much the assets above the fold are critical for a good performance score. These critical resources can be fonts, images, videos, CSS, or JavaScript files.

To improve your LCP score, you should always make the critical assets load as fast as possible.

Advertisement

So, you may be wondering how to preload the Largest Contentful Paint image.

The Preload option comes in handy. It tells the browser to prioritize the load of these resources. In other words, the Preload prevents the browser from discovering and loading these critical files (including the LCP image) until much later.

You can include the rel=”preload” in the code:

<link rel="preload" as="script" href="script.js">
<link rel="preload" as="style" href="style.css">
<link rel="preload" as="image" href="img.png">
<link rel="preload" as="video" href="vid.webm" type="video/webm">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Source: Google

For preloading the LCP image, you can also use a plugin like Perfmatters.

If you need to preload fonts, you can take advantage of the WP Rocket feature:

Advertisement
Preload tab - Preload fonts feature

You can read more about the best practices for web font preloading in our dedicated article.

By using preload for critical assets, you’ll address the “Preload key requests” PageSpeed recommendation.

10. Establish Third-party Connections Early

Performance Impact: low 🚀

Making the third-party connections faster is an additional way to optimize your LCP performance.

You should use the Preconnect option.

Let’s say that there’s a CSS or JS file requested from a third-party, such as Facebook or Google Analytics. The browser will request the external resource.

If enabled, the Preconnect option tells the browser to establish a connection with the external domain as fast as possible. The browser will then handle the request in parallel with the ongoing rendering process.

Advertisement

You can include the rel=”preconnect” in your code:

<link rel="preconnect" href="https://example.com">.

As an alternative, you can use a plugin as Perfmatters.

Since your browser may not support the preconnect option, it’s always best to implement dns-prefetch as a fallback technique. You’ll then resolve the DNS lookups faster. In other words, the external files will load more quickly, especially on mobile networks.

You can add the rel=”dns-prefetch” to your code — as a separate tag from the preconnect attribute:

<head>
 …
<link rel="preconnect" href="https://example.com">
<link rel="dns-prefetch" href="https://example.com">
</head>

WP Rocket’s Preload tab allows you to prefetch the DNS requests. You only have to specify the external hosts to be prefetched:

Preload tab - Prefetch DNS requests

By establishing third-party connections earlier, you’ll improve the Time to First Byte and the server response time. You’ll also address the “Preconnect to required origins” PageSpeed recommendation.

Author:
WP Rocket.com

Advertisement
Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address

AFFILIATE MARKETING

How to Add Affiliate Disclosure for Each Blog Post Automatically

Published

on

How to add affiliate disclosure for each blog post automatically

Do you want to add an affiliate disclosure for each blog post automatically?

Affiliate marketing is one of the easiest ways to make money online. However, if you don’t disclose your affiliate links then you could end up in legal trouble.

In this article, we will show you how you can add an affiliate disclosure to all your WordPress blog posts.

Why Add an Affiliate Disclosure to Each WordPress Blog Post?

With affiliate marketing, you earn a commission every time someone clicks a referral link and makes a purchase. It’s a great way to make money online blogging with WordPress.

However, you must make it clear that your links are paid advertisements by adding an affiliate disclaimer. That just means posting a short notice explaining what affiliate marketing is, and that you get money from talking about the product or service.

Many countries have laws about failing to disclose paid endorsements. For example in the United States, you might get a fine from the Federal Trade Commission. You may even end up banned from reputable networks such as Amazon affiliates.

Even if you don’t get into legal trouble, customers who click on undisclosed affiliate links may feel tricked and stop visiting your WordPress website.

Advertisement



How to Add an Affiliate Disclosure to Each WordPress Blog Post

One option is to publish the affiliate disclaimer on its own page, as we do on WPBeginner.

The WPBeginner affiliate disclaimer page

You can then add a link to every page that features an affiliate URL. This may be a good choice if you have a longer disclosure and don’t want to distract from the post’s content.

If yours is short, then you can often add the full text of the disclaimer to every post.

An example affiliate disclaimer on a blog

No matter which option you choose, you can save time and effort by adding the affiliate disclosure automatically. Simply use the quick links below to jump straight to the method you want to use.

Pretty Links is one of the best affiliate marketing plugins that can automate all your affiliate activities, including adding a disclosure.

Pretty Links comes with an advanced auto-linking feature that allows you to enter the keywords or phrases that you want to turn into affiliate URLs.

Every time you type this word or phrase, Pretty Links will turn it into an affiliate URL automatically. Even better, if you have created a disclosure notice page, Pretty Links can also add a link to it in the post.

For example, if you add “MacBook Pro” as a keyword and then use that phrase in a new post, then Pretty Links will automatically turn “MacBook Pro” into an affiliate URL and add a link to your disclosure notice page.

Advertisement



An affiliate disclaimer, created using Pretty Links

Note: Pretty Links won’t insert the disclosure link if you only add affiliate URLs manually. It only works when a post uses automatic keyword linking.

To get started, you’ll need to install and activate Pretty Links. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, go to Pretty Links » Activate. You can then add your license key to the following field: ‘Enter Your Pretty Links Pro License Key.’

Activating the Pretty Links WordPress plugin

You can find this information under your account on the Pretty Links website. After typing in this information, click on the ‘Activate’ button.

With that done, you’ll need to go to Pretty Links » Add New and then add the first link you want to manage using the Pretty Links plugin.

For detailed step-by-step instructions, please see our guide on how to cloak affiliate links on your WordPress site.

How to cloak an affiliate link in WordPress with Pretty Links

After that, click on the ‘Pro’ tab. In the ‘Keywords’ field, type in each word or phrase where you want to automatically insert this affiliate URL.

Simply repeat this process for all your affiliate links.

Adding keywords to the Pretty Links affiliate linking plugin

Every time it adds this affiliate URL, Pretty Links will also add a link to your disclosure notice.

The next step is creating the disclosure notice page that Pretty Links will link to. Simply go to Pages » Add New. You can then type in your affiliate disclaimer and add any categories or tags that you want to use.

Advertisement



An example affiliate disclaimer

When you’re happy with your disclaimer, publish the page to make it live. It’s a good idea to make a note of the page’s URL, as you’ll need it in the next step.

Once you’ve done that, simply go to Pretty Links » Options. Then, click on the ‘Replacements’ tab.

Pretty Links' auto-linking and replacement settings

Here, check the ‘Enable Replacements’ box if it isn’t already selected.

After that, check the ‘Link to Disclosures’ box. In the ‘URL’ box, go ahead and enter your affiliate disclosure URL.

Pretty Links Disclosure Notice

By default, Pretty Links will use ‘Affiliate Link Disclosures’ as your link’s text. However, you can change this to anything you want by typing into the ‘Text’ field.

You can also change where Pretty Links adds the affiliate disclaimer link. By default, it shows the URL at the bottom of the post, so it doesn’t distract visitors from the post’s content.

Another option is to add the disclaimer to the top of the post. This is where we include it on WPBeginner.

WPBeginner Disclosure Notice

This lets visitors know the post contains an affiliate link before they start reading, which is a good way to build trust with your audience. However, some people may see the disclaimer and decide not to stay on the page, which can increase your bounce rate.

You can also add the disclaimer to both the top and bottom of each post. This may be a good idea if you write very long posts, but most sites don’t need multiple disclosures per page.

To place the affiliate URL, simply open the ‘Position’ dropdown and choose Bottom, Top, or Top and Bottom.

Advertisement



Changing where an affiliate disclaimer appears on your WordPress website

Once you’ve done that, just scroll to the bottom of the page.

Then, click on the ‘Update’ button.

Saving your Pretty Links settings

Now, Pretty Links will add an affiliate disclosure link every time it auto-inserts an affiliate URL to your posts, pages, or custom post types.

Method 2. Add Affiliate Disclosure Using WPCode (More Customizable)

Sometimes you may want to add the affiliate disclosure to different areas of every blog post. For example, you might show the disclosure after you mention each affiliate product for the first time.

In this case, you can create a shortcode that adds your affiliate disclaimer. This gives you complete control over where the disclosure appears, without you having to type the entire text every single time.

A custom shortcode created with WPCode

The easiest way to create a custom shortcode is using WPCode. This plugin lets you add code snippets to WordPress without editing your theme’s functions.php file.

WPCode also helps you avoid common errors by performing smart code snippet validation.

There are lots of ways to add an affiliate disclosure using WPCode. Besides the shortcode method, we’ll also share an easy way to automatically add the disclaimer to every post, page, or custom post type.

The first thing you need to do is install and activate the free WPCode plugin on your website. For more details, see our step-by-step guide on how to install a WordPress plugin.

Advertisement



Upon activation, go to Code Snippets » Add Snippet.

Adding a custom code snippet to WordPress

This will bring you to the ‘Add Snippet’ page where you can see all the ready-made snippets that you can use on your site.

Since we want to add custom code in WordPress, hover your mouse over ‘Add Your Custom Code (New Snippet).’ Then, click on ‘Use snippet’ when it appears.

Adding custom snippets to WordPress

To start, enter a title for the custom code snippet.

This could be anything that helps you identify the snippet in the WordPress admin area.

Adding a title to a WPCode custom code snippet

We’re going to add a PHP snippet, so open the ‘Code Type’ dropdown and choose the ‘PHP Snippet’ option.

You can then go ahead and paste the following code into the code box:

function disclosure() {
    return "<p class="disclosure">This site may contain links to affiliate websites, and we receive an affiliate commission for any purchases made by you on the affiliate website using such links.</p>";
}

add_shortcode( 'disclosure', 'disclosure' );

You can use any text as your affiliate disclaimer, simply by editing the code above. For example, you might want to add a link in HTML to your affiliate disclosure page.

Once you’ve done that, scroll to the ‘Insertion’ section and make sure ‘Auto Insert’ is selected.

Advertisement



Auto-inserting custom code snippets in WordPress

Then, open the ‘Location’ dropdown and choose ‘Frontend Only’ since we only want to use this code on our site’s frontend, which is what visitors see when they visit your site.

You can also organize your snippets by adding tags.

When you’re happy with how the snippet is set up, scroll to the top of the screen and click on ‘Save Snippet.’

Saving your WPCode snippet

After that, you can make the code snippet live by clicking the ‘Active’ toggle.

Finally, don’t forget to save the change by clicking on ‘Update.’

Updating a custom code snippet in WordPress

Now you can add the affiliate disclosure to any page, post, or custom post type using the [disclosure] shortcode. For more details on how to place the shortcode, you can see our guide on how to add a shortcode in WordPress.

How to Automatically Display the Affiliate Disclosure with WPCode

With WPCode, there are lots of different ways to add an affiliate disclosure to your WordPress website, including automatically adding it to every post.

This can save you a lot of time and effort, since you don’t need to add the shortcode manually. However, the disclosure will appear in the same location on every page.

Advertisement



To automatically add the disclaimer, simply create a new custom code snippet by following the same process described above. However, this time open the ‘Code Type’ dropdown and select ‘HTML Snippet.’

Adding an HTML snippet to WordPress

You can now add your disclaimer in the code editor, complete with the formatting that you want to use. For example, here we’re adding a simple disclaimer as a new paragraph:

<p>This site may contain links to affiliate websites, and we receive an affiliate commission for any purchases made by you on the affiliate website using such links.</p>

Next, scroll to the ‘Insertion’ section and open the ‘Location’ dropdown.

You can now choose where this disclaimer should appear, such as ‘Insert After Post’ or ‘Insert Before Content.’

Automatically inserting an affiliate disclaimer

You can then go ahead and enable the snippet by following the same process described above. WPCode will now automatically show the disclaimer on every page, post, and custom post type, without you having to add the shortcode manually.

Method 3. Add Affiliate Disclosure Using Full-Site Editor (Block-Enabled Themes Only)

If you’re using a block-based theme like Hestia Pro, then you can add an affiliate disclosure to your theme’s blog post template.

This is a good choice if you want to show the exact same disclosure on every blog post. However, you won’t have the option to change the style or text on individual posts, so it’s not a good choice if you want to show different information on different pages.

To use this method, go to Themes » Editor in the WordPress dashboard.

Advertisement



Opening the WordPress full-site editor (FSE)

By default, the full-site editor will show your theme’s home template, so you’ll typically want to select a new template.

If you want to show the affiliate disclosure across your entire website, then we recommend adding it to the footer template part. 

However, if you just want to show the disclaimer on your blog posts, then click on Templates on the left-hand side of the screen in the Design section.

Adding an affiliate disclosure using the full-site editor (FSE)

The editor will now show all the layouts that make up your WordPress theme.

Simply click go ahead and click on ‘Single.’

Adding an affiliate disclaimer to a WordPress blog post template

WordPress will now show a preview of the template.

To edit this template, go ahead and click on the small pencil icon.

Editing a blog post template in a block-enabled WordPress theme

With that done, click on the blue ‘+’ icon in the top left corner.

In the search bar that appears, type in ‘Paragraph’ to find the right block. 

Adding a Paragraph block to a full-site template

You can now drag and drop the block onto the area where you want to show the disclaimer. 

Now, click on the block and type in your affiliate disclaimer. 

Advertisement



Adding text to a WordPress blog template

You may also want to change how the disclaimer looks. 

To change the font size, background color, and more, simply click to select the paragraph block. Then, select the ‘Block’ tab in the right-hand menu.

Styling affiliate disclaimers using the WordPress FSE block-based editor

You can now change the background color and text color, or make the disclaimer bigger or smaller using the settings in the right-hand menu.

When you’re happy with how the disclaimer looks, click on the ‘Save’ button.

An example of an affiliate disclaimer, created using the FSE

Now, if you visit any blog post on your affiliate website, you’ll see the disclaimer in action. 

We hope this article helped you learn how to add affiliate disclosures for each blog post automatically. You can also go through our guide on the best giveaway and contest plugins and how to create an email newsletter the RIGHT way.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address
Continue Reading

HOWTO'S

What a 500 Internal Server Error is, and How to Fix it

Published

on

What a 500 Internal Server Error is, and How to Fix it

No one likes opening a webpage and seeing a 500 internal server error message—especially when it’s on your own website.

The problem with seeing this is the mystery behind it: a 500 internal server error is a very general HTTP status code with no definitive clues as to what is causing it. 

If you’re seeing one now and are stumped, don’t worry. We can help you find what’s wrong, and what you need to do to fix it.

What is a Website Status Code?

Also known as a HTTP status code, these are a series of numbers that equates to a certain status of a webpage that you are currently viewing.

Whenever you visit a website, your browser sends a request to its server. The server then processes it, and sends back the resources needed to load whichever page you’re requesting. Attached to that is an HTTP header as well as a status code. 

If everything can load fine, that status code is a 200. If there’s something wrong, it could be a 500 status code.

Advertisement



Webmaster’s Note: This is part of our more comprehensive guide to Technical SEO, where I cover everything you need to know about crawlability, indexing, and page speed optimization, as well as helpful tips on how to troubleshoot common website errors. 

What are 500 Internal Server Errors?

The 500 Internal Server Error, also known as HTTP Error 500, is a server response that indicates an unexpected problem preventing the server from fulfilling the user’s request. 

In simpler words, it’s a general message from your server saying “There’s a problem, but I’m not sure what.” 

500 Internal Server Error

So if you’re seeing one now, then it is important to understand that the issue is not due to the user’s browser, internet connection, or device. Instead, the problem lies with the server that hosts the website. This server-side error can manifest in various messages, as different websites may display their own variations of the 500 error.

Here are some of the different variations of the 500 Internal Server Error:

  • 500 Internal Server Error
  • Internal Server Error 500
  • HTTP Error 500
  • HTTP Status 500 – Internal Server Error
  • Error 500 Internal Server Error
  • 500 Error
  • Temporary Error (500)
  • 500 – Server Error
  • The website cannot display the page – HTTP 500.

Causes of 500 Internal Server Errors

The generic 500 server error can be challenging to pinpoint, because it is a general error—it does not point to any specific cause from the get-go. This means you have to dig into your website to find the cause. 

But the good news is there are some likely culprits you can look at first:

Advertisement



  • Browser Cache: Clearing your browser cache can help resolve the issue by ensuring that you are accessing the most up-to-date version of the website.
  • Database Issues: Incorrect login credentials or a corrupt database can trigger a 500 error. Double-check that the credentials are correct and consider repairing or optimizing the database.
  • Corrupted Files: If the core files of a WordPress website become corrupted, it can lead to a 500 error. Restoring or updating these files can help resolve the issue.
  • Server and Disk Space: Issues within the server, such as running out of disk space or PHP memory limit exhaustion, can result in a 500 error. Contact your hosting provider to address these server-related issues.
  • File Permissions and .htaccess: Incorrect file or folder permissions, as well as a corrupt or broken .htaccess file, can cause a 500 error. Double-check these settings and make necessary adjustments.
  • Third-Party Plugins and Themes: Compatibility issues or errors within third-party plugins or themes can trigger a 500 error. Disable or remove these elements one by one to identify the problematic ones.
  • Malware infections: Malicious software can compromise your website’s functionality and trigger internal server errors. For example, if a hacker injects a piece of malicious code into your website’s files, it can disrupt the server’s operation and result in a 500 error.
  • Broken script injections: Hackers can inject malicious scripts into your website’s code, which may cause conflicts and result in internal server errors.

By understanding these potential causes, you can take the necessary steps to address them and resolve the 500 internal server errors. 

Troubleshooting 500 Internal Server Errors

To resolve 500 internal server errors and get your website back online, you could follow these detailed troubleshooting steps:

Clear Your Browser Cache 

Clearing your cache can resolve a 500 Internal Server Error

Before diving into complex troubleshooting steps, clearing your browser cache is a good starting point. By clearing the cache, you ensure that any previously stored data or cached versions of the website are removed, allowing for a fresh attempt at accessing the site.

This can be especially helpful if the error was caused by a previous version of the website being cached locally on your device.

  • Example: Let’s say you are using Google Chrome. To clear your browser cache, you would click on the three dots icon at the top right of the browser window, go to “More tools,” select “Clear browsing data,” choose a time range or “All time” option, and finally, click “Clear data” to remove the cached files.

Reload the Page 

After encountering a 500 error, it is worth waiting a minute and then attempting to reload the page. 

The error can be temporary if it occurs due to server overload or maintenance. By reloading the page, you give the server a chance to resolve the issue and send a proper response.

  • Example: You visit a news website and encounter a 500 internal server error while trying to access an article. Instead of immediately assuming a problem with your device, you wait for a moment and then press F5 or Ctrl + F5 to refresh the page. If the server overload was the cause, the website would likely be accessible again after the reload.

Check for Recently Installed or Updated Software 

If the 500 error persists, it is important to investigate whether any recently installed or updated software on your website may be causing conflicts. 

This could include plugins, themes, or any other website components that have undergone changes.

  • Example: You recently updated the content management system (CMS) of your WordPress website, and shortly after, you start experiencing 500 Errors. To troubleshoot the issue, you can compare the date of the CMS update with the start of the errors. If they align, it may indicate that the update caused compatibility issues or conflicts with other plugins or themes.

Check for Server-side Errors

Review your server’s error logs to identify any specific error messages or patterns. These logs can provide valuable insights into the underlying issues causing Error 500.

  • Example: A server error log indicating database connection failures may indicate a misconfiguration in your website’s database settings, leading to 500 internal server errors.

Review Error Logs

Check and review the server's error logs to fix an 500 Internal Server Error

Look for recurring errors or warnings that may indicate underlying issues. Correlate timestamps with user-reported errors if applicable to pinpoint specific areas of concern.

Advertisement



  • Example: If users consistently report a 500 error when submitting a contact form, reviewing error logs during those instances may reveal issues with the form submission script.

Identify and Fix .htaccess File Issues

Open the .htaccess file using a text editor and check for syntax errors or conflicting directives. Rectify any mistakes or consider renaming the file to regenerate it.

  • Example: A website experiencing Error 500 after adding rewrite rules to the .htaccess file may have introduced syntax errors that disrupt the server’s operation.

Address Script Injection Problems

Inspect your website’s files and code for any suspicious or unrecognized scripts. Remove any injected code and ensure that your website’s security measures are robust.

  • Example: If your website allows user-generated content and you notice unexpected scripts in certain posts or comments, it is possible that malicious users have injected their own code.

500 Error VS. Other 5xx Response Codes

Common 5xx Response Codes

If you’re seeing an error screen and none of these solutions worked, then you might be dealing with a different kind of 5xx error. 

To have a better understanding of the differences between generic 500 errors and other internal server errors, it’s essential to know the most common 5xx response codes:

  • 500 Error: This code indicates that the server encountered an unexpected problem that prevents it from fulfilling the request. It’s an unidentified issue without providing additional details.
  • 501 Error: A “not implemented” HTTP status code, it shows that the server is unable to execute the request. This may happen due to an inability to identify the request’s objective or insufficient power to fulfill it.
  • 502 Error: Known as a “bad gateway,” this response happens when an invalid response is detected by the server acting as a proxy or gateway. This means that the server received an invalid response from an upstream server, potentially indicating a problem with your server if you are using a web application firewall.
  • 503 Error: Happens when a service is unavailable, which can be triggered by server overload, maintenance, or even a malware attack. The server is unable to handle additional tasks at that moment.
  • 504 Error: A “gateway timeout” indicates that the server, operating as a proxy or gateway, was unable to identify the request within the specified time limit.
  • 505 Error: This error happens when the server cannot recognize the HTTP protocol used in the request.
  • 511 Error: An error for network authentication. This means that the server requires user authentication to access the requested resource.

How 500 Error Codes Can Impact Your SEO

Encountering frequent 500 internal server errors can have several negative implications for your website’s SEO:

  • User Experience and Rankings Internal server errors can significantly impact user experience, leading to a low engagement rate as visitors encounter a non-functioning website. User experience is a critical signal for search engines, as they aim to provide the most relevant and satisfying results to users. High bounce rates and decreased engagement can signal to search engines that the website may not be meeting users’ needs, potentially impacting its SEO rankings.
  • Crawling and Indexing – Search engine crawlers could also encounter Error 500 as they attempt to access and index website content. If search engines repeatedly encounter these server errors during crawling, they may interpret it as a sign of poor website maintenance or technical issues. This can result in difficulty for search engines in indexing and ranking the site effectively. It also means that fresh content updates or changes may not be properly discovered or reflected in search results.
  • Domain Authority and Reputation – A website that frequently experiences internal server errors can have a negative impact on its authority and reputation, both in the eyes of search engines and users. 

If a site consistently delivers a poor user experience due to server errors, users may lose trust and credibility in the website. Search engines prioritize user satisfaction and may accordingly adjust rankings for websites that consistently provide a subpar experience. That’s why I consider engaging in ongoing technical SEO a must for any webmaster or SEO professional.

How to Prevent 500 Internal Server Errors

To minimize the risk of future 500 Internal Server Errors, implement these preventive measures:

Regularly Update and Maintain your Website

Keep your content management system (CMS), plugins, and themes up to date to prevent conflicts or vulnerabilities.

Remove any unused or outdated plugins or themes that may create conflicts or security vulnerabilities.

  • Example: An e-commerce website should regularly update its CMS, such as WordPress, along with the associated plugins, to ensure that security vulnerabilities are patched and compatibility issues are avoided.

Implement Reliable Security Measures:

Install a reputable security plugin to protect your website from potential attacks and malware infections. Use strong, unique passwords for administrative access and enable two-factor authentication whenever possible.

If you’re using WordPress, here’s how to scan your WordPress site for better security and to prevent any malicious code.

Advertisement



  • Example: Utilize a security plugin that can actively scan your website for vulnerabilities, block suspicious IP addresses, and provide real-time alerts for potential threats.

Backup your Website Regularly:

Establish a regular backup routine to ensure that you have a clean copy of your website to restore in case of issues or errors.

Store backups in secure off-site locations or use a reliable backup service.

  • Example: Use backup plugins or backup your website manually by downloading both your website files and database, then store the backups on a secure cloud storage platform or external hard drive.

Key Takeaway

Encountering a 500 internal server error can be a frustrating experience, but by understanding its causes and following the troubleshooting steps outlined in this article, you can effectively resolve these issues and minimize their impact on your website and SEO

Prioritize regular maintenance, implement reliable security measures, and establish a backup routine to lessen the chances of having to deal with 500 Internal Server Errors.

Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address
Continue Reading

HOWTO'S

How to Launch a Newsletter on WordPress.com

Published

on

By

How to Launch a Newsletter on WordPress.com

A brand new course to help you successfully launch your newsletter. No registration required and it doesn’t cost a thing.

Unleash your inner creator! Dive into the exciting journey of crafting captivating newsletters with WordPress.com’s newest course: Newsletters 101: From Basics to Automation and Monetization

This completely free online course is designed to share the key skills of creating, managing, and monetizing your newsletter. Whether you’re a blogger, entrepreneur, or part of a non-profit organization, this is your gateway to reaching the hearts and minds of your audience directly in their inboxes.

Let’s dive in!

The power of newsletters

Newsletters offer creators and businesses a unique advantage: a simple way to establish a personal, direct line of communication with their audience, free from the whims and distractions of social media algorithms. Publishing a newsletter can help you forge stronger relationships with your subscribers, nurturing a loyal following over time.

And newsletters are an invaluable tool for generating revenue, too. People who sign up for your newsletter are much more likely to be interested in what you have to offer, which means they’re more receptive to your ideas, recommendations, and products.

Advertisement



Get set up for success

In this course we’ll walk you through the basics of setting up a newsletter, even if you don’t have a website. And if you already have a website you’d like to turn into a newsletter, we’ll also guide you on how to do so with just a few clicks. 

Our Newsletters 101 course will get you started with what you need no matter where you’re at or what your niche is. You’ll find pro tips, ideas, how-tos, and resources for getting the most out of your newsletter. 

The best part? The course is free and no registration is required. Just click the button below and get started!

Unleash your monetization potential

Want to make money through your newsletter? We’ve got you covered! We’ll walk you through setting up paid subscriptions, so you can start generating recurring revenue by simply sharing what you’re passionate about. 

We’ll also explore affiliate marketing, a way to earn commissions through carefully curated product recommendations. Plus, we’ll guide you on integrating ads or sponsored content, offering a win-win scenario where your audience benefits from valuable content, and you earn from your efforts.

Making it real

You might be thinking, “I’m not a techie, can I really do this?” Absolutely, yes! In this course, we break down everything into bite-sized pieces, making it simple to follow along, no matter your technical abilities.

Advertisement



And to support you on the way, we have an Education Community Forum where you can ask questions and celebrate your progress. 

See you there!

PS: Get the best out of our learning resources by checking out all of our courses, live webinars, and recorded replays


Join 100,487,100 other subscribers

Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address
Continue Reading

Trending