Wednesday, January 8, 2020

How to Properly Run a Website Speed Test (8 Best Tools)

Do you want to run a website speed test? Most beginners don’t know where to begin and what to look for in their website speed test.

There are a ton of online website speed test tools that you can use. However, all of them present results in a way that it becomes incomprehensible for non-tech savvy users.

In this article, we’ll show you how to properly run a website speed test and the best tools to run your speed tests.

Running a website speed test with proper tools

Best Tools to Run a Website Speed Test

There are a lot of free and paid website speed test and performance monitoring tools that you can use. Each one of them has some really cool features that distinguish them.

You don’t need to just test your website with one tool. You can use multiple tools and run multiple tests to be thorough.

However, we recommend users to just use these tools to improve your website performance. Trying to achieve a perfect grade or score on these tools is often extremely difficult and quite impossible in most cases for real-world functioning websites.

Your goal should be to improve your page load speed for your users, so they can enjoy a faster and consistent user experience on your website.

Having said that, let’s take a look at the best tools to run a website speed test.

1. IsItWP Website Speed Test Tool

IsItWP Website Speed Test Tool

IsItWP’s free website speed test tool is the most beginner-friendly website speed testing tool. It allows you to quickly check your website performance, run multiple tests, and drill down the results to find out what’s slowing down your website.

You also get improvement suggestions neatly organized. You can click on each category to see the steps you can take to troubleshoot performance issues. The website also offers server uptime monitoring and other useful tools for website owners.

2. Pingdom

Pingdom

Pingdom is one of the most popular website performance monitoring tool. It is easy to use and allows you to select different geographical locations to run a test which is really handy.

The results are presented with an easy to understand overview, which is followed by the detailed report. You get performance improvement suggestions at the top and individual resources as they loaded.

3. Google Pagespeed Insights

Google Pagespeed insights

Google Pagespeed Insights is a website performance monitoring tool created by Google. It gives you website performance reports for both mobile and desktop views. You can switch between these reports and find some issues that are common among both reports and some that Google recommends being fixed in the mobile view.

You also get detailed recommendations for each issue, which is helpful for developers. However, the tool itself is a bit intimidating for beginners and non-developer users.

4. GTmetrix

GTmetrix

GTmetrix is another powerful website speed testing tool. It allows you to test your website using popular tools like pagespeed and YSlow. You can change geographic location and browser by creating an account.

It shows detailed reports with a brief summary of the results. You can switch between the two tools and view recommendations. Clicking on each recommendation will provide you with more details.

5. WebPageTest

WebPageTest

WebPageTest tool is another free online speed test tool that you can use. It is a bit more advanced than some other tools on our list. However, it does allow you to choose a browser and geographic location for your tests.

By default, it runs the test 3 times to get your website speed test results. It shows a detailed view of each result which you can click to expand and view the full report.

6. Load Impact

Load Impact

Load Impact is slightly different than other website speed test tools on this list. It allows you to see how your website slows down when more visitors arrive at the same time.

It is a paid service with a limited free test, which allows you to send 25 virtual users within 3 minutes. The paid version allows you to test larger traffic loads. This helps you test website speed test, while also testing how increased traffic affects your website.

7. Uptrends

Uptrends

Uptrends is another free website speed test tool. It allows you to select a geographic region, browser, and switch between mobile and desktop tests.

Results are simple and easy to understand as it also shows your Google pagespeed score in the summary. You can scroll down for details and comb through your resources to understand the performance issues.

8. Byte Check

Byte Check

Byte Check is another free website response time checker. It is made specifically to check TTFB (time to first byte) measurement, which is the time your website takes to deliver the first byte of data back to user’s browser. It is a highly effective way to test how faster your WordPress hosting server is.

You can use any of the tools mentioned above to check your website speed and performance. However, simply running the tests alone would not help you much.

You’ll need to learn how to run these tests properly and use the data to optimize your website.

How to Properly Run a Website Speed Test

Running website speed tests is not guaranteed to tell you exactly how your website performs.

You see, the internet is like a highway. Sometimes there is more traffic or congestion which may slow you down. Other times, everything is clear and you can run through it much quicker.

There are several other factors involved which would affect the quality and accuracy of your results. It is important to run these tests thoroughly before you start analyzing the data.

