WPBeginner https://www.wpbeginner.com Beginner's Guide for WordPress Wed, 18 Sep 2024 10:01:05 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.1 Are Premium WordPress SEO Plugins Worth It? (+ How to Choose) https://www.wpbeginner.com/opinion/are-premium-wordpress-seo-plugins-worth-it/ https://www.wpbeginner.com/opinion/are-premium-wordpress-seo-plugins-worth-it/#comments Wed, 18 Sep 2024 10:00:00 +0000 https://www.wpbeginner.com/?p=296631 Let’s face it: getting your website noticed is incredibly important for its success. And in our experience, most websites get the bulk of their traffic from search engines. More traffic means more customers, more sales, and more profit. So, you might be looking for a… Read More »

The post Are Premium WordPress SEO Plugins Worth It? (+ How to Choose) first appeared on WPBeginner.

]]>
Let’s face it: getting your website noticed is incredibly important for its success. And in our experience, most websites get the bulk of their traffic from search engines.

More traffic means more customers, more sales, and more profit. So, you might be looking for a quality SEO tool to improve your search rankings and attract more visitors.

With so many SEO tools available, both free and paid, it’s natural to wonder whether paying for a premium plugin is worth the money.

In this article, we’ll share our firsthand experience using both free and premium WordPress SEO plugins. We’ll explore the extra features premium tools offer and the impact they can have on your website’s traffic and success.

Are Premium WordPress SEO Plugins Worth It?

Choosing the Right SEO Tool for Your WordPress Website

WordPress users have a lot of options when it comes to plugins that help optimize websites for search engines. But with so many tools that promise to boost your rankings, it’s hard to know where to start.

Here at WPBeginner, we get tons of questions from readers asking which SEO plugin is the best for making it to the top spots in search results.

In response, we created a detailed showcase of the best SEO plugins and tools. These tools can help you increase your website traffic by 20-30% within just a few months.

This list covers a wide range of use cases and includes leading plugins like All in One SEO (AIOSEO) and Yoast SEO, as well as standalone tools like Semrush and Ahrefs.

But here’s the catch. Many of these plugins offer both free and premium versions, leaving you with another decision to make.

While free versions provide a solid foundation for basic SEO, the premium upgrades promise to unlock advanced features designed to give your site an edge in search engine rankings.

So, are those premium features worth the investment? Do they really make a difference in your search rankings?

Let’s dive in and explore the unique capabilities of premium WordPress SEO tools and see how they can help your website make it into the top search results pages.

Tip: If you have the budget to spend money on SEO but prefer not to do the work yourself, then you can hire our affordable SEO experts at WPBeginner Pro Services to do it for you.

What Are the Benefits of Premium WordPress SEO Plugins?

At WPBeginner, we’ve been using premium SEO plugins for many years. Here are some of our favorite features and benefits:

1. Comprehensive SEO Audits

While free plugins provide basic on-page analysis, premium versions often offer more in-depth insights and recommendations.

They run comprehensive SEO audits on your website. This way, you get a clear idea of your site’s overall health from an SEO perspective. They scan all of your web pages and then highlight potential issues, recommending how to fix them.

We regularly use AIOSEO to analyze our content for readability, keyword usage, and overall optimization. It gives us access to an actionable SEO report inside our WordPress admin area that gives us a clear roadmap for improvement.

Complete SEO Checklist in AIOSEO

This is really helpful because search engine optimization is a complex procedure that takes time. Having a clear checklist of everything that needs to be improved simplifies the process so you can easily fix one issue at a time.

2. Advanced Sitemaps

Search engines need to find and index every page on your website before they can be displayed in search results.

Google recommends using sitemaps to help with this process. Sitemaps help search engines crawl up to 40% more pages, resulting in more of your content appearing in search results.

There are different types of sitemaps, such as XML sitemaps that help search engines discover and index your content and RSS sitemaps that notify them of updated content.

Enabling both of these will give you the biggest SEO benefits. With a premium WordPress SEO plugin, this is as easy as switching on a setting for each type of sitemap.

Enable sitemap

3. Powerful Redirects and 404 Monitoring

Broken links point to web pages that do not exist, leading to frustration and 404 error messages for your users. They are also bad for SEO and result in a 12% higher bounce rate.

Premium SEO plugins help you avoid broken links by automatically creating redirects when you rename a post or page or change its URL.

They also automatically track and log 404 errors so you can quickly redirect these URLs to existing posts as part of your regular WordPress maintenance.

404 Logs Under Redirects

This will make sure your visitors find the information they are looking for and avoid frustrating surprises when clicking links on your site.

4. Advanced Schema Markup

Schema markup is structured data that is added to your web pages behind the scenes. It helps search engines better understand your content and display it more prominently in search results.

For example, using recipe schema can make food blogs more visible in search results. It can increase your click-through rates by 30%, bringing valuable traffic to your website.

An example of a featured recipe snippet, in Google

But manually adding this structured data to your posts is very technical and time-consuming.

It’s much easier using a premium SEO plugin because it can add schema markup automatically. These tools also let you add more specific markup to individual posts with the click of a mouse, including FAQs, recipes, events, products, and more.

