How to See Old Versions of Any WordPress Site (3 Tools)

Do you want to see old versions of any WordPress site?

Seeing an old version of a WordPress site is not only fun, but it can provide you with design inspiration and give you access to content and media that are no longer available online.

In this article, we’ll show you how you can simply see older versions of any WordPress website.

Why See Old Versions of WordPress Sites?

The internet moves at hyperspeed. Beyond strolling through memory lane, there are many good reasons to view an older version of a WordPress website.

Most website elements will change over time. Websites go through redesigns, content gets deleted, and sometimes entire sites will go offline.

Being able to lookup an older version of a website can be very useful in a lot of situations.

• You need to retrieve older content from a website
• You want to recreate a resource that’s no longer online
• You need screenshots for a before and after website redesign
• You’re looking for design inspiration from old websites

With that said, let’s take a look at how to see older versions of any website.

How to See Old Versions of Any Website (3 Tools)

There are a few different online tools that create archives of websites. These tools take snapshots at different points in time and archive those website pages.

It works similar to your own WordPress backups except these are accessible to the entire internet.

Usually, these tools do archives by popularity and traffic. Some sites will have thousands of copies stored over time, while others might be impossible to find.

That being said, here are the 3 different tools you can use to find old versions of any website on the internet.

1. Wayback Machine

The Internet Archive is a digital library of the internet. It has a tool called Wayback Machine, which has over 554 billion archived web pages.

Wayback machine is a web archive that lets you find screenshots of old websites at different points in time.

To use this tool, navigate to the Wayback Machine website, enter the website URL you want to check, and click ‘Browse History’.

Then, it’ll show you a graph of the different dates where website copies were made.

You can click the top bar to sort by different years.

Below that, you’ll see a month by month calendar breakdown.

Next, click on a particular day, and there will be a popup to select the time.

You need to click the time you want, and it’ll load a cached copy of the website. You can right click to view the site in a new tab.

Once the page loads, you’ll be able to interact with it normally.

You can navigate from page to page, view images, click links, and more.

Keep in mind that not every link will work, and you won’t be able to navigate to every page since not every page will be cached.

This is generally an issue when sites are very large and have thousands of pages of content.

2. Oldweb.today

Oldweb.today is a unique tool that lets you browse old versions of websites using old web browsers that were around during that time.

This gives you a similar experience to what it was like using certain websites back in the day.

This tool pulls copies of websites from third-party archives like the Internet Archive and national digital libraries from around the globe.

Keep in mind, this tool will take some time to load older websites. It emulates old school browsers like Internet Explorer and Netscape navigator, but it has to find and load the websites first.

To use this tool, navigate to the oldweb.today website. Then, select a ‘Browser’ from the drop-down list and enter the URL of the website.

Make sure the ‘Browse Archives At’ radio box is checked and enter the date.

Once you click enter, the tool will automatically start generating results.

Then, after it has loaded, you’ll be able to view and navigate the WordPress blog as if it was frozen in time.

You can navigate around, click links, and even copy the text.

3. Library of Congress Web Archive

The Library of Congress has a massive digital collection of newspapers, books, audio recordings, and websites.

They also have a website archive search tool that operates similar to the Wayback Machine mentioned above. However, the results will be a bit different than the other two tools.

If you can’t find an old version of the website before, then give this tool a try.

To use this tool, navigate to the Library of Congress Web Archives. After that, enter the URL for the website and click the search icon.

The results page is similar to the Wayback Machine as well.

First, you will select the year from the top menu.

Next, select the date and click the time for the available snapshot.

This tool typically only gives you a single time to choose from.

When you click the date, it’ll bring up the archived website.

You can also right click to open the page in a new tab.

Hopefully, one of these three tools above has helped you find the old website you were looking for.

If you want to recreate an older page on any site, the best tool for the job is SeedProd. It’s the best drag and drop page builder for WordPress that lets you easily create any kind of website without editing any code.

We hoped this article helped you learn how to see old versions of any WordPress site. You may also want to see our guide on how to create an email newsletter to grow your traffic, and our comparison of the best WordPress membership plugins to create & sell online courses.

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.

The post How to See Old Versions of Any WordPress Site (3 Tools) appeared first on WPBeginner.

April 19, 2021 at 03:00PM

6 Best WooCommerce CRM to Grow Your Store in 2021 (Compared)

