700+ Best Free WordPress Tutorials (Step by Step) https://www.wpbeginner.com Beginner's Guide for WordPress Tue, 17 Sep 2024 10:00:17 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.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
How to Create an SEO Report for Your WordPress Site https://www.wpbeginner.com/wp-tutorials/how-to-create-an-seo-report-for-your-wordpress-site/ https://www.wpbeginner.com/wp-tutorials/how-to-create-an-seo-report-for-your-wordpress-site/#comments Thu, 12 Sep 2024 10:00:00 +0000 https://www.wpbeginner.com/?p=293334 At WPBeginner, we use SEO reports as health checklists for our websites. They tell us at a glance how well our sites are doing and what we need to do to rank higher. When you create an SEO report, you generate an actionable list of… Read More »

The post How to Create an SEO Report for Your WordPress Site first appeared on WPBeginner.

]]>
At WPBeginner, we use SEO reports as health checklists for our websites. They tell us at a glance how well our sites are doing and what we need to do to rank higher.

When you create an SEO report, you generate an actionable list of tasks you need to do to improve your website’s SEO. This allows you to optimize your site for SEO by checking off items on a list, which can result in more traffic coming to your site.

In this article, we’ll show you step-by-step how to create an SEO report. This will give you a clear path to optimizing your site for search engines, one issue at a time.

How to Create an SEO Report for Your WordPress Site

Why Do You Need an SEO Report for Your WordPress Site?

Improving your WordPress SEO is important because it helps you get more website traffic.

Search engines are the biggest source of visitors for most websites. SEO, or Search Engine Optimization, is a process that improves your website rankings so your site appears closer to the top of search engine results pages (SERPs).

The problem is that SEO is a complex process, and it can be difficult for beginners to know where to start. This is where an SEO report can help.

Performing an SEO analysis will give you a score on your site’s current SEO effectiveness. It will also generate a report of actionable tasks you can perform to increase organic traffic to your website.

You can think of an SEO report as a to-do list you can follow to optimize SEO, improve website traffic, and boost your sales and conversions.

Expert Tip: Would you like an SEO expert to optimize your site for you? Our Professional SEO Services start at just $649 and include setting up AIOSEO and Google Analytics, keyword research, on-page optimization, a domain overview report, and much more.

With that being said, let’s take a look at how to create an SEO report for your WordPress site. We will cover two methods:

1. Creating an SEO Report Using All in One SEO (Free)

You might like to create an SEO report that you can easily view from your WordPress dashboard. The easiest way to do that is with All in One SEO (AIOSEO), the best SEO plugin for WordPress that is trusted by over 3 million businesses.

AIOSEO automatically creates an SEO report for your WordPress website that helps you optimize it for search engines without hiring an expert. The plugin offers an SEO Analysis tool that you can use to identify the SEO tasks you have not yet completed.

We have written a complete AIOSEO review where you can learn more about the plugin.

Note: For this tutorial, we will use the AIOSEO free version because it includes the SEO Analysis tool. There is also a premium version of AIOSEO that offers more features, including sitemap tools, schema markup, a redirection manager, and more.

Installing and Activating All in One SEO

To get started, you need to install and activate the AIOSEO plugin on your website. For more details, you can follow our guide on how to install a WordPress plugin.

Once it is activated, the plugin will automatically launch a setup wizard. You need to click the ‘Let’s Get Started’ button to continue.

The AIOSEO Setup Wizard

You can see detailed instructions for configuring the plugin in our tutorial on how to set up All in One SEO for WordPress.

When you are ready, simply head over to the All in One SEO » SEO Analysis page in your WordPress dashboard. You will find yourself looking at the ‘SEO Audit Checklist’ tab.

TruSEO Score

The first thing you will notice is that All in One SEO has given your website a score for its overall SEO. This is the plugin’s TruSEO score, where a good score is between 50 and 75, and the best SEO results come with a score above 70.

SEO Analysis in AIOSEO

You improve the score by optimizing your website for SEO. This is where an SEO report is helpful.

You will notice that All in One SEO creates an actionable, easy-to-understand SEO checklist. It shows you the exact steps you need to take to improve your TruSEO score.

Complete SEO Checklist in AIOSEO