5. Internal Linking Suggestions

We always recommend that you add links to your own content throughout your website. This way, you help users find posts that are related to the topic they are reading about. These are called internal links and they are good for SEO, increasing page views by up to 40%.

The problem is that as you create more content, it becomes hard to find all the related blog posts you can link to. Searching for them manually becomes frustrating and takes a lot of time.

Premium SEO plugins help by automatically listing internal linking opportunities. With a click of your mouse, you can easily add these links to relevant posts along with an automatically generated phrase and anchor text, improving your SEO and saving you time.

Find internal link opportunities and orphaned pages

6. Social Media Optimization

We also use a premium WordPress SEO plugin for social media optimization because it allows us to control how our WPBeginner content appears when shared on platforms like Facebook and Twitter (X).

Instead of these platforms pulling random information and images from our posts, we can specify the title, description, and image that is used. This means that our posts are more likely to resonate with our social media followers, bringing more traffic to our site.

The WordPress social media sharing settings

7. Local SEO Optimization

If your business has physical locations, then premium SEO plugins can help optimize your site for local search results, including automatically generating location-specific schema markup that makes it easier for customers in your area to find you.

Potential customers will see your business on Google Maps and search results when looking for your type of business in their local area.

They will be able to see your address, phone number, and opening hours right from the search results page. Plus, they can even get turn-by-turn directions as they drive to your store.

Example of Google Business Profile

8. WooCommerce SEO

If you have an online store, you can also benefit from the specialized WooCommerce SEO features offered by premium plugins. These help you optimize your product pages so they are more visible in product searches.

Users will also be able to see customer reviews and star ratings, showing that other customers have had a positive experience with your products. This can help drive more traffic to your store.

Product Search Result Showing Star Ratings

9. Priority Support

When you’re running an online business website, having access to expert support can be invaluable. Premium versions usually offer priority support to help you resolve issues quickly.

This ensures that if you come across any problems or issues when using the plugin, then you can receive prompt help from experts and get back to the job of running your business.

For more details, you can see our guide on how to ask for WordPress support and get it.

What Is the Best Value Premium SEO Plugin?

If you’re serious about driving more organic traffic to your website, then subscribing to a premium SEO plugin like we have is a smart move.

Your next task is to decide which plugin or service to use. Your first question will probably be which plugin offers the best value for money.

All in One SEO vs. Yoast SEO Premium

AIOSEO and Yoast SEO are the leading WordPress SEO plugins and offer extensive features.

AIOSEO's homepage

However, there are important differences in their pricing and features.

When we compare the two plugins’ most affordable plans, AIOSEO is more affordable while offering comparable features:

  • AIOSEO’s Basic plan starts at $49.60 per year
  • Yoast SEO Premium starts at $99 per year

At first glance, the prices of their most powerful SEO plans look similar:

  • AIOSEO’s Elite plan costs $299.60 per year
  • Bundle pricing for Yoast SEO Premium, Yoast WooCommerce SEO, Yoast Local SEO, Yoast News SEO, and Yoast Video SEO costs $229 per year.

However, the difference is that AIOSEO’s plan covers 100 websites, while Yoast’s price is for a single site. Plus, AIOSEO offers a more comprehensive feature set.

When it comes to value for money, AIOSEO stands out. It offers a compelling package that covers multiple websites at a competitive price point.

You can learn more in our detailed comparison of Yoast SEO vs. All in One SEO.

You might also like to read about our journey switching from Yoast to All in One SEO to improve our SEO workflow and access the SEO features we need.

All in One SEO vs. Premium Standalone SEO Tools

If you don’t have the budget for standalone SEO tools like Semrush or Ahrefs, AIOSEO Premium offers a lot of impressive features for a great price.

To give you an idea, even when looking at the most affordable options, Semrush‘s most basic plan starts at $119.95 per month, and Ahrefs‘ lite plan starts at $99 per month.

While these tools are incredibly powerful, their starting prices come to more than $1,000 per year, which may not be justifiable for smaller websites or bloggers.

By contrast, you can subscribe to AIOSEO’s highest-tier Elite plan for far less money. It includes advanced features like local SEO, advanced WooCommerce support, and video SEO and costs less than $300 per year.

Besides that, AIOSEO focuses specifically on WordPress, making it easier to use and more tailored to your website’s needs. This makes it a cost-effective solution for agencies or businesses managing multiple WordPress sites.

Plus, if you run a small business or are just getting started, AIOSEO Premium’s features might be more than enough for your needs.

That said, if you’re looking for more SEO features at a lower cost, you can pair the plugin with an affordable tool like SEOBoost to get powerful content optimization options. This will give you AI-powered analyses, content audits, content briefs, and much more.

Or, if you need just a little extra help with keyword research, LowFruits is a great choice. It helps you generate keywords and analyze the SERPs to improve your rankings.

Premium WordPress SEO Plugins FAQ

Here are some questions we are asked most often about premium SEO plugins for WordPress:

What are premium SEO plugins?