Are you looking for the best WooCommerce CRM for your online store?

A WooCommerce CRM can help you manage your customers, improve business decisions, and create a better experience for your customers overall.

In this article, we’ll share the best WooCommerce CRM in the market today.

Why Use a WooCommerce CRM?

Using a WooCommerce Customer Relationship Management (CRM) tool will help you manage your customer data, send personalized marketing messages, and make better overall decisions about your business.

Most eCommerce stores need a way to manage new contacts and customers. In the early days of your online business, you might only use a spreadsheet to analyze customer information, order status, and order data.

But, as your online store grows, it’s easy for orders to slip through the cracks and customers to get mismanaged.

A WooCommerce CRM software helps to solve the problem of managing customer relationships as your eCommerce business scales.

You’ll be able to easily manage, store, and analyze your customer and purchasing data. This data can be used by your sales, marketing, and support teams for marketing automation and personalization.

Overall, WooCommerce CRM systems can help your online store increase sales, build customer relationships, and deliver a better experience across the board.

They can also improve your customer retention since your customers will be happier and stay with you longer.

That being said, let’s take a look at the best WooCommerce CRM solutions that you can use along with your WordPress website.

1. Drip

Drip is a powerful eCommerce CRM platform that has a great WooCommerce CRM integration. The goal of this CRM is to help you increase your WooCommerce sales with marketing automation.

Even though it’s incredibly feature-rich, it’s still easy to use. Drip has intelligent marketing campaign tools and advanced email segmentation features. There are even automated workflows pre-built for WooCommerce store owners.

You’ll get contact management features, eCommerce user tracking, actionable reports, and support for one-on-one conversations with your customers.

There are various customer support options available via live chat, webinars, beginner-friendly documentation, and in-depth online courses.

Finally, you can grow your store with bundled social media workflows to help you generate leads from Facebook and Instagram.

Pricing: For those just getting started, there’s a 14-day free trial. Once the trial is up, the paid Drip plans start at $19 per month for up to 500 subscribers, $39 per month for up to 2,500 subscribers, and up.

2. HubSpot for WooCommerce

HubSpot for WooCommerce lets you easily connect the powerful Hubspot CRM to your WooCommerce store.

With the WooCommerce plugin, you can automatically sync your users, products, and orders with Hubspot in real-time.

Some useful CRM features include customer tracking, contact segmenting, shopping cart abandonment emails, email templates, and in-depth store analytics data.

There are also built-in ad management tools for Facebook, Instagram, LinkedIn, and Google that you can use to grow your WooCommerce store.

You’ll also find 7 different eCommerce reports that will give you detailed data about your customer profiles, market trends, traffic, onsite behavior, and more.

Pricing: You can access the HubSpot CRM and the HubSpot WooCommerce plugin for free.

If you need access to more features, you can upgrade to individual service plans, or upgrade the Growth Suite bundle that starts at $50 per month.

3. Constant Contact

Constant Contact is a popular email marketing and CRM provider. It lets you store your contacts, manage your customer data, and track your customer activity, all from a single dashboard.

Once you connect Constant Contact to WooCommerce, your contacts will be automatically synced.

There are a ton of unique features built specifically to improve your WooCommerce store and make more sales.

For example, you can drag and drop your products from your catalog directly into your emails, segment your contacts and send targeted offers, send trackable coupons and promo codes, and more.

You can create various automated email campaigns like welcome sequences, follow up emails, and abandoned cart emails.

There are even social media marketing and advertising tools you can use to reach new customers.

There are a ton of integrations available with third-party apps. This means you can simply integrate Constant Contact with tools you’re already using, like WPForms.

Pricing: Constant Contact pricing is based on the number of contacts, starting at $20 per month. If you want to add team members to your account, then you’ll need the Plus plan that starts at $45 per month.

WPBeginner readers can take advantage of our free 60 day trial and 20% off your plan using our Constant Contact coupon code.

4. Sendinblue

Sendinblue is one of the best email marketing software in the industry. Beyond the advanced email tools, there’s a free WooCommerce CRM plugin that will automatically sync your WooCommerce store with Sendinblue.

With Sendinblue, you’ll be able to synchronize all of your WooCommerce customer data instantly and manage all of your contacts with a single tool.

You can segment your customers based on purchasing behaviors, use the collection of email templates to send email newsletters, and more.