Let’s see how to properly run a website speed test to get more accurate results.

1. Run Multiple Tests

There are multiple factors that can affect your test. Even though most website speed test tools run over the cloud at the fastest internet speeds, each test would show you slightly different results.

The most important difference you will notice is the time it took to download the complete webpage. We recommend running at least 3 tests to get a more accurate picture.

Run multiple tests

You can then take out an average result and use it to decide whether or not your website needs improvement.

2. Test from Different Geographic Locations

If most of your customers visit your website from Asia, then testing your website speed using servers located in the USA would not be ideal.

The test results will show you a different user experience than what your actual users are feeling when they visit your website.

Geo locations

This is why you need to use Google Analytics to see where your users are coming from. After that, use that information to select a geographic region for your tests.

For example, if you learned that most of your website users are coming from Europe, then choosing a test server in Germany will give you the closest results.

If your website visitors are from all over the world, then you can run multiple tests to find out how your website performance varies for different regions.

3. Make Sure Your Website Caching is Turned On

Make sure that your website caching is turned on before running the tests. This would allow you to test website caching and how effective it is in improving the performance.

Now the problem is that some caching solutions only store cache when a user requests the page. This means cache takes some time to build and may expire by the time you run the tests.

This is why we recommend WP Rocket. It is the best WordPress caching plugin that lets you setup your WordPress cache with a few clicks and without learning technical stuff.

The best part is that it proactively builds your website cache, which significantly improves your website performance. See our guide on how to set up WordPress cache using WP Rocket for more details.

4. Check the Performance of Your Website Firewall / CDN Service

While WordPress caching plugins can do a lot, they definitely have their limitations. For example, it cannot block DDOS attacks and brute force attempts. It also does nothing against spambots which means your server resources get wasted a lot.

This is where you need Sucuri. It is the best WordPress firewall plugin which improves your server performance by blocking malicious requests.

Now, normally all your website files are served from the same server. You can improve this by adding a CDN service to your website. We recommend using MaxCDN (by StackPath), which is the best CDN solution for beginners.

A CDN service allows you to serve static website files like images, stylesheets, and scripts through a network of servers spread around the globe. This reduces the server load on your website, makes it load faster, and improves user experience for all your users.

Turning on your CDN service and the firewall will improve your test results significantly.

Understanding Website Speed Test Results

The most important parameter that you should look into is the time it takes your website to load.

Page load time

This is the parameter that affects your users the most. If your website takes longer to load, then users may decide to hit the back button, have a bad impression of your brand, and consider your website of low quality.

If your website is taking longer than 2 seconds to load, then look at the drill-down reports. Find out which resources are taking longer to load.

Usually, these are images, stylesheets, scripts loading from third-party websites, video embeds, and so on. You would want to make sure that those images are served from the cache or your CDN service.

Looking at individual resources

You would also want to pay attention to how long your server takes to respond to each request and how much time time it takes to deliver the first byte.

You would also want to make sure that browser compression (also called gzip compression) is working. This reduces the filesizes between your server and user’s browser by compressing them.

If your page has lots of images and videos, then you may want to consider deferred loading techniques also called lazy loading. This allows content to be loaded when a user scrolls down and only loads the content that is visible on the user’s screen.

As always, you definitely want to make sure your images are optimized for web by using an image compression tool.

The second important parameter you would want to test is the TTFB (time to first byte). If your web server is continuously showing a slower time to the first byte, then you may need to talk with your web hosting company.

All top WordPress hosting companies like Bluehost, SiteGround, and WP Engine have their own caching solutions. Turning on your host’s caching solution may significantly improve TTFB results.

We hope this article helped you learn how to properly run a website speed test and the best tools to run your tests. You may also want to follow our step by step WordPress speed and performance guide to boost your website speed.

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

The post How to Properly Run a Website Speed Test (8 Best Tools) appeared first on WPBeginner.


January 08, 2020 at 07:06PM

Tuesday, January 7, 2020

How to Use Dynamic Field Population in WordPress to Auto-Fill Forms

Do you want to use dynamic field population in WordPress to auto-fill forms on your website?

Dynamic field population allows you to automatically fill form fields based on user selection, query strings, or field type.

This makes your forms smart, saves users time, deliver a better user experience, and ultimately improves form completion rate.