These steps are displayed in four sections: ‘Basic SEO,’ ‘Advanced SEO,’ ‘Performance,’ and ‘Security.’

If you have already made some SEO improvements with good results, you will see them next to a green check mark. Important issues that need work will have a red cross. Recommended improvements are marked in blue.

You can filter the list to see just the red, blue, or green items by clicking the tabs above the list.

You Can Easily Filter the AIOSEO Checklist and See Details

You can easily click the arrow to the right of each checklist item to read more details about it. This will help you understand why that item is important for SEO and how you can fix the issue.

Basic SEO Report

The first section of your SEO report is ‘Basic SEO’, which focuses on the basic elements of on-page SEO. This is the best place to start.

AIOSEO Basic SEO Report

Here are some optimization tasks included in the ‘Basic SEO’ checklist:

  • Make sure your site’s SEO title and meta description are not too long or too short for the best SEO results.
  • Include appropriate keywords in your H1 and H2 heading tags.
  • Check that you are adding alt tags to your images.
  • See if you are using the correct number of internal and external links.

Advanced SEO Report

Next, you will find the ‘Advanced SEO’ checklist, which looks deeper into the best practices of technical SEO.

AIOSEO Advanced SEO Report

This checklist includes more advanced SEO issues:

  • You can check that your site uses a canonical link tag that lets search engines know the correct URL of your website.
  • It makes sure that you are not accidentally using noindex headers or meta tags that ask search engines not to index your pages.
  • It checks the www and non-www versions of your website’s URL redirect to the same site.
  • The checklist will warn you if you are not using a robots.txt file to help search engines crawl and index your site more easily.
  • You can also see whether you are using schema markup to display additional information about your site in search results.

Performance Report

The third section of the SEO report is ‘Performance,’ which measures the speed and performance of your WordPress website. Slow websites are bad for both SEO and user experience.

AIOSEO Performance Report

The ‘Performance’ checklist includes the following items that can improve your site’s SEO:

  • You should make sure you are using expires headers for your images.
  • Also make sure you are minifying JavaScript and CSS in WordPress.
  • This checklist lets you know if your HTML pages are larger or smaller than average.
  • It measures your website response time, which can be improved by using a caching plugin.

Security Report

The final section in AIOSEO’s SEO report is ‘Security.’ Website security is essential for protecting user data and maintaining search engine trust.

AIOSEO Security Report

Here are the ‘Security’ items in All in One SEO’s checklist that can help boost your SEO:

  • It makes sure that directory listing is disabled on your site because this makes it more difficult for hackers to access your website files.
  • It checks that Google has not blacklisted your website for malware because Google will de-index suspicious websites.
  • It also makes sure your site is using the secure HTTPS protocol to protect the privacy of your users. We recommend that all websites enable HTTPS. Otherwise, Google will mark the site as insecure, giving a bad impression of your business.

Now that you have a detailed SEO report covering four important areas, you can start to work on one issue or improvement at a time. As you make progress, you will notice your red items turning green and your TruSEO score increasing. This will lead to more organic traffic from search engines.

2. Creating an SEO Report Using Website SEO Analyzer (Free)

This method does not require any setup, but you will not be able to see the report in your WordPress dashboard. You will also have to create the report each time you want to see it.

Simply visit the WPBeginner Website SEO Analyzer page. Once there, you need to type in your website’s URL and then click the ‘Analyze’ button.

WPBeginner's Website SEO Analyzer

Tip: You can also type in the URL to a competitor’s website to perform a competitor analysis.

After you click on the ‘Analyze’ button, an SEO report will be generated. This includes an overall SEO score as well as sections for basic SEO, advanced SEO, performance, and security.

You’ll also find a button that lets you download the SEO report to your computer as a PDF.

WPBeginner's Website SEO Analyzer

As you can see, the free SEO report gives you most of the information from the ‘SEO Analysis’ tab in All in One SEO. Please refer to the above section for more details.

We hope this tutorial helped you learn how to create an SEO report for your WordPress site. You may also want to see some other guides related to WordPress search engine optimization:

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 an SEO Report for Your WordPress Site first appeared on WPBeginner.

]]>
https://www.wpbeginner.com/wp-tutorials/how-to-create-an-seo-report-for-your-wordpress-site/feed/ 4