This tool allows you to create custom automated email sequences that can trigger automatically. For example, you can send an automated email when a customer adds an item to their cart but doesn’t complete the purchase.

One stand out feature is the ability to send marketing and transactional text messages (SMS) straight from your WooCommerce dashboard.

The WooCommerce plugin also integrates with other marketing features that SendInBlue offers like, custom sign up forms, Facebook ads, retargeting features, and more.

You can also use Sendinblue as a SMTP service to send your transactional emails like order receipts, password reset emails, and more with high email deliverability rate. You just need to use the WP Mail SMTP plugin to connect Sendinblue to WordPress.

Pricing: Sendinblue has a free account for sending up to 300 emails per day.

If you need to send unlimited daily emails, then the Lite plan starts at $25 per month, while the Premium plan adds advanced marketing automation features starting at $65 per month.

5. Agile CRM

Agile CRM is an all-in-one WooCommerce CRM that’s built for small to medium sized businesses.

This WooCommerce CRM has tools to manage customers, create intelligent workflows, improve store engagement, track your visitor’s store activity, and more.

The tool gives you a 360-degree view of your customers. It includes everything your sales, marketing, and helpdesk departments need in a single dashboard.

You’ll also find unique marketing features that let you generate and capture leads, send out emails, create landing pages, and more.

If you’re on one of the paid plans, then you’ll also get access to social media monitoring and tools that let you create automated marketing workflows.

Pricing: There’s a free version for up to 10 users, so if your company has 10 team members or less, you can use the free plan forever.

The paid Agile CRM plans start at $9.99 per user per month when billed annually or $8.99 per user when billed for 2 years.

6. Pipedrive

Pipedrive is a sales CRM designed to help you manage your leads and deals and track communication with your customers. This CRM will help to streamline your sales and marketing process.

You can use a tool like Zapier or Automate.io to integrate Pipedrive with your WooCommerce store.

Once you set up the WooCommerce integration, all of your lead and order data will automatically be sent to Pipedrive.

Since Pipedrive is designed for sales teams, you’ll find all kinds of advanced functionality like sales reporting, forecasting, customizable pipelines, detailed activity log, and email integrations.

The built-in reporting tools will help you improve your conversion rates and see how your store performs across the board.

There’s also a growing library of integrations and addons, so you can connect your CRM to any other marketing tools you’re already using.

Pricing: Pipedrive starts at $12.50 per month when billed annually. The Advanced plan starts at $24.90 per month for users who need advanced marketing automation features.

We looked at many other WooCommerce CRM tools like Metrilo, Salesforce, WP ERP, Zero BS CRM, Ninjodo, Woosync, Magento and others. But, we decided not to list them here to make your decision as easy as possible.

Bonus: Conversion Tools for WordPress

The WooCommerce customer relationship manager tools above will help you streamline your customer relationship, sales, and marketing efforts.

However, there are additional tools you can use to improve conversions, get more leads, add popups to your site, and more.

7. OptinMonster

OptinMonster is the best email capture tool for WordPress used by over 1.2 million websites. It helps you convert website visitors into subscribers and customers.

With the WooCommerce integration, there are all kinds of features that’ll help you add leads to your WooCommerce CRM of choice.

For example, you can use high-performing templates to collect leads, send personalized messages, run split-tests, and much more.

8. WPForms

WPForms is the best contact form plugin for WordPress used by over 4 million WordPress sites. It lets you create drag and drop optin and contact forms simply.

You can use all kinds of custom field options to collect the exact customer information you require.

You can use WPForms to collect leads to send directly to your WooCommerce CRM of choice.

You can use WPForms as a connector to link your leads with CRM providers like Drip, SendinBlue, Constant Contact, Mailchimp, and more.

Or, you can use the Zapier integration to link your forms and optins with Agile CRM and PipeDrive.

9. MonsterInsights

MonsterInsights is the best analytics solution for WordPress used by over 3 million sites. It allows you to simply install Google Analytics in WordPress and shows your analytics stats right in your WordPress dashboard.

It also comes with an eCommerce analytics addon, so you can track your customer activity to see what’s working for your new and existing customers.

After you set up WooCommerce user tracking in WordPress, you’ll be able to see your conversation rate, revenue, transactions, average order value, and more.

You can use this data to improve your online store and convert more visitors into customers.