Premium SEO plugins are paid versions of WordPress SEO tools that offer advanced features, enhanced optimization capabilities, and often superior support compared to their free alternatives.

How do premium SEO plugins differ from free SEO plugins?

Premium SEO plugins typically offer more advanced features like schema markup generators, content optimization tools, local SEO features, and dedicated support. Free plugins usually provide basic SEO functionality but may lack advanced features or regular updates.

Are premium SEO plugins necessary for good search engine rankings?

While not absolutely necessary, premium SEO plugins can significantly enhance your WordPress site’s optimization efforts, potentially leading to better search engine rankings. They often provide tools and features that can give you an edge in competitive markets.

Will a premium SEO plugin automatically improve my search rankings?

No SEO plugin can guarantee improved rankings. However, premium plugins provide advanced tools and guidance to help you optimize your site more effectively, which can contribute to better search performance.

How much do premium SEO plugins typically cost?

Prices vary, but most premium SEO plugins cost between $50 and $300 per year, depending on the features offered and the number of sites you can use them on.

Do I need to renew my premium SEO plugin license annually?

In most cases, yes. Annual renewals ensure you continue to receive updates, support, and access to new features. However, some plugins offer lifetime licenses.

Can I get a refund if I’m not satisfied with a premium SEO plugin?

Many premium plugin developers offer money-back guarantees for a certain period. Always check the refund policy before purchasing.

Currently, AIOSEO offers a 14-day money-back guarantee, and Yoast SEO has a 30-day guarantee.

We hope this tutorial helped you learn that, for many websites, premium plugins are definitely worth investing in. You may also want to see our guide on how to automate WordPress SEO or our expert pick of the best FAQ WordPress plugins.

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 Are Premium WordPress SEO Plugins Worth It? (+ How to Choose) first appeared on WPBeginner.

]]>
https://www.wpbeginner.com/opinion/are-premium-wordpress-seo-plugins-worth-it/feed/ 1
How to Fix Excessive DOM Size in WordPress (11 Expert Tips) https://www.wpbeginner.com/wp-tutorials/how-to-fix-excessive-dom-size-in-wordpress/ https://www.wpbeginner.com/wp-tutorials/how-to-fix-excessive-dom-size-in-wordpress/#comments Tue, 17 Sep 2024 10:00:00 +0000 https://www.wpbeginner.com/?p=279097 The ‘Avoid an excessive DOM size’ warning can appear in Google Lighthouse or other website speed testing tools. It basically means your website has too many elements, which can slow down loading times and frustrate visitors. Luckily, there are a few things you can do… Read More »

The post How to Fix Excessive DOM Size in WordPress (11 Expert Tips) first appeared on WPBeginner.

]]>
The ‘Avoid an excessive DOM size’ warning can appear in Google Lighthouse or other website speed testing tools. It basically means your website has too many elements, which can slow down loading times and frustrate visitors.

Luckily, there are a few things you can do to reduce the DOM size and improve your WordPress performance. We have tried out a bunch of methods to speed up our own websites, so we know what actually makes an impact on WordPress performance.

And in this article, we will show you our tried and tested ways for how to fix an excessive DOM size in WordPress.

How to Fix Excessive DOM Size in WordPress

What Does the ‘Avoid an Excessive DOM Size’ Warning Mean?

Ever run a website speed test on your WordPress site and come across a warning called ‘Avoid an excessive DOM size’?

This warning pops up in speed testing tools like Google Lighthouse, Google PageSpeed Insights, or GTMetrix. It indicates that your website has too many elements, which can slow down its loading speed.

Avoid an excessive DOM size warning in PageSpeed Insights

But what exactly is DOM, and why does its size matter? Let’s break it down.

DOM stands for Document Object Model. Think of your WordPress site as a big tree structure. Each element on your page, like text headings, images, menus, and buttons, is like a branch or a leaf on this tree. These individual elements are called DOM nodes.

The total number of nodes in your website’s tree structure is its DOM size. The more elements you have on your page, the larger the DOM tree becomes.

For instance, a simple page with just a heading and a paragraph might have a smaller DOM size compared to a complex page with multiple sections, images, contact forms, and embedded content.

How Does Excessive DOM Size Affect Website Performance?

A large DOM size can negatively impact your WordPress website’s performance in a few ways.

Think about how you create a new page in WordPress. You might add elements like headings, paragraphs, images, galleries, forms, buttons, and social media icons. Each of these elements translates to a DOM node in the tree structure.

While each element individually might seem small, the total number can quickly add up, creating an excessive DOM size.

If your DOM nodes keep increasing, the browser will take longer to read, understand, and load the structure of your website. This is because a complex DOM structure requires more memory usage and processing power from the user’s device to display the page.

All of this leads to slower loading times, which can frustrate visitors and cause them to bounce off your site before they even see your content.

These days, users expect websites to load quickly. A slow-loading website can be like waiting in a long line – it discourages people from sticking around.

Plus, search engines like Google prioritize websites that offer a good user experience, including fast loading speeds. So, an excessive DOM size can indirectly hurt your WordPress SEO and, ultimately, website conversions.