In this article, we’ll show you how to use dynamic field population in WordPress to auto-fill forms.

Automatically fill form fields in WordPress with Dynamic field population

What is Dynamic Field Population?

Dynamic field population is a technique that allows website owners to automatically fill form fields based on user selection, form type, query strings, or conditional logic.

For example, an eCommerce store can create a form where product field in the form is dymanically populated using existing products in WooCommerce or any other eCommerce software.

Similarly, a real estate website can automatically populate listings, agents, property type fields in their appointment and lead generation forms.

Advanced users and developers can also use URL parameters to dynamically fill out form fields using smart links from email newsletter or other website interactions.

Having said that, let’s take a look at how to easily use the dynamic field population in WordPress.

How to Use Dynamic Field Population in WordPress

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

WPForms is the best WordPress contact form plugin on the market. It allows you to easily create online forms using a simple drag and drop tool.

It also comes with dynamic field population, conditional logic, and advanced form fields. Together, these features allow you to create smarter and interactive forms for your website.

Note: WPForms is co-founded by WPBeginner founder, Syed Balkhi.

Upon activating the plugin, you need to visit the WPForms » Settings page to enter your license key. You can find this information under your account on the WPForms website.

WPForms License key

Next, you need to visit WPForms » Add New to create your first form. You’ll be asked to provide a name for your form and then select a template to start.

Creating a new form

WPForms will now load your form with pre-selected fields. You can click to edit form fields or use drag and drop feature to move them up and down. You can also add and remove form fields with just a click.

Let’s add a new form field to populate it with dynamic choices.

You can add a dropdown, multiple-choice, or a checkbox field to your form to use dynamic choices options. Simply click on a field from the left column to add it to your form.

Add form fields

Next, click to edit the field and then expand the Advanced Optins menu from the left column.

Advanced options

From here, you need to select a dynamic option under Dynamic Choices. WPForms supports post types and taxonomies registered on your WordPress site. For the sake of this tutorial, we’ll select Products post type.

Dynamic choices

WPForms will now automatically load and display the fields in the form preview.

You can now save your form and exit the form builder.

To add the form in a WordPress post or page, simply edit the post or page where you want to add it.

On the post edit screen, add WPForms block to your post edit area. After that select the form you created earlier from the drop down menu.

Adding WPForms block in WordPress

You can now save your post or page and visit your website to see your form with dynamic field values in action.

WPForm preview

Automatically Fill Form Fields Using URL Parameters

WPForms also allows you to dynamically fill form fields using URL parameters. This allows you to create smart links that automatically pass down information to the form and fill it for your users to submit.

First, you need to create a new form or edit an existing form in WPForms. Once you are done creating your form, switch to the settings tab from the left column and then select the ‘General’ tab.

On this screen, you need to check the box to Enable dynamic field population.

Enable dynamic fields

You can now save your form and exit the form builder. Your form is now ready to dynamically populate form fields using URL parameters.

Creating Links with URL Parameters

WPForms accepts dynamic form fields passed through URL parameters in a specific format.

https://ift.tt/2SY0Ctb

Let’s break it down.

  • The part of the URL before the question mark ‘?’ is the URL of the page that has your form. For example, your contact form page.
  • ?wpf – Indicates the start of the WPForm form field parameters.
  • 15 – Is the ID of your form
  • _1 – Next you have the field ID
  • =value – = indicates the start of the value you want to pass to the form followed by the actual field value.

Here is an example of a URL where we are passing a product title as a text field to a feedback form.

https://example.com/contact/?wpf15_2=Vintage%20Flower%20Vase

Adding URL to your post

Notice, how we have used %20 to indicate spaces between words in the product title.

Finding Form and Field IDs in WPForms

In order to create URL parameters, you’ll need to know the form and field IDs. Here is how you can find these values.

Simply edit your form, and you will see the form ID in your browser’s address bar.

Finding form ID in WPForms

Similarly, in order to find the form field ID, you need to just click to edit it. You will see form field properties in the left column along with field ID at the top.

Finding the form field ID

Now, what if you wanted to pass a value to a subfield?

Simply add the subfield identifier after the field ID in your URL like this:

https://example.com/contact/?wpf15_3_city=london

For more details, see WPForms developer documentation which shows more examples to use different parameters for all types of form fields.