We hoped this article helped you find the best WooCommerce CRM for WordPress. You may also want to see our list of the must have WordPress plugins for business websites and the best business phone services for small business owners.

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.

The post 6 Best WooCommerce CRM to Grow Your Store in 2021 (Compared) appeared first on WPBeginner.

April 16, 2021 at 03:56PM

How to Add Custom After Post Widgets in WordPress

Do you want to add custom after post widgets in WordPress?

After post widgets allow you to display different elements at the end of blog posts or pages. For instance, you can add a newsletter sign-up form, show related posts, display recent articles, or popular products.

In this article, we’ll show you how to easily add custom after post widgets in WordPress to keep users engaged and spend more time on your website.

Why Add Custom After Post Widgets in WordPress

You may have seen call to actions at the end of an article on many popular websites. That’s because if a user has scrolled down till the end of an article, then they are already hooked and more likely to engage with your offer.

This space can be utilized to put an email sign-up form, a lead generation form, or boost user engagement with related posts, popular posts, and other content discovery features.

Similarly, if you run an online store, then you may want to show related products or promote a sale by offering a discount.

Now there are different ways to do this. You could use plugins like MonsterInsights popular posts addon which lets you automatically add popular posts or popular products after your post content.

You can add that after-post content manually while writing your posts using the block editor.

This is a lot of work and the problem with this method is that if you wanted to change something, then you will have to manually do that.

That’s where widgets come in.

In web development terminology widgets are non-content blocks that you can add to different areas of your website separate from the main content area.

WordPress comes with a set of built-in widgets that you can add to any widget-ready areas provided by your WordPress theme.

All popular WordPress themes come with common widget ready areas like sidebars, footer, header widget areas. However, very few WordPress themes include an after-post widget area.

That being said, let’s take a look at how you can easily add after-post widgets in WordPress regardless of which WordPress theme you are using.

Method 1. Adding After Post Content using a Plugin

This method is a bit limited but easier and works with all types of WordPress widgets. It relies a little bit on your WordPress theme for styling but would work well for most users.

First thing you need to do is install and activate the Add Widget After Content plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, go to the Appearance » Widgets page and there you’ll notice a new widget area called ‘After Content’.

Now you can simply add any widget from the available widgets column into the After Content area. For instance, here we have added Recent Posts, and a newsletter sign up form widget we made using WPForms.

Feel free to edit each widget setting as you would normally do and don’t forget to save your changes.

Once, finished you can visit your website to see your after post content widgets in action. This is how it looked on our demo website.

Depending on how many widgets you are trying to add and your WordPress theme, your widgets may appear slightly off balanced.

By default, the plugin adds widgets one after another, so if you wanted to show them side by side, then you’ll have to use custom CSS. You can also change background color, add padding, change text color, and more.

Simply go to Appearance » Customize page and switch to the Additional CSS tab. You can start off by adding this custom CSS as a starting point.

.awac.widget {
    width: 50%;
    display: inline-block;
    float: left;
    padding: 20px;
    background-color: #fff8e9;
    border: 1px dashed #fde2a9;
    min-height:400px;
} 

.awac.widget h4 {
font-size:18px;
color:#666; 
} 

.awac.widget li{
font-size:16px;
} 

In this custom CSS code, we changed the widget width to display two widgets side by side. We have also changed background color and font sizes. Feel free to adjust the CSS to meet your requirements.

Don’t forget to click on the Publish button to save your changes.

This is how it looked on our demo website.

Don’t want to use custom CSS? Try the CSS Hero plugin. It lets you customize all areas of your site without any CSS knowledge.

Show or Hide After Post Widgets

By default, the plugin will show your after post widgets on all posts and pages. It also allows you to hide it on places where you don’t want to show after content widgets.

For instance, you may not want to display after post widgets on static pages.

Simply go to the Appearance » Widget After Content page. From here, you can choose which categories or post types will not display your after-content widget.

Don’t forget to click on the Save Changes button to store your settings.

You can also hide the after content widget area for individual posts and pages. Simply edit the post of page where you don’t want to show after post widgets and scroll down to the ‘Widget After Content’ box at the bottom.

Next, check the box to hide the widget area and then save your post or page. The plugin will now stop showing the widget area for that particular post/page.

Method 2. Adding After Post Content using OptinMonster

This method is prettier and more powerful, but it does not use default WordPress widgets. Instead, it allows you to add any content you want with beautiful designs and templates to choose from.