How Many DOM Elements Are Too Many for Google?

While there’s no strict limit set in stone, Google Lighthouse and other testing tools flag websites with an excessive DOM size. Here’s a breakdown of what these flags might indicate:

  • Warning: Google Lighthouse flags a warning when the body element of your page has more than approximately 800 nodes.
  • Error: If the body element reaches over 1,400 nodes, Lighthouse throws an error.

Let’s put this in context to understand what kind of websites might fall into these categories.

Without proper optimization, a single page with text content, images, a navigation menu, basic layout elements, and multiple plugins for forms or social sharing could easily reach around 800 nodes.

On the other hand, pages exceeding 1,400 nodes are likely more complex and might include a higher number of elements. These can include multiple sliders or carousels with large images, elaborate layouts with many nested elements and sections, or multiple embedded content.

These are just general examples. Don’t let these illustrations scare you from building a custom website the way you want to. That said, if you want to make sure people stay on your site, then you will need to avoid excessive DOM size.

Thankfully, we’ve put together a comprehensive guide for you to reduce DOM size in WordPress. You can use the quick links below to learn more about a DOM performance optimization method:

1. Use a WordPress Speed Optimization Plugin

Our first recommendation is to install a powerful WordPress speed optimization plugin. These plugins are designed to analyze your website and make it faster in different ways.

A speed optimization plugin can take care of the technical stuff needed to speed up your website. This way, you can focus on managing and creating your content.

Here at WPBeginner, we recommend using WP Rocket. We actually use it ourselves on the WPBeginner website, which you can learn more about in our article on how we boost page load speed on WPBeginner.

WP Rocket

While WP Rocket is primarily known as a caching plugin, it has many features that can help with DOM size as well. These features include file optimization, lazy loading, and deferring JavaScript.

We’ll explain all these features in more detail later in the article. You can also read our WP Rocket review for more information.

But for now, using a speed booster plugin like WP Rocket is a great first step towards fixing DOM size and making your website faster, even if you are new to WordPress.

You can read our WP Rocket installation and setup guide to get the plugin up and running.

2. Check Your Theme and Plugins

While WordPress plugins and themes are great for adding functionality and style to your WordPress website, they can sometimes contribute to an excessive DOM size.

First, not all themes and plugins are created equal. Poorly-coded plugins and themes can result in a bloated HTML document with unnecessary elements. This can significantly increase your DOM size.

WordPress themes and plugins often come with extra features that you may not need. These can add unwanted elements to your website’s structure, even if you are not actively using them.

By taking a closer look at what’s installed on your website, you can identify potential culprits contributing to DOM size.

If you think a particular theme or plugin might be causing issues, try temporarily switching to a default WordPress theme or deactivating plugins one at a time.

Deactivate all the plugin except WooCommerce

Then, see if the DOM size warning disappears in speed testing tools after making these changes. This can help you pinpoint the problematic element.

When choosing themes and plugins, you will want to stick with reputable sources like the WordPress directory or well-known developers. These resources have strict coding standards, reducing the chance of bloated code that could harm your website’s performance.

If you want to get trusted plugin and theme recommendations, then check out WPBeginner Solution Center. This is where we test, review, and recommend WordPress software. We only recommend solutions that we know will be helpful for our readers.

WPBeginner's WordPress Solution Center

3. Use an Optimized Page Builder

Page builder plugins are WYSIWYG editors that are used for creating beautiful and functional WordPress websites without needing to code. However, some of these tools can actually contribute to an excessive DOM size.

One reason is that they often use additional HTML elements, like div tags with custom classes or attributes, to style your content and control its layout. While these elements allow for flexibility, they can also add a lot of bloat.

Plus, built-in blocks or widgets, like sliders or interactive elements created with a page builder, are often built using specific HTML structures.

Many page builders also rely on shortcodes to insert their functionalities. While these shortcodes might not be visually displayed on your website, they can add extra code to your DOM behind the scenes.

If you think your page builder might be contributing to DOM size issues, you can test this theory on a staging site. Try deactivating your page builder and see if the warning disappears in website speed testing tools. This can help you determine if it’s the root cause.

If you decide to not use your old page builder anymore, then you can use one of the built-in WordPress tools to design your website (like the Full-Site Editor or Theme Customizer).

They offer control over your website design without needing a separate plugin. They also typically have a smaller impact on DOM size.

That said, these tools are not the most flexible. In this case, we recommend using an optimized page builder like SeedProd.

Here at WPBeginner, we’ve tested various page builders, and SeedProd has shown faster performance (93 on PageSpeed Insights) compared to competitors like Divi (91) and Elementor (90).

SeedProd page performance test

You can read more about it in our Elementor vs. Divi vs. SeedProd review.

Beyond performance, SeedProd also has 350+ professional theme template kits, integrations with popular email marketing tools, and an AI assistant to help speed up your website-building process.

Insert the AI image generated by SeedProd

4. Optimize Your Images and Videos

Unoptimized images and videos can have big file sizes. These large files can contribute to DOM size because they become extra elements the browser needs to process.