You can now use this feature in combination with your CRM software or email marketing service to send smart form links to your users. Most marketing platforms come with their own personalized MERGE tags that you can add in the smart URL to automatically fill personal information in the form.

You can also use dynamic field population feature with other form plugins like Formidable Forms, Gravity Forms, etc. However, we recommend using WPForms because it makes the whole process easy, and we know it well because we built the product.

We hope this article helped you learn how to use the dynamic field population in WordPress to auto-fill forms. You may also want to see our article on how to track and reduce form abandonment in WordPress.

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 Use Dynamic Field Population in WordPress to Auto-Fill Forms appeared first on WPBeginner.


January 07, 2020 at 06:57PM

How to Clean up Your WordPress Media Library (2 Easy Methods)

Do you want to clean up your WordPress media library? WordPress makes several copies of media files that up load, and over time this leads to a ton of files in storage that are not used anywhere on your website.

Cleaning up your WordPress media library saves disk space on your hosting server and reduces backup sizes (both of which will help you save cost).

In this article, we will show you how to easily clean up your WordPress media library step by step.

Cleaning up WordPress media library

Why Clean Up WordPress Media Library?

WordPress creates several copies of each image you upload to your website. WordPress themes and plugins may also request additional image sizes.

Apart from these image sizes, you may also end up uploading a ton of images that are not really used anywhere on your website.

These media files take up disk space on your WordPress hosting server. They also increase your WordPress backup sizes, which means it takes longer to backup, transfer, and restore your website.

If you have been running a WordPress website for some time, then you can benefit from cleaning up the WordPress media library.

That being said, let’s take a look at how to easily clean up the WordPress media library.

For this tutorial, we will cover two different plugins, and you can choose the one that looks easier.

Note: You will be cleaning up unused media files by deleting them forever. This action cannot be undone. Make sure that you have a complete WordPress backup in place before proceeding further.

Method 1. Clean up WordPress Media Library using Media Cleaner

For this method, we will be using the Media Cleaner plugin. It is available as a free plugin with a pro version available with some more features.

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

Upon activation, go to Media » Cleaner page to analyze your WordPress media library. The plugin may ask you to reset itself, during this process it will create a new table in your WordPress database to store data.

After that, you need to click on the Start Scan button to run the media analysis.

Media Cleaner

Media Cleaner will now look for files in your media library and inside your WordPress posts / pages. It will try and find the files that are in your media library but are not used on your website.

This may take a while depending on the size of your media library and the content you have.

Once finished, you’ll see a list of results. It will show you all the media files that are not currently in use on your website.

Media cleaner results

You can select the files that you don’t want to keep and delete them. You can also click on the Delete All button to instantly delete all unused media files.

Clean Up WordPress Media Library using Media Dedupper

For this method, we will be using the Media Dedupper plugin. It is also available as both a free and paid version.

However, we recommend using the pro version because it allows you to prevent deleting duplicate images in the WordPress gallery, Yoast SEO, WooCommerce, and more.

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

Upon activation, you need to visit Media » Manage Duplicates page and click on the Index Media button to analyze your media library.

Manage duplicates

The plugin will start analyzing your media library and will list all the duplicate images. You can then see if a duplicate image is used on your website.

After reviewing the files, you can select all files or specific duplicates. Next, simply select ‘Smart Delete’ from the Bulk actions drop-down menu and then click the Apply button.

Smart delete

Smart Delete feature will make sure that images that are being used on your website are not deleted. It will also merge duplicate images allowing you to reuse media files without reuploading the same file.

Optimizing Your Media Files

Now that you have taken care of the duplicate images on your website, the next step is to optimize your existing media files.

A lot of beginners, directly upload images from their phones and cameras. These high-quality images are often too big in filesize. They take up disk space, increase backup sizes, and affect WordPress speed and performance.

You can use a WordPress image compression plugin to automatically optimize your media files without losing quality. You can also use our tips on how to optimize images for web performance before you upload them on your site (this is much better).

We hope this article helped you learn how to clean up the WordPress media library. You may also want to see our guide on how to clean up your WordPress database.

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 Clean up Your WordPress Media Library (2 Easy Methods) appeared first on WPBeginner.


January 06, 2020 at 05:32PM