Another advantage of this method is that it gives you a ton of targeting options. For instance, you can show personalized content to different users, change content based on what users are currently viewing, or use on-site retargeting for more impact.

For this method, you’ll need OptinMonster. It is the best lead generation and conversion optimization software on the market and allows you to convert website visitors into subscribers and customers.

First, you need to sign up for an OptinMonster account.

After signing up, switch to your WordPress website to install and activate the OptinMonster plugin. For more details, see our step by step guide on how to install a WordPress plugin.

This plugin acts as a connector between your WordPress website and your OptinMonster account.

Upon activation, you need to visit OptinMonster » Settings page and click on the ‘Connect existing account’ button.

This will bring up a popup where you can log in and connect your WordPress site to your OptinMonster account.

Now that your WordPress site is connected, you are ready to create your first geotargeted campaign. Go to the OptinMonster » Campaigns page and click on the ‘Add New’ button.

First, you’ll need to choose your campaign type. OptinMonster supports lightbox popups, floating bars, inline optins, fullscreen, slide-in, and gamified campaigns.

For the sake of this tutorial, we’ll choose a inline campaign which allows us to automatically display our campaign after content.

Below that, you can select a campaign template by clicking on it.

Next, you need to enter a name for your campaign. You can enter any name here, and then click on the ‘Start building’ button.

This will launch OptinMonster’s campaign builder interface with a live preview of your campaign in the right panel.

You can simply point and click on any item in the preview to edit, move, or delete it. You can also add new elements by clicking on the Add Blocks button at the top.

From here, you can choose more powerful elements not available in the default WordPress widgets. For instance, you can add countdown timers, buttons, chatbots, and columns.

Once you have designed your after post campaign, switch to the Publish tab and change the campaign status to ‘Publish’.

After that, click on the Save button to store your settings and close the campaign builder.

OptinMonster will now take you to the Output settings page. From here, you can choose where you want to display your after post content.

Simply select Automatic and then you can choose to show your campaign inside, below, or before the post content.

For the sake of this tutorial, we’ll choose below the post content option. After that, change the Visibility status to Published and click on the Save button to make your campaign live.

You can now visit your website to see your custom after post widget in action.

We hope this article helped you learn how to add custom after post widgets in WordPress.

Want to see how users are interacting with your after post widgets? See our tutorial on how to track user engagement in WordPress and then try these tips to easily boost your website traffic.

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.

The post How to Add Custom After Post Widgets in WordPress appeared first on WPBeginner.

April 15, 2021 at 03:00PM

How to Optimize Core Web Vitals for WordPress (Ultimate Guide)

Do you want to optimize core web vitals for WordPress?

Core Web Vitals is an initiative by Google which helps website owners improve user experience and quality of their websites. These signals are crucial for the success of any website.

In this guide, we’ll show you how to easily optimize Google Core Web Vitals for WordPress without any special technical skills.

Here is a quick overview of what we’ll cover in this guide.

• What are Google Core Web Vitals?
• How to Test Your Google Core Web Vitals Score
• Why are Core Web Vitals Important?
• How to Improve Your Core Web Vitals in WordPress (7 Tips)

What are Google Core Web Vitals?

Google Core Web Vitals are a set of website performance metrics that Google considers important in a website’s overall user experience. These web vital scores will be a part of Google’s overall page experience score that will impact your SEO rankings.

The truth is that nobody likes a slow-loading website including Google.

Even if your website loads fast, it may not be fully functional for users to do what they want to do or access the information they need.

This is what Web Vitals helps you measure. How quickly does your website loads, becomes visible, and is ready for your users?

To do that, Google uses three quality tests (Web Vitals).

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Now the names of these tests may sound too technical but what they do is quite easy to understand.

Let’s see how each Web Vitals test works, what they measure, and how you can improve your score..

Largest Contentful Paint – LCP

Largest Contentful Paint or the LCP, looks for how quickly the main content (whether it is an image, article, or description) becomes visible to the users.

For example, your website might load fast, but the largest content may not appear on the screen as quickly as the rest of the page.

Other speed test tools will give you a high score, but from user’s point of view, the page is still slow.

This is why Google measures the LCP as part of their web vital score, so website owners can have a more clear understanding.

First Input Delay (FID)