Optimizing your images can significantly reduce their file size without sacrificing quality. This helps your website load faster and improves the overall user experience.

A plugin like Optimole can be a great solution for optimizing your images. Optimole is designed to work out of the box, automatically optimizing your website’s images as you upload them.

Optimole Review: The image optimization plugin's lazy loading feature

You can also fine-tune its settings to adjust the compression quality or resize images that exceed a certain size, further reducing their file size and DOM footprint.

If you don’t want to use too many plugins, you can use free online tools like TinyPNG to compress your images before uploading them to your WordPress website.

For an in-depth guide on image optimization, check out our article on how to optimize images for web performance without losing their quality.

When it comes to videos, we don’t recommend uploading them directly to WordPress. Large video files can significantly slow down your website’s loading time.

A better approach is to use a video hosting service like YouTube or Vimeo. These services handle storing and streaming your videos, taking the load off your website’s server, and reducing DOM size.

You can then embed the videos directly into your pages using embed codes provided by the hosting service.

Embedding a YouTube video in WordPress

We have another helpful article on how to optimize videos for your WordPress site that dives deeper into video optimization strategies.

5. Implement Lazy Loading

When you open a long web page with lots of content, all of these elements will normally load at once. This process can take a while, especially on slower internet connections.

Lazy loading takes a smarter approach. It delays the loading of non-critical elements, like images and videos. They will only be loaded when they are actually needed by the user as they scroll down the page.

This means the essential content that appears first (like text and layout) loads faster. In turn, this results in a quicker initial page load and a smoother user experience.

Setting up lazy loading is easy, especially if you’re already using a WordPress speed optimization plugin like WP Rocket.

Simply navigate to Settings » WP Rocket in your WordPress dashboard. Then, click on the ‘Media’ tab.

Here, just check off all the options for enabling lazy loading for images, videos, and iFrames.

Enabling lazy loading in WP Rocket

If you want to display an image gallery, then we recommend using a gallery plugin with a lazy loading feature.

Envira Gallery is a great example of this. Besides lazy loading, you can set a specific time delay for when the images are loaded.

Enabling the lazy loading feature in Envira Gallery

Additionally, you can lazy load your comments section.

For this, you can use Thrive Comments, which offers features to optimize WordPress comments.

After the plugin is active, go to Thrive Dashboard » Thrive Comments. Then, open the ‘Advanced Settings’ tab and go to the ‘Page speed optimization’ section.

Enabling lazy loading in Thrive Comments

Here, just check off the boxes that may apply to your comment section. You can load the comment section until the user scrolls down to the bottom of the page, and/or load comments progressively in pages as users click the ‘Load more comments’ button.

You can also choose to load avatar images within comments until they come into view.

6. Paginate Comments or Posts With Lots of Content

Excessively long posts or comment sections typically have a large DOM size that slow down your website’s loading times. Here’s where pagination comes in handy.

Pagination essentially splits your content into manageable chunks, making it easier for users to navigate and digest information.

If you find yourself writing in-depth articles, consider splitting them into logical sections using pagination. This allows readers to take breaks between sections and avoid feeling intimidated by a giant wall of text.

Luckily, you can easily break up long posts using the ‘Page Break’ block in the block editor.

For step-by-step instructions, you can check out our article on how to split WordPress posts into multiple pages.

Adding a page break in the WordPress block editor

We also have a helpful guide on how to paginate comments in WordPress. But essentially, all you need to do is log in to your WordPress admin area and go to the Settings » Discussions page.

Then, check the box next to ‘Break comments into pages’ and customize the number of comments you want to see on each page.

Break comments in pages

Also, we suggest avoiding infinite scroll. While they can keep people on your site longer as they won’t have to switch between pages manually, this can cause performance issues on your server.

7. Minify CSS and JavaScript Files

Your website’s functionality and visual style rely on code files like CSS and JavaScript. While essential, these files can contribute to a larger DOM size if not properly optimized.

Minification can solve this issue by removing unnecessary elements from the code, such as comments, spaces, and line breaks. This smaller size translates to faster loading times and a smaller DOM size.

That said, it’s important to note that minification can sometimes introduce compatibility issues with certain themes or plugins.

Before minifying your code, it’s a good idea to create a backup of your website and test the changes in a staging or local environment if possible. This allows you to identify any potential issues before they affect your live website.

Then, you can read our guide on how to minify CSS and JavaScript files in WordPress for step-by-step instructions.

As you’ll see in the guide, minifying your code is easy if you’re already using a plugin like WP Rocket. All you need to do is go to Settings » WP Rocket and switch to the ‘File Optimization’ tab.

Then, just enable the features to minify CSS and JavaScript files.

Minifying files using the WP Rocket caching plugin for WordPress

Some WordPress hosting providers also offer built-in features for minifying CSS and JavaScript files.

For instance, SiteGround (which is where we host WPBeginner) offers the Speed Optimizer plugin to minify CSS.

Hostinger also offers a similar feature through their built-in CDN, available on their Business plan and higher tiers.

Minifying CSS in SiteGround plugin

8. Reduce Render-Blocking JavaScript and CSS