First Input Delay (FID) measures the time it takes a user’s browser to actually be able to begin processing event handlers in response to a user’s interaction.

In plain english, let’s suppose a user is on your contact form page. They fill out the form and click on the Submit button. FID, will measure how quickly your website processes that interaction.

An even simpler example would be the time from when a user clicks on a link to the time their browser starts processing the next sequence of events.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) measures the time it takes for a website to become visually stable.

As a website loads, some elements take more time to load than others. During this time, your website’s content may keep moving on the screen.

For instance, if a user is reading a paragraph on a mobile device and a video embed loads above it, this makes the entire content move down. This can be really frustrating if a user was trying to accomplish an action such as adding a product to cart where the button shift down due to other items moving on the page.

How to Test Your Google Core Web Vitals Score

The easiest way to test your Google Core Web Vitals Score is by using the Page Speed Insights tool. Simply enter the URL you want to test and click on the Analyze button.

The core vital results are displayed under the section titled ‘Field Data’ section.

To make it simpler, you will see a message at the top saying ‘[…] field data shows that this page passes the Core Web Vitals assessment’.

In the chart below, you can view the actual score of all three core vitals. Here is how much you need to score to pass the core Web Vitals tests for each item.

• Largest Contentful Paint (LCP) – 2.5 seconds
• First Input Delay (FID) – Less than 100 milliseconds
• Cumulative Layout Shift (CLS) – Less than 0.1

How to View Google Core Web Vitals for Full Website?

Now Page Speed Insights tool allows you to check an individual page. If the page you are checking is the root of your domain name, then you can also click on the ‘Show Origin Summary’ checkbox.

This will show you the score for all pages served from this origin.

However, to really drill down deep, you can access the Core Web Vitals report in your Google Search Console dashboard as well.

This allows you to see how many URLs on your website passed the tests, which URLs need improvement, and which pages have a poor score.

To get even more detailed reports for Web Vitals, you can use the lighthouse speed test by going to Web.dev Measure tool, or by using the built-in test inside Google Chrome browser.

Simply open a website in Chrome, right click anywhere on the screen, and then select the Inspect option. In the tabs, you will see an option called Lighthouse.

After that, click the Generate Report button.

Note: You must do the Chrome test in Incognito mode for the most accurate results. Otherwise your browser extensions may negatively impact the core web vital score it shows you.

Why are Core Web Vitals Important?

Core Web Vitals are important because they reflect how your website performs for the users. It is focused not just on the faster loading of a website but on how quickly users can actually use it.

According to a recent study, a 1 second delay in page load time can lead to 7% loss in conversions, 11% fewer page views, and 16% decrease in customer satisfaction.

That’s why it is crucial to optimize your website for speed and performance. However, most performance measuring tools didn’t really account for the quality of user experience.

A faster website with poor user experience is still costing you conversions, fewer page views, and poor customer satisfaction. Improving core Web Vitals helps you remedy that.

User experience is also an important factor in SEO rankings. Google has already announced that starting in May 2021 the search algorithm update will include page experience as one of the ranking factors.

That being said, let’s see how you can easily improve your core Web vitals to offer a better user experience on your website.

How to Improve Your Core Web Vitals in WordPress (7 Tips)

Improving your core Web Vitals score in WordPress is not that difficult. Using some essential performance optimization tips you can easily pass the Web Vitals score.

1. Optimize Your WordPress Hosting

Your WordPress hosting company plays the most significant role in your website’s performance.

They are able to optimize their servers for WordPress which gives your website rock-solid platform to build upon.

We recommend using SiteGround for a high-performance website. They are one of the officially recommended WordPress hosting companies, and we use SiteGround for WPBeginner website.

To give your website the performance boost it needs, SiteGround uses Google Cloud Platform for their servers along with ultrafast PHP.

Their SG Optimizer plugin is used by over a million websites. It automatically makes further performance enhancements and turns on built-in caching which does everything WP Rocket does and more.

It’s important to note, that their SG Optimizer plugin only works on SiteGround hosting accounts, and these performance optimizations are available for all plans including the lowest option.

If you’re using another WordPress hosting provider, then we recommend using WP Rocket along with few other tools to achieve better core web vitals score.

WP Rocket is the best WordPress caching plugin on the market. It allows you to easily set up caching on your WordPress website without going into any technical details of server management.

2. Improving Largest Content Paintful (LCP) Score

As mentioned earlier, the Largest Content Paintful (LCP) is literally the largest content part within the viewport of a page. For instance, on a blog post, this could be the featured image or the article text.

The quicker this content loads the higher your LCP score would be.

How do you know which content is considered the largest by the test? Well, you need to scroll down to the test results and expand the ‘Largest Contentful Paint element’ tab.

You’ll see the elements considered for the LCP score. If it is a larger image, then you can try replacing it with a smaller image or an image with lower file size and quality. See our guide on how to optimize images for web performance.

If it is text, then you can try breaking it into paragraphs and headings.

3. Improving First Input Delay (FID) Score

First Input Delay score measures the time between a user clicking on something on your website and their browsers starting processing elements.

The most important tip to improve that is by using a better web hosting or even managed WordPress hosting platform.

Another easy way to improve FID score is by using a caching plugin like WP Rocket. It comes with a built-in feature that allows you to optimize file delivery.

First you would need to install and activate the WP Rocket plugin. For more details, see our step by step guide on how to install a WordPress plugin.

After that, go to Settings » WP Rocket page and switch to the File Optimization tab.

Scroll down to the bottom of the page and check the box next to the ‘Load JavaScript deferred’ option.

Don’t forget to click on the Save Changes button to store your changes.

Deferring JavaScript allows your website to load without waiting for JavaScript to be loaded. This improves First Input Delay (FID) Score for pages where JavaScript may be the cause.

4. Improving Cumulative Layout Shift (CLS) Score

Cumulative Layout Shift (CLS) score is affected when different elements on a web page are loading slowly and making other elements on the screen move.

You can view which elements are affecting the CLS score by expanding the ‘Avoid large layout shifts’ tab in the Page Speed Insights results.

This will show you the elements that are causing the most layout shift impact during page load.

To make sure that the visual layout of your page does not shift as other items load, you need to tell browsers about the dimensions (width and height) of the elements like images, video embeds, Ads such as Google AdSense, and more.

WordPress automatically adds height and width attributes to images you add. However, you can still check all other media particularly embeds to make sure that all of them have height and width attributes.

One way to do that is by using the Inspect Tool. Simply right-click in your browser and select Inspect to open the developer console.

You can then point and click on different page elements to highlight their source code. There, you can see if the element has width and height attributes defined.

5. Eliminate Render Blocking Elements

Render blocking elements are the elements that are slower to load but are blocking other elements from loading first. This affects your overall Web Vitals score and user experience on your website.

Page Speed Insights results will show you the render blocking elements. These are usually JavaScript or CSS files added by your WordPress plugins, third-party tools like Google Analytics, Facebook Pixel, Google Ads, and more.

However, most such elements are programmatically added to your site by different plugins or theme. This makes it harder for a beginner user to remove or properly load them.

We have a step by step guide on how to easily eliminate render blocking elements in WordPress without messing with any code on your website.

6. Properly Size Images in WordPress

Another common cause of lower core Web Vitals score is very large images. Many WordPress users upload high-resolution images to their websites which take longer to load and in most cases are not necessary.

This becomes even more problematic for users on mobile devices. Your responsive WordPress theme and WordPress will automatically fit the image to user’s mobile screen but they would still be loading a larger file.

We have a detailed guide on how to properly optimize images for your WordPress website without losing quality or affecting the performance.

7. Use a CDN to Server to Improve Web Vitals Score

CDN or content delivery network are third-party services that allow you to serve static content of your website from multiple servers around the globe.

This allows users to download those static files like images and CSS from servers that are nearest to them. It also reduces load on your website which can then continue loading other elements.

You can use a cloud firewall app like Sucuri which comes with a built-in CDN service. Sucuri also helps you block malicious and spam requests which further frees up your website resources.

You can also use Cloudflare free CDN as an alternative. It comes with a basic firewall protection and CDN service that would improve your website’s web vitals score.

We hope this guide helped you learn how to optimize core web vitals for WordPress. Another important aspect of good user experience is security. We recommend that you follow our WordPress security checklist to make sure that your website performance is not affected by spam or DDoS attacks.

You may also want to see our comparison of best video editing software and best webinar platforms to create performance optimized media content that doesn’t slow down your website speed.

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.

The post How to Optimize Core Web Vitals for WordPress (Ultimate Guide) appeared first on WPBeginner.

April 14, 2021 at 04:00PM