Another approach to optimize CSS and JavaScript files is by reducing render-blocking.

Render-blocking resources are like foundation materials that prevent the house (your website content) from being built until those resources are delivered and in place. The longer it takes for these resources to load, the longer it takes for users to see your website’s content.

WP Rocket has built-in features to reduce render-blocking CSS and JavaScript.

For example, you can combine CSS and JavaScript files, which will reduce the number of HTTP requests your website needs to make. Fewer requests mean less waiting time for the browser to load everything and render your content.

Minifying CSS, JavaScript, and iFrame in WP Rocket

You can also remove any CSS code that isn’t actually used on your pages.

This not only reduces render blocking but also minimizes overall page size and the number of HTTP requests.

Removing unused CSS in WP Rocket

Additionally, there is a feature called ‘Load JavaScript Deferred.’ This tells the browser to wait on loading some JavaScript files until after the main content of your website (the HTML) has been displayed.

This way, users see your website’s content faster, even if all the background functionalities haven’t loaded yet.

Delay loading non-essential JavaScript code

You can learn more about enabling these features in our article on how to reduce render-blocking CSS and JavaScript in WordPress.

9. Enable WordPress Caching

Caching doesn’t directly reduce DOM size, but it significantly improves your website’s perceived performance.

Here’s what happens when caching is enabled: when a user revisits your website, their browser can check its cache first. If the files are already stored locally, they can be loaded much faster, significantly reducing page load times.

This makes the DOM load and display faster, resulting in a smoother experience for visitors.

Caching also helps your server run more efficiently by lightening its workload. This frees it up to focus on important tasks like processing the DOM, which ultimately speeds up your loading time.

Fortunately, setting up browser caching is simple with a plugin like WP Rocket. This is because the plugin automatically enables caching with optimal settings for your website.

How to set up the WP Rocket caching plugin

Even better, WP Rocket continuously caches your website at all times. Whenever the cache gets cleared (manually or automatically), WP Rocket automatically generates new cache files.

WP Rocket also provides you with the ability to clear the WordPress cache at any time. This might be useful if you make significant changes to your website and want to ensure users see the latest version.

How to clear the WP Rocket cache manually

For more details about WP Rocket’s caching features, you can refer to the setting up caching options section of our WP Rocket installation guide.

10. Use a WordPress CDN

A CDN (Content Delivery Network) is a network of servers spread out around the world. While a CDN doesn’t directly change the size of your website’s code, it makes your website feel like it loads faster.

This is because a CDN stores copies of your website’s static content (images, scripts, stylesheets) on servers in different locations. When someone visits your website, their computer downloads the content from the CDN server closest to them.

This significantly cuts down on download times compared to fetching everything from your original server, which might be far away. This faster delivery makes processing the DOM much faster.

Plus, a CDN helps your original server work faster by sharing the content delivery load. This allows the server to focus on what matters most, like processing the DOM. In turn, this makes your website render quicker overall.

If you need CDN recommendations, we have a guide to the best WordPress CDN services to help you pick the right one for your website.

We use Cloudflare’s CDN on our website here at WPBeginner. It works well for our large blog with lots of visitors.

Cloudflare global network

If you’re interested in learning more, you can check out our insider post on why WPBeginner switched from Sucuri to Cloudflare. This article explains what we looked for when choosing a CDN provider.

11. Optimize Your WordPress Database

Your WordPress website relies on a database to store all its important information, like posts, comments, user accounts, and even configurations.

Over time, this database can hold too much unnecessary data, such as old revisions of posts, spam comments, or leftover information from deleted plugins.

While the database itself isn’t part of the DOM, a bloated database can slow down your website. A slower website can make it seem like the DOM size is larger because everything takes longer to load and render.

Optimizing your database by removing unnecessary data helps your website run smoother and can indirectly improve perceived DOM size.

Check out our helpful guide on how to optimize your WordPress database in one click. This guide walks you through the process of using a plugin to clean up your database and ensure it runs efficiently.

Focus on Overall WordPress Performance, Not Just DOM Size

While addressing the ‘Avoid an excessive DOM size’ warning in WordPress is important for website speed, it’s not the only factor to consider.

A website with a lot of functionality or unique formatting may naturally have a bigger DOM, and that’s okay.

The key is to find the right balance between site performance and features. So, aside from DOM size, you may want to pay attention to other metrics like Core Web Vitals. These are specific metrics that Google uses to measure a website’s user experience.

Core Web Vitals report example

If you’ve used a lot of different optimization techniques and your website still feels slow, then consider seeking help from our Site Speed Optimization Services.

Our expert team can analyze your website and identify the most effective ways to streamline its performance.

WPBeginner Professional Services: Site Speed Optimization Service

All service plans include expert caching configuration for your website needs, image optimization without reducing your visual quality, database autoload optimization, and so much more. Plus, we guarantee that your website will get an A or B+ on our PageSpeed Tool.

We hope this tutorial helped you learn how to fix excessive DOM size in WordPress. You may also want to check out our guide on how to speed up WooCommerce performance or our complete WordPress speed and performance guide.

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 Fix Excessive DOM Size in WordPress (11 Expert Tips) first appeared on WPBeginner.

]]>
https://www.wpbeginner.com/wp-tutorials/how-to-fix-excessive-dom-size-in-wordpress/feed/ 2
How to Create Multilingual Forms in WordPress (2 Methods) https://www.wpbeginner.com/wp-tutorials/how-to-create-multilingual-forms-in-wordpress/ https://www.wpbeginner.com/wp-tutorials/how-to-create-multilingual-forms-in-wordpress/#comments Mon, 16 Sep 2024 10:00:00 +0000 https://www.wpbeginner.com/?p=283556 If you have visitors from all over the world, then multilingual forms can help you engage with a diverse audience, improve the user experience, and increase your website’s accessibility. Luckily, multi-language forms are super easy to set up using WordPress form builder plugins. And in… Read More »

The post How to Create Multilingual Forms in WordPress (2 Methods) first appeared on WPBeginner.

]]>
If you have visitors from all over the world, then multilingual forms can help you engage with a diverse audience, improve the user experience, and increase your website’s accessibility.

Luckily, multi-language forms are super easy to set up using WordPress form builder plugins.

And in this article, we will show you how to create multilingual forms in WordPress using 2 popular plugins: WPForms and Formidable Forms.

Create multilingual forms in-post image

What Are Multilingual Forms, and Why Create One?

Multilingual forms can display multiple languages based on the user’s preference.

These forms are essential for websites targeting a global audience. They ensure that users can interact with your WordPress website in their preferred language.

Here are some reasons for creating multilingual forms:

  • Enhance user engagement. Multilingual forms allow users to understand the questions or information being asked without language barriers. These makes them more likely to complete the form.
  • Improve conversion rates. The conversion rate is the percentage of users who take a desired action on your site, such as signing up for an email newsletter or making a purchase. When users can complete forms in their native language, the process becomes more efficient.
  • Provide a better overall user experience. Multilingual forms contribute to a positive user experience. Users can interact with your site in their own language, which increases their comfort level.

With that in mind, creating a multilingual form is a good idea. That way, you can make your website accessible and user-friendly for a diverse audience.

The following sections will cover two methods for creating multilingual forms. You can use the quick links below to jump to the method you want to use:

Ready? Let’s get started.

Method 1: Creating WordPress Multilingual Forms Using WPForms (Recommended)

The easiest way to create a WordPress multilingual form is by using WPForms and Weglot. These tools can automatically translate your site’s content, including forms, using a language switcher.

WPForms is the best drag-and-drop form builder with thousands of pre-made templates. Its user-friendly interface also makes it easy to create a form in just a few minutes.

In fact, we use it across our own websites for our contact form needs. For more details, you can see our comprehensive WPForms review.

WPForms' homepage

To translate your WPForms forms, you’ll need to use the plugin together with a translation plugin.

Weglot is one of the best WordPress translation plugins for beginners. This tool uses machine learning to automatically translate any content on your website, including pages, posts, and forms.

While we recommend getting the premium version, you can take advantage of its free trial for up to 2,000 translated words on one site.

Weglot's homepage

To get started, you’ll need to install WPForms and Weglot on your WordPress site. If you need help, then please refer to our guide on how to install a WordPress plugin.

Upon activation, you can start creating forms by navigating to WPForms » Add New to create a form. For more details, you can refer to our guide on how to create a contact form.

Once your contact form is ready, let’s translate it using Weglot.

From your WordPress dashboard, go ahead and click the Weglot menu item. Then, you’ll arrive in the ‘Main configuration’ setting area.

Here, you’ll first need to fill in your Weglot API key. If you don’t know what your key is or where to find it, simply visit Weglot’s dashboard and sign up for an account.

Weglot's sign up page

After signing up, you’ll find your API key in your Weglot account dashboard. Then, you can copy and paste the key to the ‘API Key’ field in the ‘Main configuration’ area.

Once verified, you can start choosing your destination languages. Simply click on the ‘Destination languages’ dropdown menu and scroll down the list to select a language.

Weglot's Main Configuration area with a Destination Languages field

If you want, you can add more than one language. Weglot offers more than 100 languages, so feel free to explore and choose destination languages that are relevant to your goals.

Once done, don’t forget to click ‘Save Changes’ so you don’t lose your progress.

After a few seconds, you should see a notification pop-up window that says, ‘Well done! Your website is now multilingual.’

Weglot's success message

Now, you’ll want to visit your website to see if you can translate your WPForms forms. Simply click on the ‘Go on my front page’ notice from the notification.

From here, you should see a dropdown menu at the bottom right corner of your screen. You can click on it to switch to Norsk (Norwegian). This will automatically translate the page, along with your form, to Norsk.

Weglot's language switch on a live website

That’s it! You’ve successfully translated your WPForms contact form with Weglot.

Method 2: Creating WordPress Multilingual Forms Using Formidable Forms

Another way to create a multilingual form in WordPress is by using Formidable Forms and its Polylang add-on. This method allows you to enter your own translations for your form and display them for each target language.

Formidable Forms is a great plugin for making WordPress forms, particularly more advanced forms like calculators, directories, quizzes, and more.

For more information, you can see our Formidable Forms review.

Formidable forms

The Polylang add-on enables you to enter translations of your website content, including forms. With this add-on, you can insert translations for as many languages as you need.

To use the 2 tools together, you’ll first need to install Formidable Forms and Polylang. If you need help, then you can follow our step-by-step guide on how to install a WordPress plugin.

Upon activation, you must first set up Polylang by choosing your target languages. Go ahead and expand the drop-down menu, select your destination language, and click the ‘Add new language’ button.

Polylang's setup process

After that, click the ‘Continue’ button below the ‘Language already defined’ section.

The next step is to enable your media translations. This setting lets you translate your media files’ titles, alternative text, captions, and descriptions.

To activate this setting, simply switch on the ‘Allow Polylang to translate media’ slider. Then, you can click ‘Continue’ to go to the third step.

Polylang's media setup

In the next area, you’ll choose the main language for your website content.

You can click on the drop-down menu and choose from the languages you have registered on the first step. Here, we chose English as our main language.

Polylang's main language setup

Once you’ve selected your site’s main language, you can click ‘Continue’. This will redirect you to the last step.

From here, you’ll see the ‘You’re ready to translate your content!’ notification, followed by some documentation recommendations from the Polylang team.

You can take your time reading those documents or scroll down the screen straight away and click the ‘Return to dashboard’ button.

The Return to dashboard button on Polylang's setup

Now, let’s navigate to Formidable Forms » Add-Ons to activate the Polylang add-on.

To make it easy, you can use the search bar and type in ‘Polylang’ to find it. Once found, go ahead and click ‘Install’.

Polylang's install button on Formidable Forms

Once the installation process is completed, you’ll see the status change to ‘Active’.

Now, you can head over to Formidable Forms » Forms from your WordPress dashboard. By default, the plugin provides you with a sample contact form, so that’s why you have a form ready in the ‘My Forms’ tab.

Let’s try translating the ‘Contact Us’ form.

To start translating the form, the first thing you’ll need to do is hover over the form and click ‘Settings’.

Contact Us' settings button

This will redirect you to the form’s ‘Settings’ tab.

Here, all you need to do is scroll down the screen and click ‘Translate Form’.

The Translate Form button on Contact Us' Settings tab

The plugin will then redirect you to a new page.

There, you can manually enter your translations for all the form elements into your destination languages.

Polylang translating the contact form's elements

When you are done, go ahead and click the ‘Save Changes’ button at the bottom of the screen.

Now, you can publish the form.

You can do this by going back to the ‘Settings’ tab and clicking the ‘Embed’ button.

Formidable Forms' embed button

Then, you can choose to add it to an existing page or a new page. There’s also an option to use the form shortcode to add it to the WordPress block editor.

We are going to choose the ‘Select existing page’ as an example.

Select existing page option for embedding a Formidable Forms' contact form

The next step is to select a page from the dropdown field. For example, here, we’re going to add the form to our site’s ‘Contact’ page.

Once you’ve decided on the page, go ahead and click ‘Insert form’.

Inserting a form to a page

This will redirect you to the block editor. You can scroll down the page to find your newly added ‘Contact Us’ form.

There, you’ll want to go to the ‘Page’ tab on the right-hand side and locate the ‘Languages’ menu item in the bottom right corner.

Let’s click on the ‘+’ button to add the Norsk translation.

The Languages section on WordPress block editor

Upon clicking the button, WordPress will generate a new page.

At Page » Languages, you’ll see that you are currently editing a page for the Norsk translation.

Editing a new page to display in Norsk

Don’t worry if you can’t see the translated version. Once you hit ‘Publish’, the form will be displayed in Norsk.

And you’re done!

You’ve translated your form using Formidable Forms and Polylang. Here’s what it might look like on your WordPress website:

The Contact Us form in Norsk

Bonus: How to Add Multilingual Search in WordPress

Now that your WordPress site offers a multilingual form, we recommend taking it to the next level by adding multilingual search functionality.

Multilingual search enables websites to handle and return relevant results in different languages. This means that users can search and receive results in their preferred language.

Overall, offering a multilingual experience can set your website apart from competitors who may only support a single language.

The easiest way to add multilingual search is with the SearchWP plugin.

This plugin can equip your WordPress site with advanced search features. Upon activation, WPSearch automatically builds a search index and matches search keywords with your site content, titles, tags, shortcodes, products, and much more.

Is SearchWP the right search plugin for you?

WPSearch also has pre-configured settings to work for most websites, including multilingual ones.

To learn more, just see our step-by-step guide on how to add multilingual search in WordPress.

We hope this article has helped you learn how to create multilingual forms in WordPress. Next, you might want to read our guides on how to customize and style your WordPress forms and how to create more interactive WordPress forms and increase conversions.

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 Create Multilingual Forms in WordPress (2 Methods) first appeared on WPBeginner.

]]>
https://www.wpbeginner.com/wp-tutorials/how-to-create-multilingual-forms-in-wordpress/feed/ 2