Time to First Byte (TTFB) and server response times are metrics that directly correspond to your website’s perceived speed and overall performance. Optimizing your site to minimize these times can help improve Core Web Vitals scores and, consequently, edge out stiff competition for search engine ranking positions. This also helps you provide the best possible user experience for your site visitors.
Working on these metrics might sound complicated, but there are plenty of ways even beginners can reduce TTFB and server response times on WordPress. For instance, you can install optimization plugins, use a Content Delivery Network (CDN), or migrate to a faster web host.
In this post, we’ll take a closer look at TTFB and why it’s important. Then, we’ll discuss six ways to reduce your TTFB and server response times.
What is Time to First Byte (TTFB)?
To put it simply, Time to First Byte (TTFB) refers to the time that passes between when you click on a web page to when your browser first starts to receive a response. In more technical terms, TTFB measures how long it takes for the server to deliver the first byte of data as a result of an HTTP request.
This process begins with an HTTP request which needs to be received by the server. The speed of this stage depends on a few factors, including the speed of the network, the distance between the client and the server, and any interruptions that might occur.
Next, the server has to process the request. This might involve running scripts, making database calls, and communicating with other network systems. Lastly, the server will deliver a response. This can be affected by the speed of the server and the user’s internet connection. The longer these stages take, the longer it takes for your page to display.
How does TTFB impact the user experience on a WordPress site?
Time to First Byte affects your overall page speed, so keeping it low can contribute to a positive user experience. And visitors are pretty demanding — when page speed increases from just one to three seconds, the probability of people leaving your site increases by 32 percent.
Since page speed is important for keeping users engaged, a good TTFB score can help you generate leads, score conversions, and make sales.
From overloaded servers and discount hosts cutting corners to more positive problems like a huge spike in the popularity of your site, there are a number of things that can contribute to high TTFB times. These include:
A slow server. Your server might not be optimized for WordPress, or you might be on a shared server where you have to compete with other websites for resources.
Servers that are located in just one area. This can cause a high TTFB score for visitors who reside farther from the data center. This is because the further away people are from your server, the higher the network latency and the longer the wait times.
A configuration issue with your server. In this case, you’ll need to contact your web host to see what they can do.
Server saturation. If there’s too much traffic on your website, your server won’t be able to handle the number of requests. This can be quite common if you have a basic hosting plan and experience sudden, rapid growth.
Slow DNS response times. Most people stick with the Domain Name System (DNS) provided by their web host. But, typically, hosting providers don’t spring for a premium DNS, which can lead to slow server response times and high latency.
Unoptimized content. Huge files, lots of database queries, and other types of unoptimized content can result in high TTFB.
How to improve server response times (TTFB) on WordPress (Six Ways)
Now that you know why TTFB is important, let’s take a look at six simple ways to reduce TTFB and server response times.
1. Optimize for Core Web Vitals
If you’re not happy with your TTFB score, the best place to start is by installing a plugin that targets an improvement in Core Web Vitals. These are separate metrics that Google uses to determine site performance and user experience. While this could potentially improve your TTFB, it will also improve the visitor experience overall and compensate for any harm done by a low TTFB score.
With Jetpack Boost, you can optimize your Core Web Vitals and the overall speed of your website.
Developed by Automattic (the company behind WordPress.com), Jetpack Boost is free, open-source, and beginner-friendly. It’s a powerful optimization tool that enables you to improve SEO and Core Web Vitals, targeting specific metrics like LCP and FCP.
To get started, all you need to do is install and activate the plugin in WordPress. Go to Plugins → Add New. Then, you can search for “Jetpack Boost†and click Install now → Activate.
If you have the Jetpack plugin, you can also add Jetpack Boost as a feature.
Once you’ve activated the plugin, you’ll get an instant performance score for desktop and mobile. There are also several features you can take advantage of.
To get started, your only decision is what toggles to activate. You can:
Optimize CSS loading. This ensures that your important styling information loads first.
Defer non-essential JavaScript. This is a great way to speed up content delivery since you’ll be able to load images and styles more quickly.
Turn on lazy image loading. With this feature enabled, your images will only load as they appear on the screen, rather than a browser rendering all the images on a page at once.
2. Use a Content Delivery Network (CDN)
Another easy way to reduce TTFB and server response times is to add and use a Content Delivery Network (CDN) in WordPress. CDNs are a cluster of servers, located at strategic locations to speed up the delivery of static content like images and scripts.
CDNs enable you to eradicate the issue of latency and improve your loading times. For instance, your web host’s servers might be in the United States, but you may have lots of visitors based in Europe.
In this instance, TTFB will likely be high for your European visitors since they’re located far away from the server. To combat this, you can use a CDN that uses multiple servers, including one that’s closer to your visitor’s location.
There are a number of CDN providers, but Jetpack CDN is the ideal choice for WordPress.
Jetpack CDN is beginner-friendly and doesn’t involve any complicated configuration or installation steps. Better yet, it’s free, it’s automatic, and there’s no cap on the number of static files you can serve through the CDN. Additionally, Jetpack CDN takes extra measures to improve loading times by automatically resizing images for mobile devices.
While CDNs are a great way to reduce TTFB and server response times, they also enable you to stabilize your site. For example, if one of your web host’s servers goes down, you can continue serving content from the CDN. In fact, even if the entire data center crashes, you can rely on CDNs to keep your website available.
3. Leverage page caching
Page caching speeds up your website’s loading times, but it also reduces the server processing time. This targets the middle part of the TTFB process.
Without caching, WordPress has to execute PHP and MySQL queries every time a new request is made. This can be a time-consuming process.
So instead, you can use caching to generate HTML files directly, rather than generating them from PHP every time. As a result, it takes much less time for you to display your pages to visitors.
Some web hosts like DreamHost offer built-in caching with their managed WordPress hosting plans. If this is the case, you may just need to reach out and ask the host to activate it for you.
Otherwise, there are plenty of free plugins you can use to add caching to your site, like WP Super Cache. This plugin is suitable for all kinds of users.Â
If you’re comfortable editing PHP files, you can use the Expert caching method, which is the quickest available.
Or, beginners can stick with the Simple caching mode, which enables you to keep portions of your page dynamic.
What’s more, you can schedule Garbage Collection at regular intervals to free up space on your server. Meanwhile, you can activate Preload Mode to conserve resources while serving static content at fast speeds.
4. Migrate to a faster web host
If you’re not happy with your current performance, and you think your host’s servers may be to blame, you can migrate to a new web host or server to reduce TTFB. Even if you’re on a budget, you should still prioritize choosing a quality WordPress host with reliable service.
Shared hosting is usually the cheapest option. Meanwhile, dedicated hosting sits at the pricier end of the scale. That’s because, with shared hosting, your website will be on a server with many other websites. So, response times can be slow, and your server is less equipped to handle sharp traffic spikes.
It can be best to opt for a managed WordPress package. The servers used for these plans are optimized specifically for WordPress, and you’ll likely get some sophisticated built-in features for fast performance.
Some quality web hosts even give you the option to automatically minify CSS or JavaScript code, which is a quick and easy way to improve your site’s performance. But fancy features aren’t the only important factor to consider.
Before you make a decision on hosting, it’s a good idea to find out where your host’s servers are located. If most of your customers are based in Europe, it isn’t ideal to choose a web host with data centers scattered around the United States.
On top of that, it’s important to make sure your host’s plans are scalable. For instance, if you’re expecting your business to grow rapidly, your host should easily be able to scale up your resources. This way, you’re able to maintain a good TTFB score and enjoy fast server response times.
5. Use the latest PHP version
Another way to reduce TTFB on WordPress is to make sure you’re running the latest PHP version. Hypertext Preprocessor (PHP) is the programming language that WordPress is built upon.
With each new version of PHP, you can access tighter security measures that reduce the possibility of hacking attempts. But, you can also access new features that expand the functionality of your site or improve its performance.
For example, the more advanced versions of PHP can handle more requests per second. Therefore, to reduce TTFB and server response times, you can check and update your website’s PHP version.
It’s important to make sure you’re running the latest versions of all software on your site, including themes and plugins. This way, you can strengthen your site’s security and improve overall performance.
To do this, head to Dashboard → Updates.
Here, you can view any updates that are available. You can also enable automatic updates for WordPress security releases. Plus, if you scroll further down, you can see whether there are updates available for any plugins and themes on your site.
If there are, simply check the box besides the software you want to update. Then, click on Update. Keep in mind, it’s always a good idea to make a fresh backup of your site before running updates in case something goes wrong.
6. Use a premium DNS provider
Upgrading your Domain Name System (DNS) provider is another easy way to reduce TTFB and server response times on WordPress. Even though some web hosts offer a DNS, most don’t give you access to a premium provider.
DNS works by translating domain names into computer-friendly IP addresses so that browsers can load internet resources like web pages. The process takes place automatically as far as the user is concerned, so it’s not something you need to actively initiate.
Premium DNS providers tend to use a global network of DNS servers, enabling you to answer DNS queries with low latency. This way, you can serve content more quickly, improving SEO and Core Web Vitals.
To take things up a notch, you can even enable DNS prefetching on your site. With this, you can instruct the browser to perform DNS lookups on a page while the user is browsing.
Frequently asked questions about TTFB
Although we’ve tried to provide an in-depth look at how to reduce TTFB and server response times, you might still have some questions. In this section, we’ll answer the most common questions concerning TTFB.
How can I measure my WordPress site’s TTFB score?
Before you start implementing tips from this post, you can measure your site’s current TTFB using some handy tools. PageSpeed Insights is your best bet, since it’s free, fast, and easily accessible. All you need to do is enter your site’s URL and click on Analyze.
Then, you’ll receive a Core Web Vitals assessment for desktop and mobile. Here, you can see clear scores for each of the metrics including Total Blocking Time and FCP. Below this, you’ll also find diagnostics information and advice on how to improve your accessibility rating.
Google Search Console (GSC) is another useful tool to measure TTFB. But, to get started with GSC, you’ll first need to create an account.
Alternatively, you can use Lighthouse, which you can run in Chrome DevTools from the command line or as a Node module. This way, you can access an advanced page audit and generate a free report to improve the quality of your web pages.
This audit will include an assessment of plenty of useful metrics including TTFB and Time to Interactive (TTI).
What is a good TTFB score?
According to Google, most websites should aim for a TTFB score of 0.8 seconds. Anything over 800 milliseconds (ms) needs improvement. Scores above 1800 ms are considered very poor. If this is the score you receive, you should take steps to reduce your TTFB right away.
How can I easily account for a low TTFB score?
The best place to start is with a free plugin like Jetpack Boost. Not only is this method the most beginner-friendly, it’s also super quick to set up. It works automatically in the background of your site and requires very little configuration.
It works to improve the overall performance of your site and your Core Web Vitals score, immediately going to work to counteract a poor TTFB result.
Plus, you can target important Core Web Vitals straight from your WordPress dashboard. To get started, head to Plugins → Add New in WordPress. Then, search for “Jetpack Boost.†Click install now → Activate.
Then, from your WordPress dashboard, visit Jetpack → Boost to view your performance score. This is also where you can tweak settings to boost your Core Web Vitals and improve SEO. For example, you can enable Lazy Loading so that your images only load when they’re needed.
Additionally, you can defer non-essential JavaScript to prioritize the loading of styles and images. The plugin is super simple to use, and if you change your mind about one of the settings, you only need to return to this page and use the toggle to disable the feature.
Reduce TTFB and server response times now
If you’re looking to improve the user experience and boost your Core Web Vitals, you might want to reduce Time to First Byte (TTFB). Fortunately, there are tons of ways to reduce server response times and power up the performance of your WordPress website.
To recap, here are six ways to improve your site performance, TTFB, and server response times:
No matter your site, you can always benefit from a quick boost in performance. If you’re on WordPress, that power comes in a handy plugin. Get Jetpack Boost today!
Using web fonts, CSS, and JavaScript can make your website more unique and interactive. But waiting for these file types to load can be frustrating for your site’s visitors.
This is where preloading key requests in WordPress can come in handy. By telling browsers to download these file types earlier in the request chain, they’ll be on hand when the browser is ready to render the content. In turn, this can speed up your perceived page load time and provide a better overall web experience.
In today’s guide, we’ll discuss what preloading key requests means, along with the potential performance benefits for your website. Then, we’ll explain how to do this on your WordPress site with Google Fonts, Font Awesome, CSS, and JavaScript.
What does “preload key requests†mean in WordPress?
When someone visits your website, their browser will send multiple HTTP requests to your site’s server, asking it for the files that make up your content. The server will take a certain amount of time to start responding to these requests and sending information to the browser, which is referred to as the Time to First Byte (TTFB).
Next, the browser will start downloading content (PHP, JavaScript, and CSS) from your site files and rendering it to display viewable pages (HTML) on the front end. Once this process has been completed, the visitor can see your fully-loaded webpage.
A browser will use a ‘request chain’ to ask for and render content in a sequence. That means there are multiple steps of smaller requests within the larger ones, with the end result being that a visitor can view the content on your site.
Essentially, ‘preloading’ means telling a user’s browser to download essential files first instead of waiting until the end of the loading process. These are typically fonts (particularly web fonts), CSS, JavaScript, and sometimes images.
Key requests are unique because your browser wouldn’t typically request these files until later in the loading process. So, there will be a delay when the browser gets to that point and discovers that it must request the files. By telling the browser to load these files first, it will have them handy when it needs to render them.
What are the benefits of preloading key requests?
The main benefit of preloading key requests is improving the perceived performance of your site. This means that a user’s browser can render your content more quickly, and visitors will feel like your site is faster. But, your site is really just preloading essential content to make it appear that way.
Furthermore, preloading requests is essential to your Core Web Vitals scores. These Google metrics measure your site’s loading performance, interactivity, and visual stability, giving you a score that signifies your website’s overall user-friendliness.
These are the three Core Web Vitals:
Largest Contentful Paint (LCP): How long it takes for the largest element on your page to load.
First Input Delay (FID): How long it takes for the browser to respond to user interaction with your content.
In particular, preloading key requests can have a significant impact on your LCP score. By preloading images, fonts, and other large files, you’ll be able to reduce the time it takes for them to render.
Additionally, preloading can affect your First Contentful Paint (FCP) score. This metric measures how long it takes for the first HTML element on your page to be displayed. If you can preload that element, the browser will be able to show the initial parts of your content more quickly.
What’s more, search engines, like Google, favor fast-loading and interactive content. Therefore, beyond providing a better user experience, improving these performance metrics can boost your website’s Search Engine Optimization (SEO).
Essentially, performance improvements can help push your site’s pages up in the rankings and get your content in front of more users. Plus, preloading key requests is relatively easy. Later on in this post, we’ll show you exactly how to do it!
Are there disadvantages of preloading key requests?
Preloading requests might sound like a great idea from a performance perspective. That being said, trying to preload too many elements can work against you.
A browser can only process so many requests at once. So, if you tell it to preload multiple elements, it could create a ‘bottleneck’ that works against your site’s page load time.
Therefore, it’s worth carefully choosing which elements should be preloaded for the greatest impact. In most cases, these will be web fonts, CSS, and JavaScript, since these tend to be the heaviest files.
How to check if your site is preloading key requests
A couple of different tools can identify whether your site is preloading requests and suggest elements that could benefit from this optimization technique. For example, PageSpeed Insights is one of the most popular options for identifying performance problems on your website.
To use this free tool, simply enter your site’s URL and click on Analyze. This will generate a detailed performance report.
Scroll down to see the performance opportunities, diagnostics, and passed audits. You should be able to find the Preload key requests suggestion in one of these sections.
If you prefer not to navigate back and forth between your site and PageSpeed Insights, consider installing the Google Lighthouse Chrome extension. It enables you to generate reports from within the browser and view a page’s performance metrics.
Similarly, GTMetrix can generate detailed performance reports for any site. It lets you analyze pages from multiple locations and track their performance over time.
Under GTMetrix’s Structure tab, you’ll be able to see whether preloading key requests could help your site’s performance.
How to preload key requests in WordPress
Before making any significant changes to your WordPress site, like adding custom code, it’s always worth making a complete backup. This safety precaution means you’ll have a functional version of your website on hand if you make any mistakes.
This is where Jetpack VaultPress Backup comes in handy. This user-friendly plugin automatically creates comprehensive backups of all your data, including its files, database tables, and WooCommerce product information. These backups are saved in real time and stored securely in the cloud. You can restore them in just a few clicks — even if you’re on the go or can’t access your site at all.
1. Fonts
Sometimes, fonts can get buried within other files on your website, including CSS and JavaScript files. Unfortunately, this can slow down the page rendering process.
To preload requests with fonts in WordPress, copy and paste this code into the <head> section of your page:
Remember to substitute “Font-Name†for the name of your font. Furthermore, including “crossorigin†is essential if your font comes from a third-party source because it tells the browser that it needs to load the file from an external server.
2. Google Fonts
Google Fonts includes an open-source library of nearly 1500 font families. If you’re looking for custom web fonts to use on your site, you can likely find one there.
Using Google Fonts can help bring a unique design to your site, but the browser must also download the font files when rendering the content. Depending on your font, this can increase your page load time.
When preloading Google Fonts, it’s also a good idea to ‘preconnect’ them first. This step tells the browser in advance that it will need to connect to a third-party site (e.g., Google Fonts) to retrieve a resource.
Additionally, after adding your preloading code, it’s worth including a link to its stylesheet. That way, if your user’s browser is unable to preload the font in question, it will still be able to render it.
Font Awesome is a great resource for custom icons and fonts, with both free and premium options within its library. You might use some of these icons to supercharge the design within your menus, headers, footers, and content areas.
Like Google Fonts, preloading Font Awesome icons can be a good idea for speeding up the perceived page load time. Just add this code to the <head> section of the page:
You’ll need to swap out the file path for the font or icon you’re using on your website. Then, save your changes!
4. CSS
Cascading Style Sheets (CSS) is a design language that works together with HTML to determine a web page’s style and presentation. With custom CSS, you can quickly change the appearance of different elements.
Each styled HTML page on your website will have a corresponding stylesheet with all of your CSS. A browser needs to load this file when rendering a web page, so it’s worth telling the browser that it should preload this resource.
Fortunately, there’s an easy way to preload CSS. Simply add this code to the <head> section of your page:
Make sure to substitute “styles.css†for the name of the stylesheet. Additionally, keep in mind that while this code will work in Google Chrome, it isn’t supported by all browsers.
5. JavaScript
JavaScript is another one of the common scripting languages used in WordPress. It lets you create dynamic content like animations, moving carousels of images, and automatically-updating feeds.
Rendering JavaScript is typically more complex because its files are comparatively heavy, requiring a longer process to display content. That’s why telling a browser to preload heavy JavaScript can be beneficial for speeding up page load time.
Like with CSS, you’ll just need to add this simple line of code to the <head> section of the page:
As before, substitute “ui.js†for the name of the JavaScript file, and save your changes.
Bonus: Install a free plugin to improve Core Web Vitals
Preloading requests is just one technique you can use to improve your WordPress site’s Core Web Vitals scores.
If you’re looking for a more comprehensive (and free!) solution, consider installing Jetpack Boost. This tool is developed by Automattic, the same company behind WordPress.com.
This user-friendly plugin scans your entire website and gives you a score on desktop and mobile devices. Furthermore, Jetpack Boost isn’t just useful for the three Core Web Vitals. Its optimization methods can improve other metrics, including Time to Interactive (TTI) and Total Blocking Time (TBT).
Alternatively, Jetpack Complete can take your WordPress site to an entirely new level. This plan contains multiple tools for performance, including access to Jetpack’s image Content Delivery Network (CDN), which can both save bandwidth and improve your page load time. Plus, you’ll get advanced WordPress security and growth tools.
Frequently asked questions about preloading key requests
At this point, you should have a good understanding of how to preload key requests in WordPress. Still, we’ll go over some frequently asked questions just to be sure!
Does preloading requests improve user experience?
Preloading requests can improve the user experience by decreasing your site’s perceived loading times. Since visitors won’t have to wait as long for your content to render, they’ll be less likely to feel frustrated and potentially leave your website for a different one.
Does preloading requests improve Core Web Vitals?
Preloading key requests in WordPress can improve your Core Web Vitals scores, particularly, when it comes to Largest Contentful Paint (LCP). In fact, when you decide on which elements to preload, it would be wise to include your ‘largest’ or ‘main’ content, as this is what would likely benefit most from it.
Preload key requests vs. preload critical assets
It’s worth noting that preloading key requests means the same as preloading critical assets. Both terms refer to telling a browser to load particular resources in advance to render a page’s content more quickly.
Preload vs. preconnect vs. prefetch
Preloading, preconnecting, and prefetching might seem like similar concepts, but they actually mean slightly different things. They are all tags that instruct a browser in which order to load content, but they serve distinct functions.
First, preloading involves loading content needed to render the page within a user’s browser. It’s a high-priority tag that will get a resource ready within a few seconds.
By contrast, prefetching concerns the subsequent elements that might need to be loaded. The browser will look for resources in advance and store them in its cache. It’s a very low-priority tag, so you shouldn’t use it for urgent resources.
Finally, preconnecting is used when you want to tell a browser to connect to a particular domain. If your site uses a resource from a specific third-party site (like Google Fonts), preconnecting tells the browser that it will need to connect to that domain at some point in the loading process.
What else can I do to improve my site’s performance?
Various tasks can help improve your WordPress site’s performance, including:
Using a CDN to serve your content to visitors worldwide
It’s also worth choosing a high-quality WordPress host that will provide you with performance-optimization features like dedicated caching, an uptime guarantee, and a vast network of data centers worldwide.
Improve your WordPress site’s performance by preloading key requests
Page load times can significantly impact your website’s user experience and search engine rankings. So, you’ll want to do everything in your power to speed up the time it takes for a browser to display your site’s content.
When you preload key requests within your pages, a visitor’s browser will have resources (like fonts, CSS, and JavaScript) at the ready. Then, there won’t be a delay while loading your content and making it accessible to users.
Preloading key requests is just one step toward improving your site’s performance. Using Jetpack Boost, you can easily configure your website to lazy load images, defer non-essential JavaScript, and more. Better yet, the plugin is free to use. Check out Jetpack Boost today!
The domain name system (DNS) is one of the cornerstones of the web. Without DNS lookups, it would be impossible to know which domain corresponds to which IP address (the location where a website’s files are hosted). As it is, these lookups can happen in milliseconds, allowing you to jump from website to website almost as quickly as you can click on a link.
Reducing the number of DNS lookups can help keep your website loading times in check. It’s a simple process you can undertake in a number of ways, but it can have a significant positive impact on the user experience.
Below, we’ll go over the basics of DNS lookups, how they work, and how to measure response times. Then, we’ll discuss how to reduce DNS lookups in WordPress.
What is a DNS lookup?
The DNS is a distributed system that maintains records of which domains correspond to which IP addresses. This is essential to the modern web because it enables you to visit sites without needing to remember complex strings of numbers (google.com sounds a lot better than 64.233.160.0!).
A DNS lookup refers to the process of translating a domain name into an IP address. When you enter a URL in your browser or click on a link, a DNS lookup occurs in the background. The browser sends a request to a DNS ‘resolver,’ typically hosted by your Internet Service Provider (ISP). The resolver then looks in its local cache to see if it has the corresponding record, and if it doesn’t, it contacts a DNS server.
All of that process should happen rather quickly. If a website takes only a second or two to load, that means the DNS lookup occurs in just a fraction of that time. But, in some cases, DNS lookups can take an excessive amount of time. If that happens, you’ll want to optimize the process to avoid long loading times for your site.
What is a good DNS response time?
A good DNS response time is typically under 100 milliseconds (ms). But, response times can vary depending on a variety of factors, including:
The location of the DNS server. The further away the DNS server is, the longer it takes for the query to reach it. The same is true for the time it takes to return the information you’re requesting.
If the server is under heavy load. A DNS server can take longer to respond to requests if it’s getting a lot of them simultaneously, just as with a normal site-hosting server. This is not a problem you can fix by optimizing your website but by changing DNS providers.
How complex the DNS query is. Not all DNS queries are the same in terms of complexity. If a URL has multiple subdomains or multiple IP addresses associated with it, a DNS lookup can take longer.
In general, faster DNS response times can result in faster website loading times, as the DNS lookup is the first step in connecting to a website. To put it another way, slow DNS response times can lead to a poor user experience.
How to measure your DNS lookup time on WordPress
There are a lot of ways to measure DNS lookup times for any website, including those built with WordPress. Generally, the easiest way to measure these times is with a third-party tool, which typically works similarly to page-speed-measurement software. Some popular options include:
DNS Speed Benchmark. This is a free tool that allows you to test DNS lookup times from multiple locations around the world. Simply enter the domain name you want to test, and the tool will show you DNS lookup times in milliseconds for multiple locations.
Dot-Com-Tools.This DNS checker enables you to run tests using servers from around the globe. It’s a helpful option because it provides you with an average DNS lookup time.
Browser Developer Tools. Most modern web browsers have developer tools that allow you to analyze network performance, including DNS lookup times. Accessing developer tools in Chrome, for example, is simple. Just right-click on a webpage and select Inspect or press F12 on your keyboard. Then, navigate to the Network tab and reload the page to get results.
It’s important to reiterate that DNS lookup times can vary a lot depending on where the original query comes from. You might get amazing lookup times from your computer if your web hosting server is close to you. But that might not be the same experience for users in other locations.
That type of variation will always exist. Still, if you’re seeing big differences in DNS lookup times after testing them using the tools above, that isn’t normal. Ideally, DNS lookup times shouldn’t vary too much, and if they do, you can optimize them to reduce loading times.
How to reduce DNS lookup time on WordPress
There are many ways to reduce DNS lookup times on WordPress. A lot of these methods will also improve overall site performance. So, if your website is loading slowly, you might want to implement as many of these strategies as possible.
1. Install a reliable CDN plugin
Using a quality Content Delivery Network (CDN) can help you improve DNS lookup times thanks to DNS prefetching. This is a feature that prioritizes DNS lookups and then caches that information. Since the server only needs to check the cache for the IP address, the process is much faster than running a regular DNS lookup, at least for the end user.
CDNs typically have many servers located in different regions around the world. Each of these servers maintains a cache of frequently accessed domain names and their corresponding IP addresses.
By reducing the time it takes to perform DNS lookups, CDNs can improve website performance and the user experience. This way, visitors can access web pages more quickly, and you can reduce the load on your servers.
Overall, there are many reasons to use a CDN beyond reducing DNS lookup times. So, the decision isn’t so much whether to get one, as it is about deciding what the best option is for your website.
If you’re using WordPress, Jetpack offers an easy way to implement a CDN on your website. In fact, the CDN is available with the free plugin. You can enable it from Jetpack’s Performance & speed settings by selecting the option that says Enable site accelerator.
There are plenty of other CDN options available for WordPress, but they can be a bit more complicated to install and activate.
2. Defer loading of JavaScript
Typically, a web page needs to load all JavaScript before it renders fully. Since JavaScript files can be quite large, this can significantly impact loading times. So, if you’re trying to reduce DNS lookups and improve site speed, you can also defer the loading of JavaScript. Or for that matter, any element that can delay the website from rendering.
But before we explore this option, it’s important to understand the difference between local and external JavaScript files. Essentially, deferring the loading of JavaScript files on your server won’t impact DNS lookup times.
That’s because with these local files, the DNS lookup happens before a page starts to load at all. On the other hand, any external JavaScript files you call from your site involve their own DNS lookups.
Therefore, the ideal solution here is to defer JavaScript altogether, so that even third-party files won’t impact the user experience with additional DNS lookups.
There are several ways to defer the loading of JavaScript. Jetpack Boost is an excellent option, since it enables you to defer all non-essential files by toggling one setting.
If you have Jetpack Boost installed, go to Jetpack → Boost and look for the option that says Defer Non-Essential JavaScript. Simply enable that option, and you should see an immediate improvement in your site’s performance score at the top of the screen.
Keep in mind that deferring JavaScript manually involves editing your site code to add the defer attribute to script tags. Therefore, if you’re not comfortable dealing with code, a plugin might be the easiest option for you.
3. Enable DNS prefetching
DNS prefetching enables a server or browser to perform a DNS lookup in advance and to store or cache that information. That way, when a visitor tries to access the website, the information is available faster. This is because the lookup occurs locally instead of having to go through the full traditional route.
Most modern web browsers use DNS prefetching to some degree, but this doesn’t occur with all websites. For your website, you’ll need either the DNS resolver or a CDN to prefetch DNS lookup results.
Since you can’t ask a DNS resolver to prefetch results only for your site. Your best bet is to focus on the CDN side of things. Using a CDN, like the one available with Jetpack, will let you enable DNS prefetching for your site.
As we mentioned, the CDN is available with the free plugin, and you can enable it from Jetpack’s Performance & speed settings by toggling the option that says Enable site accelerator.
There are some other plugins that offer DNS prefetching. Still, it’s likely better to use a tool that can do more than just that. A CDN solution is an excellent choice, since it will also help improve your website’s performance in general (due to the reduced load on your servers).
4. Consider using a faster DNS provider
Using a different DNS provider can also help you reduce DNS lookup times. Some DNS providers may have faster and more reliable servers, better network connectivity, or more advanced caching techniques. All of this can lead to quicker DNS resolution times.
Your first step is to use a tool like DNSPerf, which shows you a list of the fastest and most reliable DNS providers. Once you decide on a new tool, you’ll need to create an account on their platform. The specific transfer process will depend on the DNS provider you’re currently using, as well as the one that you’re switching to.
Bluehost, for example, outlines the process of moving a domain to their platform in three steps:
Prepare your domain. Disable any privacy settings, confirm contact information, obtain an authorization code, etc.
Initiate the transfer. This requires a relatively straightforward process within your Bluehost dashboard.
Check the progress from within your dashboard.
The process, in its entirety, usually takes a few days. It’s important that you also update any applicable nameservers and DNS settings with the new provider to ensure that your website and any additional services — like email accounts — work properly.
5. Minimize the number of CNAME records
CNAME (Canonical Name) records are DNS records used to map one domain name to another. These records can help you create aliases for existing domain names, like subdomains or alternative domain names for a website.
When you try to access a web page like blog.example.com, the browser needs to perform a DNS lookup to resolve the domain name. If there’s a CNAME record involved, the browser needs to follow that chain until it hits an A name record.
Those are the types of records that map actual domains to their final IP addresses. The more CNAME records you create for your website, the longer the lookup chain becomes, which means it takes longer to resolve the DNS.
To minimize the number of CNAME records, you can rely as much as possible on A records instead. Here are some guidelines to help you achieve that:
Use A records for root domains. When configuring your domain, use A records to map the root domain to the IP address of your website’s server rather than using a CNAME record.
Use CNAME records for subdomains. Use CNAME records for subdomains that point to other domain names, like a CDN or third-party service. This can simplify DNS management since those third-party services may change IP addresses.
Avoid chaining CNAME records. If you need to use a CNAME record, that’s fine. But, you should avoid CNAME record chains since they only add to DNS lookup times.
Use TTL wisely. Set the Time-to-Live (TTL) value of your DNS records appropriately. A longer TTL can reduce the number of DNS lookups required, but it can also increase the time it takes to update DNS records.
Changing all of these settings involves accessing your domain registrar or web host. The service you used to register your domain should provide you with options to change its corresponding records. If you’re not sure how to do this, you can contact the registrar or the web host for help.
6. Reduce the number of external hostnames
A hostname is a unique identifier that is assigned to a device or a service on a network. Hostnames are used to identify and locate network resources, like websites, servers, and devices, using the domain name system (DNS).
On your website, there are two types of hostnames, internal and external. Internal hostnames include links that point to other pages on your site. External hostnames refer to links that point to pages and resources outside of your website.
Every time a visitor clicks on an external link, that involves a DNS lookup. This shouldn’t be much of a concern to you, since you have no control over how long DNS lookups take for other sites. What you should care about are hostnames pointing to external files your site needs to load.
These files can be scripts, fonts, tracking pixels, and other resources your site relies on for critical features. Whenever possible, your goal is to host these files locally to reduce DNS lookups on your site.
Earlier in this article, we talked about deferring non-critical JavaScript until pages on your site render. That technique, in combination with reducing hostnames by hosting files locally, should have a significant impact on reducing DNS lookups and loading times.
7. Host third-party resources locally
Most modern websites rely heavily on third-party resources. That includes scripts, fonts, embedded videos, tracking pixels, and more.
All of these tools are useful, but they come with a trade-off: Every third-party resource you add to your website means one or more additional DNS lookups that users have to deal with.
The solution to this problem is not to do away with third-party resources. What you want to do is host them locally whenever possible. This is perfectly workable when it comes to scripts and files like fonts, since they usually occupy very little space.
On the other hand, videos and tracking pixels are larger and more complicated. Tracking pixels, by their nature, need to connect with third-party platforms like Meta. But, you can reduce the impact of this third-party connection by loading them all at once using tools like Google Tag Manager. You can even opt to defer the tags until the page is loaded.
Moreover, when it comes to more top-heavy resources like videos, hosting them locally can have a significant impact on your server’s resources and performance. Having several users loading videos from your site can slow it down much more than a few DNS lookups.
To find out what third-party resources your website relies on, you can use a tool like PageSpeed Insights. When you run an analysis with PageSpeed Insights, it’ll return a list of suggestions on things you can do to improve your website’s performance. Here, you’ll find an entry that reads Reduce the impact of third-party code.
That list will show you which third-party scripts are slowing down your site. Each of those scripts involves DNS lookups, so you’ll need to determine which ones you can host locally and which ones are worth keeping as external.
8. Deactivate plugins that perform DNS lookups
Some WordPress plugins (e.g. tools that use tracking scripts, like live chat and analytics plugins) may perform DNS lookups depending on their functionality and how they’re coded. The plugins that do this typically require the use of external resources — like images, scripts, or other assets — which point to different hostnames.
To load these resources, the plugin may need to perform a DNS lookup to resolve the domain name into an IP address. Similarly, some WordPress plugins may interact with external services, like social media platforms or analytics tools, which could require DNS lookups to establish connections and retrieve data.
If a plugin performs DNS lookups, it can have an impact on your site’s performance. You can minimize this impact by using DNS caching techniques as well as opting to use plugins that don’t rely heavily on third-party resources.
The problem with this is that it can be hard to determine which plugins perform DNS lookups. This involves either analyzing the plugin’s code or monitoring the network activity of the website while the plugin is active. Tools like browser developer consoles, network analysis tools, or server logs can be used to track the DNS queries and network connections made by the plugin.
Another alternative is to use a staging site to conduct a test. You could deactivate plugins one by one and see if it makes an impact on your site’s DNS lookup times. You can find instructions on how to do this in a previous section on measuring DNS lookup times.
Frequently asked questions about reducing DNS lookups
At this point, you likely have a good understanding of DNS lookups and their impact on site speed. But, just in case you have any lingering doubts, we’re now going to answer some of your most frequently asked questions about how to reduce DNS lookups in WordPress!
Why is it important to reduce DNS lookups?
The more DNS lookups a browser has to perform to visit a website, the longer it will take to load. Long loading times can have a negative impact on the user experience.
In turn, this can make your website less effective, hurting things like sales and conversions. Therefore, reducing DNS lookups is key if you want your website to perform well.
Do DNS lookups impact user experience?
The short answer is yes. DNS lookups can impact the user experience if they take too long or a browser has to perform too many lookups to access any given page on your website.
As the number of DNS lookups increases, so does the time it takes to load a page. Users can be notoriously impatient when it comes to loading times, so it’s in your interest to reduce them as much as possible.
Do DNS lookups impact Core Web Vitals?
Google takes a lot of factors into consideration when measuring Core Web Vitals. Significant DNS lookup times can contribute to worse scores when it comes to First Input Delay (FID) and Largest Contentful Paint (LCP).
That impact is due to the fact that pages may not start or finish loading before the browser completes every associated DNS lookup. Therefore, by reducing the number of lookups, you can likely improve Core Web Vitals scores for your website. You can easily optimize your site’s Core Web Vitals using a plugin like Jetpack Boost.
What else can I do to improve my site’s performance?
Reduce DNS lookups to improve your website’s performance
DNS lookups are a core aspect of the web. Without lookups and the DNS system, we would have to memorize lengthy IP addresses instead of user-friendly domain names. But too many DNS lookups on a single website can negatively impact your website performance and user experience.
There are a lot of ways to reduce DNS lookups and speed up a WordPress website. Some of the best methods at your disposal include using a CDN and deferring the loading of JavaScript. Additionally, you can change DNS providers or make an effort to minimize your CNAME records and external hostnames.
Do you want to reduce load times, improve Core Web Vitals scores, and improve the overall performance of your WordPress site? Jetpack Boost can help in just a few minutes. Built by the people behind WordPress.com, this is the go-to WordPress speed plugin for serious WordPress pros.
If you’re a website owner, you’ve likely thought about site speed at least once in the past. After all, Google considers speed when determining where to place sites in search results. So, if your site is slow to load, you’re at a disadvantage when it comes to ranking. And we all know that higher rankings lead to more traffic.
So, how do you make sure your WordPress site is loading as quickly as possible? One way is to lazy load your images.
Lazy loading is a technique that delays the rendering of images and videos until they’re needed. Implementing this can speed up your site considerably, and the great news is that you don’t need to be a developer to put this to work.
Today, we’ll show you how to lazy load images and videos in WordPress using two methods: with a plugin and without.
What is lazy loading?
Lazy loading is a common technique used to improve page speed. The idea is simple: instead of loading all images on a page when a visitor first arrives, it only renders the images that are visible. Then, as the visitor scrolls down the page, more images are loaded as needed.
This means that if a visitor never scrolls down to the bottom of a page, images below the area of the page viewed are never loaded. Thus, lazy loading can save precious milliseconds (or even seconds) off your page load time.
Additionally, lazy loading can also help you conserve bandwidth. This is especially important if you have people who visit your site on a mobile device. By deferring the loading of images and videos that are not visible, you can decrease the amount of data used.
How does lazy loading work?
In general, lazy loading works in one of two ways. WordPress, starting with version 5.5, adds an HTML5 attribute called “loading.†In this case, the browser handles all parts of the lazy loading process without the need for any extra JavaScript.
Another method, developed before HTML5’s attribute, is through some creative JavaScript. In this case, an empty placeholder is served upon page load, then JavaScript is used to load images as they come into the viewport.
Either way, only the images that are needed by the browser are loaded. Other images are loaded once a visitor scrolls down the page.
There are a few different ways to do this, which we’ll discuss in more detail below. But that’s the gist of how lazy loading works.
What are the benefits of lazy loading?
There are three primary benefits to lazy loading images:
Increased site speed
Reduced bandwidth usage
Better user experience
Increased site speed is usually the primary motivation for implementing lazy loading. By waiting to render unnecessary images, you can decrease your page load time. This is especially true if you have a lot of images on a page, or if your images are large.
Next, lazy loading can help you conserve bandwidth. If visitors never venture down the page, there’s no wasted bandwidth loading images that they’ll never see.
Finally, lazy loading can improve your user experience. This is because visitors don’t have to wait for all the images on a page to load before they can start engaging with your site.
Does WordPress lazy load by default?
Yes, as of WordPress 5.5, lazy loading is enabled by default automatically upon installation. However, there are some ways to customize the experience that are pretty straightforward and intuitive. We’ll discuss these methods in more detail below.
Should I lazy load my images? Are there drawbacks?
In most cases, lazy loading your images is a great idea if you want to improve your page speed or conserve bandwidth. However, there are some potential drawbacks to consider as well.
Layout shifting
If you lazy load your images, the layout of your page may shift. For example, if you have a sidebar on the right side of your page, and you lazy load an image that’s located within it, the sidebar may move down to make room. This can be very disorienting for your visitors.
As a general rule, using placeholders is recommended to avoid this issue.
Potential hit to SEO
If you don’t do it properly, lazy loading images can cause search engines, like Google, to have trouble indexing them. Content is king when it comes to rankings, and in this case, you could lose valuable chunks.
Your images may no longer appear in search results and, depending on how important the images are in relation to the rest of the page content (like product images for an ecommerce listing), it could tank your regular search rankings as well.
That said, if you set up lazy loading properly, this won’t be an issue. That’s why, unless you’re a confident developer, your best course of action is to use a lazy loading plugin or stick with the default lazy loading included with WordPress.
Plugin conflicts
Additionally, lazy loading can cause issues with some WordPress plugins — like plugins that use images to generate social media previews.
Any time you make changes to your site, you should test them thoroughly to make sure everything is acting as it should.
Lazy loading is now enabled by default in WordPress. If you’re not using a modern WordPress iteration (though we recommend you do), or if you want more granular control over the lazy loading process, you can do so using one of two distinct methods: using a plugin or adding code to your site.
1. Lazy load with a plugin
If you’re not an experienced developer, we recommend using a plugin because any time you edit the code of your site, you risk running into issues. Even if you have backups on hand in case you break something, it still may be best to simply use a reputable plugin.
Jetpack Boost is a free plugin dedicated to helping you gauge and improve site performance. It offers functionality like:
Deferring non-essential JavaScript
Optimizing CSS loading
Lazy image loading
Site performance testing
To get started with Jetpack Boost, download it for free from the WordPress plugin directory.
Or, in your WordPress dashboard, go to Plugins → Add New, then search for “Jetpack Boost†and click Install Now. Once installed, click Activate.
Next, go to the new dashboard menu option titled Boost. Then, click Start for free.
On the next page, scroll down to the large toggle that says Lazy Image Loading and turn it on. Now, take a look at your site and make sure that everything’s rendering properly and looks good. That’s it! Lazy loading is good to go with just a few clicks.
If you want to take things one step further and customize your site’s lazy loading, you can do so using code snippets, which you can add to your functions.php file. Or, you can insert them with a functionality plugin.
Here are just a few tasks you can accomplish:
Disable lazy loading on certain pages
Set a placeholder that displays until the image is loaded
Turn off lazy loading for specific images
Turn off lazy loading for a specific CSS class
For example, if you want to exclude a CSS class from the lazy loading process, you would use this code:
2. How to lazy load images in WordPress without a plugin
As we mentioned earlier, WordPress, by default, enables lazy loading for all images that have set dimensions. You don’t need to turn anything on or add any code to do this. However, there may be times that you want to customize how this functionality works.
For example, let’s say that you don’t want template images to be included. You would add this code to your functions.php file:
Or, perhaps you want to get super granular and turn off lazy loading for specific images. You can do this by assigning an extra image class to each image when added to a page or post and then adding that class to the following code in your functions.php file:
To add the image class skip-lazy in the above example to an image:
Add the image to the page or post via the Media Library.
After you’ve added the image, find your image settings. This may appear differently depending on whether you are using the Gutenberg Blocks editor, classic editor, or a site builder plugin. The ability to add a new CSS class is usually found in either the Advanced settings area (Gutenberg and classic editors) or towards the bottom of your image settings options (most other site builders).
Add the class skip-lazy to the image and save your update.
Frequently asked questions about lazy loading in WordPress
Want to learn more about WordPress lazy loading? We’ve answered some frequently asked questions below:
Is lazy loading and deferring offscreen images the same thing?
Deferring offscreen images means waiting to load images until the rest of the critical, above-the-fold content has loaded. There are several ways to do this, but WordPress sites typically use lazy loading.
Essentially, lazy loading is a method of deferring offscreen images.
Can I lazy load background images in WordPress?
Yes, you can lazy load background images if you’d like. Jetpack Boost turns on lazy loading for background images. However, depending on how your images are set up, it may not be able to identify all of them. For example, if the image is loaded through the background:url property, the plugin won’t read it as a picture and, therefore, won’t enable lazy loading for it.
In that situation, you can use a tool like Lazy Loader, which will allow you to select the specific background images you want to lazy load.
Can I lazy load a YouTube video?
Yes, you can! To do so, insert the following code snippet from WPOrbit into your theme’s functions.php file. If you’re not sure how to do this, check out our guide to accessing and editing the functions.php file.
<?php
// Do not include the above opening tag.
// WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net
function iframelazy($content) {
if(is_single()) {
$content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content);
ob_start();
?>
<script>
var ytflag = 0;
var myListener = function () {
document.removeEventListener('mousemove', myListener, false);
lazyloadmyframes();
};
document.addEventListener('mousemove', myListener, false);
window.addEventListener('scroll', function() {
if(ytflag == 0){
lazyloadmyframes();
ytflag = 1;
}
});
function lazyloadmyframes(){
var ytv = document.getElementsByClassName("klazyiframe");
for (var i = 0; i < ytv.length; i++) {
ytv[i].src = ytv[i].getAttribute('data-src');
}
}
</script>
<?php
$jqueryappend = ob_get_contents();
ob_end_clean();
}
return $content.$jqueryappend;
}
add_filter('the_content', 'iframelazy');
Does lazy loading impact SEO?
Yes, lazy loading can have a positive impact on your search engine rankings. Google considers site speed when deciding where pages rank in search results. And since lazy loading improves performance, it can also increase Google’s perception of your site.
If you do it manually, instead of using a lazy loading plugin, and make a mistake, it can have a negative impact on SEO by hindering search engines’ abilities to recognize your images.
Does lazy loading impact user experience?
Yes, lazy loading can improve your user experience because it reduces your site’s load time, while still ensuring that visitors can view your content right away. This, in turn, can improve their perception of your brand.
Do I need a plugin to lazy load my content?
No, you don’t need a plugin to lazy load your content. Lazy loading is enabled in WordPress by default. However, if you want more control over the lazy loading process, you may want to use a plugin.
Is there a downside to lazy loading content?
There aren’t many downsides to lazy loading content. It improves your speed, user experience, and search engine rankings. However, it can occasionally cause odd shifting in your page layouts. Therefore, you should always test your site after enabling lazy loading.
Do I need to lazy load all my content?
No, you don’t need to lazy load all your content. You can choose to lazy load only specific elements, such as images, videos, or iFrames.
What else can I do to improve loading speeds?
In addition to lazy loading, there are a number of other ways you can improve the speed of your WordPress site, including:
Lazy loading your images is a great way to optimize your site’s performance and improve your overall user experience. Jetpack Boost offers the most convenient and robust way to enable lazy loading, while also providing other powerful speed tools. Ready to get started? Get Jetpack Boost!
If you currently run a WordPress website or are considering building one, you’ve probably heard of the block editor. This powerful tool is built into WordPress core, giving website owners and developers the ability to build their entire site from the ground up without needing to use code.
But there’s a lot more to uncover about the block editor! Let’s take a look at what it is, the pros and cons, and how to use it.
What is the block editor?
The block editor is a revolutionary website editor that was released as part of WordPress Version 5.0, replacing the Classic Editor. It enables beginners and advanced users alike to build pages, templates, and entire websites by dragging and dropping elements into place — no code required!
Each element is called a block, and can be anything from paragraphs or images to columns, pricing tables, social media feeds, and more. To design a page, post, or other website section, a user simply has to drag and drop blocks into place, then style each one using a straightforward settings panel.
It’s more than just a standard page editor. Website owners and developers can use blocks to customize headers, footers, sidebars, archive pages, checkout and cart pages, and more. It truly makes website design accessible to everyone.
Before we dive in, let’s define a few terms:
Blocks. Individual elements that can be added to content. E.g. images, paragraphs, headings, videos, columns, and more.
Block patterns. Groups of pre-selected blocks that you can use to build entire sections of content. E.g. banners, post designs, column layouts, and more.
Templates. Essentially, frameworks that define the design and layout of specific types of content. Posts, products, and category pages are all examples of content that have their own templates.
Template parts. A part of your site that appears on most or all of your pages. E.g. headers, footers, and comments.
Site Editor. A WordPress tool that brings block functionality to additional areas of your site, including templates and template parts. You must have a block theme installed to use the Site Editor.
Pros and cons of the block editor
Like with everything, the block editor has advantages and disadvantages. Let’s take a look.
Pros of the block editor
1. It helps you be faster and more efficient
The block editor is incredibly powerful, and has lots of built-in features specifically designed to improve your workflow. Here are some features of the block editor that make designing, publishing, and editing much faster:
Reusable blocks. You can save a block and use it over and over on your website. Then, when you edit that block, it will update across all instances. For example, you might create a call to action that you can insert on all of your landing pages as you build them. And if you need to change the button link, it will be updated across all pages.
Block patterns. Block patterns are predefined groups of blocks that are available by default in WordPress or through third-party plugins. They allow you to quickly insert entire sections of pages at once, like headers and multi-column layouts. You can just add these into a page, customize the colors, and you’re good to go!
Keyboard shortcuts. These allow you to keep your hands on the keyboard the entire time you’re adding and editing content on your site. Navigate through different blocks, save changes, insert blocks, style text, and more.
Easy blog post creation. You can drag and drop content directly into the block editor, and it will automatically convert it to appropriate blocks. This can save you a tremendous amount of time! For example, if you write a post in Google Docs, you can paste it into WordPress in its entirety, and it will keep headers, images, links, and more. There’s no need to individually add graphics and other elements!
Set styles globally. Set colors, fonts, spacing, and other design specifications that apply to blocks throughout your site (if using a block theme). This keeps you from having to individually edit each page and makes things easier on team members or clients who add content to your site.
2. It enables beginners to create complex, beautiful sites without writing code
The block-based interface of the block editor makes it accessible for any type of user, including complete beginners. Like with anything, there’s a small learning curve, but you can take advantage of helpful WordPress documentation and tutorials to get the hang of things.
Then you can use the block editor to drag elements into place, making design choices like color and spacing with a simple settings panel. There’s no need to edit code or even use shortcodes that can quickly get complicated.
And you can take things even further, applying that same concept to your header, footer, sidebar, and page templates. This means that even beginners can fully customize all aspects of their site — checkout pages, search pages, archive pages, and more.
Block patterns are another great feature for beginners. These are set groups of blocks that you can quickly add to build entire sections of a page, like pricing tables, hero sections, and image galleries.
3. It allows for true full-site customization
Unlike many other solutions, the WordPress block editor truly lets you customize every aspect of your site using its features. Go beyond page and post designs! Here are just a few site elements that you can build with blocks:
Headers
Footers
Search results pages
Archives (like post and product categories)
404 pages
Blog post templates
Product templates
Comment sections
This is a huge opportunity to build a website that truly stands out with design and functionality that meets your specific needs. For example, you could modify the product template to include a video of your product in action, a size chart, or an allergen notice that appears across all items in your store. Or you could add a call to action that is automatically added to the bottom of all of your blog posts. The possibilities are endless!
4. It improves website performance
Using the block editor can improve the speed and performance of your site as well. Not only does it enable you to skip heavy page builders, it also reduces the number of plugins you need to install to access certain functionality. For instance, instead of installing a plugin for image galleries, you can simply insert a Gallery block into your page and style it however you see fit.
Plus, the code output from the block editor is lighter and cleaner than that of page builder plugins. That means that when the same page design is made with the block editor instead of a page builder, the page should load faster by default.
5. There are lots of integrations with third-party plugins
Because the block editor is included with WordPress by default, it works with popular themes and plugins. This also means that third-party developers typically adapt their solutions to work with the block editor.
There are lots of great plugins that add blocks and block patterns to your library. For example, Jetpack includes blocks for forms, payments, social media feeds, email captures, and more.
WooCommerce adds blocks for displaying products, reviews, filters, and just about anything you could need to create an effective ecommerce store.
6. It’s constantly improving
The best is yet to come! There’s a team of developers and volunteers who constantly work to release new features and improvements, also ensuring that WordPress is secure and accessible.
Of course, the block editor may not be the right solution for every single website. Here are a few downsides:
1. You may need to switch themes or rebuild portions of your existing site
Many page builders and themes support the block editor and make it simple for you to switch to the block editor. However, that’s not always the case. It’s possible that you’ll need to rebuild portions of your site to move to a fully block-based system.
If you want to take advantage of the Site Editor, you’ll also need to use a block theme. That means that, if you’re not using a block theme currently, you’ll need to switch to a new theme. Depending on your situation, this can require quite a bit of work. However, in the majority of cases, it’s well worth it!
2. There may be a learning curve
Any new technology comes with a bit of a learning curve, no matter your experience level. So if you intend to build a new site with the block editor or convert your existing site to blocks, you’ll want to schedule time to learn the system.
Thankfully, there are lots of great resources available to help, including:
Learn WordPress: Chock full of tutorials and courses that walk you through all the details of the block editor
WordPress playground: A free, blank site where you can play around with the block editor and get the hang of things before making major changes to your live site
How to access and use the block editor
Now that you understand a little more about the block editor, it’s time to jump in and learn how to use it.
The block editor interface
Let’s start by introducing the components of the block editor. This is what you’ll see when you build a page, post, or other site element. We’ve identified some major components in the following image, which we’ll discuss shortly:
Here’s a breakdown of these elements:
Block Inserter: This is where you’ll select and add blocks. You can see a list of available blocks and patterns, organized by block type, and drag them directly from this panel. Open and close the Block Inserter using the button at the top left.
Blocks: This tab shows all available blocks.
Patterns: This tab shows all available block patterns.
Block search bar: Use this to search for a specific block or pattern.
Tools: This button provides different interactions for selecting, navigating, and editing blocks.
Undo/Redo: Undo an action taken in the block editor, or redo that same action.
Details: This provides information about the page or post, like number of words and characters, time to read, and number of paragraphs, headings, and blocks.
List View: A tool that helps you navigate blocks and content. View all the blocks on the page, move them around, and switch back and forth quickly and easily.
Settings panel: Access settings for the page/post or each individual block. This is where you’ll make changes to design elements like spacing, colors, and more.
Additional options: Change your view type, switch to the code editor to edit in HTML, and customize other aspects of your block editor experience.
Add new block: Click this icon to add a new block based on the icon’s location on the page.
Using blocks
Now that you know a bit about where important elements lie in the block editor, we’ll show you how to add and edit blocks. In this tutorial, we’ll be creating a blog post. The concepts will be similar whether you’re working on a post, page, or other elements of your site.
In this case, you’ll go to Posts → Add New in your WordPress dashboard. This will automatically open up the block editor for a new post. Start by adding a title at the top of the post.
Then, click the blue + icon in the top-left corner to open the Block Inserter. Here, you’ll see a list of available blocks. These are categorized by type, but you can also use the search bar to look for a specific one. If you hover over a block, it will provide more information and show a preview of what that block will look like in action.
Let’s start by adding a Paragraph block. You can either find it in the Block Inserter and drag it into the main content area on the right or just start typing where it says, “Type / to choose a block.â€
When you place your cursor inside your text, a new menu will appear above it with styling options. From left to right, these are:
Paragraph: Click on this to convert the block into a different block type. For example, you could transform it into a heading.
Drag: Move the block wherever you’d like in relation to the other blocks on the page.
Move up/down: Move the block up or down one space on the page.
Align: Left, center, or right align the text.
Bold: Bold any text you select within the paragraph.
Italic: Italicize any text you select within the paragraph.
Link: Turn any text you select into a link.
More: See additional options to highlight or strike-through text, turn a number into subscript, and more.
Options: Access additional capabilities, like making the block reusable, duplicating it, locking it, and more.
Make whatever adjustments you’d like to the text within the paragraph. Then, select anywhere within the block and click on the icon at the top right. This will open the Settings panel.
You’ll see tabs for both Post and Block at the top of this panel. For now, let’s focus on the Block tab. This panel shows options that are specific to the block you’ve selected — in this case, the Paragraph block.
In the Color section, you can set a color for your text, background, and links, just for that paragraph. You can even create your own gradient if you’d like. For example, you might make a paragraph stand out from the rest of the post by using a deep green background and white text.
In the Typography section, you can set font options. While size appears by default, you can click the three vertical dots to unlock more choices, like font family and letter spacing. In this example, we decided to change the text to a serif font and add more space between the lines of text (called line height).
Under Dimensions, you can adjust the padding and margins around the text, adding or reducing the space as needed.
And under Advanced, you can add an HTML anchor, so you can link to the section at another point in the post, or set a CSS class for styling purposes.
Now that our paragraph block looks how we’d like, let’s add two columns to our post — one with an image and another with a second paragraph. Add a Columns block to your page, then select the column layout that you’d like. We’ll go with 33/66 this time, which is a ⅓, ⅔ split.
You’ll see that you can select each column individually to style it and add blocks.
To the left column, click the + icon and select an Image block.
Here, you can upload an image from your device, select an existing one from the Media Library, or insert one from a URL. We decided to add a picture of a black forest cake from the Media Library. When you click on the Image block, you’ll see a new Settings bar appear, just like with the Paragraph block, but with slightly different options. For example, you’ll get choices to crop the image, add text on top of it, apply a filter, and more.
If you click the icon at the top right, you’ll see the settings panel for the Image block. There, you can add alt text, create rounded corners, change the image size, add a border, and more. Here, we’ve rounded the image corners with a radius of 22 px.
We then added another Paragraph block to the right, ⅔ column. Notice that you can select either each individual column to edit or the entire two-column block. When both columns are selected, they’ll be outlined in blue.
This enables you to make decisions for both columns at once using the toolbar that appears. Here, we set the vertical alignment to “Align middle†so the text and image are lined up.
And that’s it! You can keep building out the post as much as you’d like, choosing from a wide array of available blocks. Each one will come with its own settings and options — feel free to play around with these until you get the exact look you’re going for.
Before you publish the post, you probably want to preview it to see how it looks on the front-end of your site. Click the Preview button at the top right, followed by Preview in a new tab. This will give you an even more accurate idea of how the post looks when you publish it.
If you’re ready, you can now click Publish to make the post live!
Using block patterns
As a reminder, patterns are pre-built page segments that make building a post or page quick and easy. Let’s go back to the post we built in the previous section and explore how to add a pattern.
You’re going to click the blue + icon at the top left again to open the Block Inserter. But this time, click on the Patterns tab. By default, this will open a list of featured patterns.
You can use the dropdown that is currently set to Featured, and choose other pattern categories, like Buttons, Columns, and WooCommerce. Or you can use the Search bar at the top to look for a specific pattern.
In this case, let’s select Gallery and drag the pattern titled Offset images with descriptions into our post. This will add a neat image feature to the content.
You’ll see that the pattern is composed of several blocks: two Image blocks, two Paragraph blocks, and a Spacer block. Just as we did earlier, you can edit each block individually or edit the pattern as a whole. You can either edit all the pattern details to truly make it your own, or you can just switch out the images and text with your own content.
Start by selecting one of the images. Then click Replace. Here, you can choose between uploading an image or picking from the Media Library. Once you’ve added your image, do the same with the other placeholder.
Then, click on one of the Paragraph blocks and replace the text with your own. You can make changes as you’d like, just as you did with the Paragraph block earlier.
And that’s it! You now have a beautiful page section that only took you a few minutes to create.
Using templates and template parts
Again, templates are frameworks that define the layout and design for types of content like posts, product pages, and archives. Template parts are reusable, global elements like headers and footers. You can edit both of these using the Site Editor.
To use the Site Editor, you must have a block theme active on your site. In your WordPress dashboard, go to Appearance → Editor. This will open up the Site Editor. On the left-hand side, you’ll see a sidebar with options for Templates and Template Parts. Click on Templates. Here, you’ll see a list of all the templates on your site, which will vary based on the specific theme you’re using.
In this example, we’ve selected the Single template, which is the template for individual blog posts. You’ll see that a few blocks already exist on this page, including:
Featured image
Post title
Post content
Post meta
Comments
You can make changes to these existing blocks however you see fit. We added a light green background behind the post title, made the title full width, changed the font of the post content, and removed the margin between the featured image and title. You can see what a post will look like with these changes made:
You can also add new blocks to your templates. Since we’re working with the Single template, let’s add a call to action that will automatically appear at the bottom of all of our blog posts. This will end up saving a lot of time because you won’t have to add the CTA to every single post individually.
Let’s add the “Simple call to action†block pattern to our template.
Now, we’ll just customize the CTA text so that it fits our needs. We’ll also update the design of the button, which you can do by clicking on the Button block, followed by the gear icon at the top right. There, you can edit settings like color, typography, padding, and more. You can change the button text and link by clicking directly on the button text and using the toolbar that appears.
Take a look at the changes we made:
Click Save at the top right to update your template. Now, you’ll see that the CTA is at the bottom of each of your blog posts.
Now, let’s go back to the Site Editor and look at editing Template Parts. Go to Appearance → Editor and choose Template Parts.
Here, you’ll see a list of template parts that you can edit. Remember, these are global elements and any changes that you make will be reflected across your whole site. Let’s click on Header to edit that template part.
You’ll see the header, and the current blocks that live there. In this case, there’s the Site Title block and the Navigation block.
You can make changes to the existing blocks just as you did with the block editor earlier in this article. Simply click on one to edit it, using either the menu that appears above the block or the Settings panel on the right-hand side.
Let’s add a search bar to the main menu. If you click on the Navigation block, the same toolbar will appear that you’ve seen throughout this article. But you’ll also see a black + icon to the right of the last menu item. Click that to add a new link or block to your menu. We added the Search block, but you could also include a custom button, a new link, social media icons — whatever fits your needs.
Then, using the Settings panels you’re already familiar with, style it however you’d like. We added placeholder text and changed the button color.
You can also select the entire header and style it, using the Settings panel on the right to change the background color, typography, padding, and more. Imagine all the ways you can apply these techniques across your site!
10 advanced tips to get the most out of the block editor
Now that you know the basics, let’s take a look at some tips for getting the most out of the block editor.
1. Take advantage of keyboard shortcuts
Keyboard shortcuts are a very handy way to speed up the editing and page building process because you don’t have to lift your fingers off the keys. With a little practice, you can become quite fast!
There are lots of great shortcuts that you can explore, but we’ve listed just a few below. Keep in mind that these will vary based on the device you’re using. For these examples, we’re listing the shortcuts for Windows computers:
Show or hide the Settings panel: Ctrl + Shift + ,
Navigate to the next part of the Editor: Ctrl + `
Save changes: Ctrl + S
Undo a change: Ctrl + Z
Duplicate a selected block: Ctrl + Shift + D
Insert a new block before a selected block: Ctrl + Alt + T
Move a selected block up: Ctrl + Shift + Alt + T
See the full list of keyboard shortcuts, including those for different operating systems, in the WordPress documentation.
2. Set styles for your site and blocks
If you have a website with multiple users or are a developer who hands off the site to a client, global styles can be incredibly powerful. You can use these to set predefined color palettes and block styles that are available for users. This helps your website stay on brand, no matter who’s working on it.
To access and set style variations, go to Appearance → Editor and click the Styles icon at the top right.
Note that any changes made here will apply to the entire site, so edit carefully! Click Browse styles to see a list of pre-built options. You can toggle through these and instantly preview how your site will look on the left-hand side.
Or, if you navigate back to the Styles panel, you can set typography, colors, and layout options. For example, click Typography, and you’ll see choices for text, links, headings, and buttons. We selected Headings and changed the font, font weight, and letter case.
Back in the Styles panel, you’ll also find a Blocks option. Open this, and there will be a list of the blocks on your site. In this example, we’ll open the Button block. The options available will vary a bit based on the block you selected, but for this one, you can edit typography, colors, and layout. Click on Colors and you can set the default colors for buttons across your site.
Or, you can click on Palette to define the color options that users will see when adding buttons to pages and posts. We chose to add custom colors to the Button block.
Now, when someone adds a button to your site, they can choose from the custom colors that you set.
3. Create reusable blocks
Reusable blocks are great because you can save them, then use them anywhere you’d like on your site. And when you make design changes to one, it will update everywhere. This is perfect for calls to action that you might use often or similar situations. In this example, we’ll create a Top-Rated Products block that we can use to promote popular products wherever we’d like on the site.
Let’s start by adding it to our page and styling it.
Once you’re done, click on the block, then select the three vertical dots in the toolbar that appears on top of the block. Then, choose Create reusable block.
This will prompt you to create a name for your block, then save it to your library. Then, when you’re working on another page or post, you’ll see a new Reusable tab in the Block Inserter. This will show all of your reusable blocks and allow you to add them into your content at any point.
If you click the link there that says Manage Reusable blocks, you can see a full list of your reusable blocks, and edit, add, or rename them.
4. Use the code editor
If you’re a developer or have some coding experience, you might want to be able to quickly apply precise changes to an individual page or post. All you need to do to access the code editor is open up the page or post you’re working on and click the three vertical dots at the top right. Then, choose Code Editor.
Now, you’ll see all the content on the page in HTML form. You can edit this code and make changes however you see fit, and switch back and forth between the two editors.
Remember, though, that editing code can be dangerous and could even break your site. Make sure you back up your WordPress site before making major code changes.
5. Make the most of List View
List View is a neat feature that helps you quickly and easily navigate between blocks while you’re working. To access this tool, click the three vertical lines at the top right of the block editor. There, you’ll see a list of all the blocks that make up your page or post.
If you see an arrow to the left of a block, you can click and expand that item to see all the blocks nested underneath. For example, the Gallery block has three Image blocks inside.
This is an excellent way to get an overview of all the elements that make up your page or post. You can also drag a block inside of List View to quickly move it around without having to scroll up and down the page. And if you click on a block, you’ll automatically be taken to it inside the Editor, which is particularly helpful if you have a lot of content.
If you click the three vertical dots that appear to the right when you hover over a block, you’ll get even more options. You can copy or duplicate the block, insert a block before or after the one you’ve selected, move, remove, or lock the block, or group multiple blocks together.
While WordPress comes with a lot of great blocks and patterns by default, there may be times that you need some extra options. There are a few ways you can do this:
The first way is through your theme. Many block themes include their own templates, block patterns, and blocks that are available to you upon installation. For example, the Wabi theme includes patterns for subscribe forms, projects, and headlines. And Bricksyhas dozens of ready-to-use patterns that make building layouts quick and easy.
Certain plugins may also add blocks and patterns to your library. For example, WooCommerce introduces blocks for displaying products and filters, showing the cart, adding reviews, and more. Jetpack introduces a huge volume of blocks that cover everything from calendars and forms to social media feeds and payment options. And Sensei LMS adds blocks for things like quiz questions and image hotspots.
There are also plugins available that were specifically designed to add blocks to your library. Here are some examples:
Ultimate Blocks: Content filters, reviews, countdowns, sliders, and more
Otter Blocks: Accordions, tabs, maps, pricing sections, and more
CoBlocks: FAQs, events, media cards, social sharing options, and more
Kadence Blocks: Icons, info boxes, table of contents, advanced row options, and more
7. Easily add content from Google Docs or your computer
If you often write content in Google Docs, or work with someone who does, the block editor will be a huge timesaver for you. Instead of having to individually copy and paste each paragraph, image, link, etc. you can just paste the entire Google Doc into the block editor. WordPress will automatically convert the document into the correct blocks.
If you don’t use Google Docs, you can still easily add content like media to the block editor. Just drag and drop an image directly from your computer into the editor and WordPress will convert it to an Image block.
8. Set up Query Loops
The Query Loop block is a special tool that enables you to display lists of posts based on a specific set of attributes that you define. For example, you could display a grid of products grouped by price. Or you could list companies by location in a business directory. The possibilities are pretty endless.
All you have to do is search for the Query Loop block in the Block Inserter, then add it into your page or post. You’ll then see two options: Choose and Start Blank.
While you can certainly create your own query loop from scratch, for this example, we’ll select Choose. We went with a simple list style feed, then clicked the gear icon in the top right to open the Query Loop block settings.
Toggle Inherit query from template to display further customization options. There, you can choose a post type to display (posts, products, etc.), set an order, and decide whether to include sticky posts. If you click the + next to Filters, you can add options for narrowing down the content display, such as categories, authors, and keywords. This allows you to create a truly custom list.
The theme.json file takes the concept of global styles that we discussed earlier one step further. If you’re a developer, this gives you a huge level of control over blocks and user preferences. You can find this file inside your theme directory, which you’ll want to access via file transfer protocol (FTP) or through your host’s cPanel.
Here are a few ways you can use the theme.json file:
Create a default color palette
Configure custom font sizes
Remove the option for custom colors in the block editor
Enable or disable the controls and options that are available to users for blocks
As you can see, you can use this file to make it easier for users or clients to utilize their site within the boundaries of a brand or style. Instead of being overwhelmed by options, they can see just the controls that they need.
If you have multiple users on your site, you may want to lock certain blocks that you don’t want edited or moved. Or, this may simply keep you from accidentally making changes yourself! Either way, this is a helpful, easy-to-use feature of the block editor.
All you have to do is select the block, then choose three vertical dots at the right of the toolbar that appears. In the new dropdown menu, select Lock.
A new menu will appear that allows you to either disable movement, prevent removal, or both. Configure these settings and click Apply.
When you save your page, this block will be locked!
The core list of blocks
We’ve talked a bit about how to add blocks to your library. But which blocks are available by default? Let’s take a look.
Text blocks:
Paragraph: Add standard, text-based paragraphs
List: Create bulleted or numbered lists
Heading: Separate your content with headings
Table: Add a table with multiple columns and rows
Quote: Highlight sections of text and add attribution
Classic: Use the Classic Editor in block form
Code: Include formatted code on your site
Preformatted: Add text that’s displayed exactly how you type it
Pull quote: Emphasize text in a more styled way than the Quote block
Verse: Write and style poetry on your site
Media blocks:
Image: Include images in your content
Gallery: Create beautiful galleries of images
Audio: Embed audio files into your content
Cover: Add content blocks on top of a visual background
File: Link to downloadable files
Media & Text: Place media beside a block of text
Video: Embed a video into your content
Design blocks:
Buttons: Add one or more calls to action in button form
Columns: Create visual columns and insert blocks inside each one
Group: Group blocks together and customize them as you see fit
Row: Arrange blocks side by side
Stack: Arrange blocks on top of one another
More: Display a “read more†link on archive pages
Page Break: Add pagination to pages or posts
Separator: Add a line between two blocks for visual separation
Spacer: Include blank space between blocks
Widgets blocks:
Archives: Display a date-based archive of your posts
Calendar: Show your posts in calendar format
Categories: List posts by category
Custom HTML: Insert HTML code into your page or post
Latest Comments: Show your most recent comments from readers
Latest Posts: Display your most recent blog posts
Page List: List all of your published pages
RSS: Show content from any site’s RSS feed on your own
Search: Add a search feature anywhere on your site
Shortcode: Add WordPress shortcodes into your content
Social Icons: Link to your social media profiles
Tag Cloud: Add a tag cloud to your site
Theme blocks:
Navigation: Edit your site’s navigation menu
Site Logo: Add your logo to your site
Site Title: Display your site name
Site Tagline: Display your site tagline
Query Loop: Show posts based on specific parameters
Posts List: Display posts using integrated patterns
Avatar: Include a user’s avatar
Post Navigation Link: Display links to next and previous posts
Comments: Show post comments
Post Comments Form: Display the comment form
Login/out: Enable users to click and either log in or out
Term Description: Show the description of a taxonomy on its archive page
Archive Title: Show the taxonomy name on its archive page
Search Results Title: Display a title above search results
Template Part: Add template parts to your pages and posts
The WordPress block editor also includes dozens of embed blocks that allow you to easily embed social media feeds, videos, podcasts, music, and more from third-party platforms. See the full list, along with more details about all the default blocks, from the WordPress documentation.
Frequently asked questions
Still have questions? Let’s answer some common ones below.
Is the block editor free on WordPress?
Yes! Since the block editor is included with WordPress installations by default, and WordPress itself is free, then the block editor is also completely free.
Does WordPress come with the block editor by default?
Yes, all WordPress installations include the block editor automatically.
Does the WooCommerce product editor use the block editor?
At this time, the WooCommerce product editor does not use the block editor. However, WooCommerce does include a set of blocks that you can use within your posts, pages, and other content. You can also use the Site Editor to customize the WooCommerce product template, archive pages, search results, and more.
Does the bock editor have an HTML editor?
Yes, the block editor does have an HTML editor. To access it, simply open the page or post you’re editing and click the three vertical dots at the top right. Then, select Code Editor. You’ll now see the page content as HTML code and can make edits accordingly.
How does the block editor compare to the classic TinyMCE editor?
Prior to the release of the block editor, WordPress used a TinyMCE editor, also known as the Classic Editor. But the block editor was built and designed to be more powerful and easier to use than the previous solution.
It’s a much more visual editor than TinyMCE, allowing beginners and developers alike to build beautiful, complex pages and posts. It also opens up the ability to design and customize elements like headers, footers, and templates without any code at all.
How does the WordPress block editor compare to page builders?
There are many benefits of using the block editor rather than a WordPress page builder. To begin with, the block editor is completely free, and included with WordPress by default. This means that you won’t have to install any additional plugins to use it, nor will you have to worry about compatibility issues with WordPress core or major plugins.
Some page builders are tied into specific themes, so if you decide to switch, you’ll have to rebuild much, if not all, of your content. This isn’t the case with the block editor. As long as you’re using a theme that supports the block editor, your content will largely remain the same if you switch.
There are lots of extensions and plugins that expand the capabilities of the block editor, since it’s a core WordPress feature. Having these at the tip of your fingers allows you to truly create something unique.
Finally, a page built with the block editor should load faster than one built with a page builder. Its code output is lighter and cleaner, and it doesn’t require any plugins that take up space on your server and in your database. You can see more information in the Pros and Cons section of this article.
What is a permalink? It’s a simple concept, really. A permalink is the permanent URL link used to access a piece of content on the internet. These URLs are, well, permanent — and it’s vital that they’re rarely changed or adjusted.
This article will explain what permalinks are, how they work, how to change them if you really need to, and more.
Specifically, we’ll talk about permalinks in the context of WordPress. Let’s go!
Explaining permalinks in WordPress
A permalink in WordPress isn’t much different than a permalink elsewhere on the internet. From a technical perspective, the official WordPress website defines a permalink as, “the permanent URLs of your posts, pages, categories, and other archive pages on your website.â€
In other words, if something exists on the internet created through the WordPress platform, it’s accessed by a WordPress permalink. But it’s not just the obvious pages like blog posts. It’s anything within the website’s structure — such as archive pages or category pages.
Let’s look at an example of permalinks in WordPress.
Say you create a website with WordPress and call it Jetpack (we think it’s a cool name). Here are some examples of permalinks for that site:
The homepage may be located at the permalink of jetpack.com.
The blog may be found at jetpack.com/blog.
A category page may have a permalink of jetpack.com/blog/category/performance
But, again, permalinks exist for every single piece of content on your website — not just specific areas. It’s a holistic concept. Everything has its own permalink: individual blog posts, landing pages, category pages, and whatever else is under the umbrella of your website.
The details of this structure depend wholly on how your site is built and mapped, and what this looks like in practice is determined by how your website is set up.
Why are WordPress permalinks important?
There are multiple reasons why permalinks in WordPress are important.
1. Site navigation and management
Think of your website as a big building, and the permalinks as the signs, doorways, and hallways that guide people to what they’re looking for. Permalinks help you manage your website links and keep information organized. Moreover, permalinks can help you track traffic and analyze user behavior, providing insights into who’s searching for your content and why.
2. User experience and perception
Permalinks are also useful signals to visitors about the information they’re seeking. They help people anticipate what pages or posts will be about — similar to headings or subheadings — or understand where they are in the context of the site.
Not to mention, a well-crafted permalink is much easier to remember, helping visitors share and return to your website. In a basic way, it’s like a sign that hangs in front of a physical store.
3. Search engine optimization (SEO)
From a technical perspective, WordPress permalinks broadcast to search engines what a post or page is about. A well-structured permalink that includes keywords can improve a website’s indexing and search ranking.
This is vital for connecting with people who are searching for what your website provides, improving the overall ranking of your website.
What to do before changing your WordPress permalinks
The internet is constantly evolving. What works today may not work tomorrow. To keep up with and stay ahead of trends, websites regularly receive updates and redesigns. Sometimes, those changes mean a shift in permalinks.
If your website needs to make these types of changes, you must take the proper steps to ensure a smooth transition.
Before you start the process of changing WordPress permalinks, make sure you review the following:
Back up your WordPress site
It might be obvious, but backing up your WordPress website is the first thing you should do before changing any permalinks. Losing website data can cause a ton of stress, significantly impact your work or business, and cost you hours upon hours of time. And it could cost you a lot of money if you have to hire someone to help. You definitely want a backup in place.
Jetpack VaultPress Backup is a great WordPress plugin that can ensure you avoid the painful experience of losing data.
One of the most powerful features of Jetpack VaultPress Backup is that your site is saved in real time. That means that rather than daily or weekly backups that can leave gaps in an emergency, every single change and update you make is automatically copied. Plus, all backups are stored off-site, so if there’s ever a problem with your server, they’re safe and secure. And you can restore your website even if it’s completely down!
To use Jetpack VaultPress Backup, you can download the plugin. Or, if you’re using the Jetpack plugin to take advantage of multiple tools all at once, just purchase a VaultPress Backup plan or a bundle that includes it.
Yes, it really is that easy.
Prepare to redirect broken links
Broken links are not only bad for the user experience, but hurt your website’s overall SEO. So, after updating your permalinks, you’ll need to redirect each one of your impacted URLs.
Before getting started, make a list of all the pages, posts, and other content that will need to be updated. Then, familiarize yourself with the options available to redirect a URL:
Remember, you’ll want to actually create the redirects after updating your permalinks. For now, choose a method and familiarize yourself with the process.
How to change WordPress permalinks
It’s essential to choose a permalink structure that’s easy to read and SEO-friendly. Here’s how to change permalinks in WordPress.
Log in to your WordPress Dashboard.
Navigate to Settings→Permalinks.
Select the permalink structure you want to use. (See descriptions of the types of permalink structures below.)
Click Save Changes to update the permalink settings.
How to change WooCommerce permalinks
If you’re running a WooCommerce store, you’ll change the permalink structure for the majority of your content through the same process, documented above, as any other WordPress site. However, you’ll also have the ability to change permalinks for products, categories, and similar types of content. To modify these permalinks, you’ll do the following:
Log in to your WordPress Dashboard.
Navigate to Settings→Permalinks.
Scroll down to the section titled Product permalinks.
Select the permalink structure you want to use. (See descriptions of the types of permalink structures below.)
Click Save Changes to update the permalink settings.
Types of WordPress permalink structures
There are multiple types of WordPress permalink structures. Your choice should depend on your goals for the website.
Plain: The default permalink generated by WordPress is known as Plain. This is the simplest but least SEO-friendly option. The Plain WordPress permalink uses numbers automatically generated by the platform and looks something like yourwebsite.com/?=123.
Day and name: The Day and name WordPress permalink structure reflects the exact date of when the post was published and the title of the post. This is very useful for news organizations or other types of websites when the date is significant to the information. For example: yourwebsite.com/2023/03/01/blog-post-title.
Month and name: Similar to the Day and name WordPress permalink structure, the Month and name permalink structure shows just the month and year when something was published. This is useful for timestamping information that isn’t required to be as specific as Day and name. For example: yourwebsite.com/2023/03/blog-post-title.
Numeric: The Numeric permalink structure in WordPress uses the post ID number in the URL. It’s not advisable to use this permalink structure, as it’s not very SEO or user-friendly. Typically, you’d use this for content not focused on generating organic traffic, such as online databases. For example: yourwebsite.com/archives/12345.
Post name: This permalink structure takes the blog post’s name and turns it into the URL, creating something like yourwebsite.com/blog-post-title. This is often the most recommended method, as it’s both SEO and user-friendly. The use of keywords and phrases in the framing of this permalink helps tell both search engines and users what the page is about. It’s also easier to remember or guess for someone looking to share or find the post.
Custom structure: A custom permalink structure in WordPress gives you the opportunity to create your own structure that’s personalized to your exact needs.
The different types of WooCommerce permalink structures
Default: Default permalink structures are simple and what WordPress automatically generates for product URLs. This structure displays the product ID in the URL. Like the Plain permalink structure for WordPress, this is not SEO or user-friendly, as it doesn’t provide any information to search engines or visitors. For example: yourstore.com/?product=12345.
Shop base: The shop base permalink structure takes the word “Shop†(or the custom name you give your shop page, if you choose to modify it) and includes it in the base of the URL. For example: yourstore.com/shop/product-name.
Shop base with category: The shop base with category permalink structure is similar to the shop base permalink structure but has more information. This structure includes categories so that the permalink will look something like yourstore.com/shop/category-name/product-name.
Custom base: The Custom base permalink structure is precisely what it sounds like — store owners can fully customize the URL. You can determine what is best for your needs, and build the URL structure around that.
Advanced: How to change WordPress permalinks in phpMyAdmin
Before we break this down, it’s important to stress that changing permalinks in phpMyAdmin is not recommended unless you are an advanced user experienced with database management. In all cases, make sure you have a backup of your website.
If you’re not comfortable with this or any of these terms, we very much recommend using the WordPress dashboard for updating permalinks.
But, if you still want to modify permalinks in phpMyAdmin, these are the steps:
Log in to phpMyAdmin.
Find your WordPress database on the left-hand side.
Select the wp_options table.
There, find permalink_structure in the option_name column.
Click Edit, and change the option_value field to your desired permalink.
Click Go.
Again, we highly recommend using the WordPress dashboard to change or update your permalinks.
Frequently asked questions about WordPress permalinks
Are permalinks important for SEO?
Yes, permalinks play an important role in successful SEO. While only one of many factors, search engines use permalinks to better understand the content of individual pages and the structure of a website as a whole.
A well thought-out permalink structure that uses relevant keywords can help both visitors and search engines understand why your site is relevant and should be valued.
Where are permalink settings located in WordPress?
Like all tools and services within the WordPress platform, finding your permalink settings is fairly easy.
Log in to WordPress as the administrator. The permalink settings are located in the wp-admin dashboard under Settings→ Permalinks. Here, you’ll be able to adjust or customize your permalink structures. There are several common options, such as Plain, Day and name, Month and name, Numeric, and Post name. Select your desired choice, and click Save Changes at the bottom of the page.
Don’t forget that changing permalink settings can alter the URLs of your current posts and pages. Before you decide to change your permalink structure settings, create a detailed plan that utilizes proper 301 redirects in order to prevent any issues or lost traffic.
What is the default permalink structure in WordPress?
The above number is the ID WordPress automatically generates for the said page or post. But unfortunately, this type of structure gives Google or other search engines no information about the content of the page. Therefore, in the majority of cases, it’s best to go with another option.
Can you create a custom permalink structure in WordPress?
Yes, you can create a custom permalink structure in WordPress. By customizing a permalink, you can control the way your links look and highlight the most important information while improving SEO, making your links more trustworthy and clickable.
Will changing permalinks affect previously published posts?
Yes. Without proper preparation, changing WordPress permalinks runs the risk of breaking the connections between links and hurting the overall search rankings of a website. Any user who clicks on an old URL will end up seeing a 404 error.
But, if you plan ahead, strategize, and set up 301 redirects following your permalink change, you’ll avoid these risks.
What should I do if I can’t change my WordPress permalinks?
There are a couple of things you can try if you’re having trouble changing the permalinks of your WordPress site.
First, try resetting your permalinks. Go to Settings→Permalinks on your WordPress dashboard. Without selecting anything, click Save. This sometimes can trigger a reset for any issues you might be having.
If that doesn’t work, check for issues with plugins or themes. Deactivate each one by one, and check if your permalinks work. There might be something going on that you don’t realize, and this process might also reset it.
What is the difference between a permalink and a URL?
Permalinks and URLs are essentially interchangeable terms as they are both used to direct you to a specific place online. The term permalink is more often used when describing a specific, categorized ending added to a primary domain (yoursite.com) by a content management system.
However, the permalink structure, in its entirety (yoursite.com/blog/what-is-a-permalink) is a URL.
What is the difference between a permalink and a slug?
A permalink and a slug are connected to each other, and both are part of the URL of a website.
A permalink is the full URL to a specific piece of content. It consists of the domain name, directories (if applicable), and the slug. Meanwhile, the slug is the part of the permalink that follows the domain name, highlighting a particular page or post in a simple and easy-to-read form. It’s the part of the permalink that explains the page’s content.
In the following URL, /check-out-this-website is the slug:
If you run a website built with WordPress, knowing how permalinks work within the platform is vital for continued success and growth. You want to use a system that makes it easy for both visitors and search engines to find and understand the content on individual pages and find their place within your website as a whole.
If the publication dates of new posts are important, you might choose to use the Day and name structure. If you’re going to lump groups of similar products together within an online store, you may want to include categories as part of your permalink structure.
No matter your choice, it’s best to not change the structure very frequently. So consider it carefully. If you do decide to make a chance, make sure you plan the update carefully and always have a backup of your WordPress site on hand.
PHP.ini is an important WordPress file that you can configure to extend your site’s functionality and improve its performance. Although the file is relatively easy to work with, you might not know how to locate and edit its settings.
Fortunately, this straightforward guide can help you easily locate your PHP.ini file in WordPress. Then, you’ll be able to edit and configure it to maximize your site’s performance.
Let’s take a closer look at PHP.ini and show you where to find it. Then, we’ll discuss three ways to edit it and boost your site’s performance.
What is the PHP.ini file?
WordPress executes several programming languages in the browser, including CSS, HTML, and JavaScript. Additionally, it uses PHP to generate and serve those languages.
In other words, PHP is the scripting language used by WordPress on the server side of operations. Through PHP, WordPress is able to display all of a website’s content, like blog posts, products, and more.
PHP.ini is the default configuration file for PHP on your WordPress site. You can change its default settings and run applications requiring the PHP scripting language. Overall, it’s a pretty important file when it comes to your site’s functionality and performance.
When would editing the PHP.ini file be required?
Although PHP is essential to WordPress, it has pretty limited default configuration settings. Fortunately, thanks to PHP.ini, you can override the default values for the following settings:
Maximum file size upload. Increasing this limit is ideal if you run a photography website or any other content-heavy site. Since videos and images tend to have large file sizes, editing this setting will enable you to upload heavier clips and photos.
File timeouts. When a file takes too long to process, your website will return an error message and stop processing the request. You can increase the number of seconds allowed before your upload times out.
Resource limits. You can increase the memory available to upload files and run commands. Plus, if you write long blog posts or add plenty of images to your site, you might increase the maximum post size to accommodate more data.
Maximum execution time. This setting determines the number of seconds a script is allowed to run before it gets terminated by the parser. As such, it helps prevent poorly-written scripts from draining your server.
Essentially, by editing these PHP configurations, you’re able to extend your site’s functionality and improve performance. Additionally, you might also want to edit PHP.ini in WordPress to enable or disable file extensions.
For example, a common error that you may see is “Your PHP is missing the MySQL extension.†In this instance, editing the PHP.ini file can enable the extension and clear the error message.
Can all WordPress site owners edit their PHP.ini files?
This depends on your server environment and system. Typically, it’s up to your WordPress hosting provider to allow access to the file. If PHP.ini is inaccessible, you may need to contact your host for support and see if they’ll help you edit it.
Certain hosting types are less likely to give users access to the PHP.ini file. For instance, a shared hosting setup consists of multiple websites hosted on a single server. It’s a great way to reduce costs, but you won’t have root access to your server.
By contrast, you’re more likely to have access to your PHP.ini file if you’ve signed up for a Virtual Private Server (VPS), dedicated server, or reseller hosting plan. In these setups, you’re not sharing resources with other sites, so you have more freedom to configure your website’s server.
Fortunately, if you don’t have direct access to the PHP.ini file in WordPress, there are some useful workarounds that can achieve the same results. Let’s take a quick look at two of them:
1. Edit your .htaccess file
Editing PHP.ini can increase your site’s maximum execution time. But if you don’t have access to the file, you can also adjust this setting in .htaccess.
First, you must access your website files via FTP or File Manager. Then, find the root directory of your site. This is usually labeled public_html.
Replace the “X†with an amount of time in seconds. Inserting “60†will increase the maximum execution time to one minute, giving your website more time to load scripts before terminating the process.
2. Edit your wp-config.php file
Additionally, you may want to eliminate the run time limit in WordPress. This setting controls the time your site will spend on an operation before timing out. At that point, your site will return an error.
If the code is already there from work you’ve done previously, simply change the value to 60. You can exceed 60 seconds, but doing so may be risky since the setting is in place to protect your system from poorly-written scripts.
Where is the PHP.ini file located?
By now, you should have a basic idea of the purpose of the PHP.ini file. Now you might be wondering: where is PHP.ini in WordPress?
If you have a PHP.ini file, you’ll usually find it in the root directory of your WordPress site. If not, you can create a new file for your website, which we’ll show you how to do in the next part of this article.
There are also different locations if you’re working in a local environment. If you’re a WAMP user, you can locate your WordPress PHP.ini file by right-clicking on the program icon. Then, head to PHP → php.ini.
In XAMPP, all you need to do is open the program and click on Config. Then, find the php.ini option within the menu.
Finally, using Linux, you can typically locate your PHP.ini file in the Loaded Configuration File. To access this, you’ll need to enter the following code below the terminal:
If you still can’t find your PHP.ini file’s location in WordPress, it’s time to contact your web host or create your own file. Let’s look at how this process works.
What to do before editing your PHP.ini file
Before making any changes to your site files, including PHP.ini, it’s a good idea to make a fresh backup of your site. That way, if you make any mistakes, you’ll be able to revert your site to an earlier version in just seconds.
If you don’t already have a WordPress backup plugin, consider installing Jetpack VaultPress Backup.
Not only does VaultPress back up your entire website, but it also stores copies of your database, your site files, and all WooCommerce customer and order data.
How to open and edit your WordPress PHP.ini file
There are several reasons you may want to edit your PHP.ini file. Here are some of the recommended configurations that might be useful:
Adjusting the maximum execution time will increase the time available to execute every script on your site. Essentially, this refers to the time the server needs to run the commands, so it can be handy if you have heavy scripts.
The memory limit enables you to restrict and expand the memory usage of PHP. Generally, this concerns the memory needed to upload files and run commands on your site.
Post max size defines the maximum data a post can have. So, if you have plenty of images on your pages or write super long blog posts, you might want to increase this value.
Additionally, you can increase the upload max file size. This is a helpful setting for photographers or other creatives who need to upload heavy media files like videos.
However, before you can make these edits, you’ll need to locate an existing PHP.ini file or create a new one. Keep in mind that if you’re using shared hosting, you may be unable to follow these steps.
1. Use an FTP client
Using an FTP client is one of the easiest ways to find and access your PHP.ini WordPress file. Once you’ve got a current backup in place, it’s time to connect to your site via FTP.
If you don’t already have one installed, you’ll need to find an FTP client like FileZilla and download it to your computer.
Then, you can connect to your site via FTP to access your site’s files. Just enter your FTP credentials to establish a connection (which you can typically get from your hosting provider).
Once the connection is made, locate the root directory of your site. This is usually labeled public_html or public.
If you have a PHP.ini file, you should see it in this folder. If you can’t find it, you can locate it manually by creating a new PHP file and pasting the following code into it:
<?PHP phpinfo(); ?>
Update the file by saving your changes. At this point, open the file in your browser to identify the correct file path.
Simply type your website’s URL followed by the file name you chose into the search bar. This might look something like this: yourwebsite.com/file-name.php.
This should launch a page in your browser with information about your PHP installation, including the file path for your PHP.ini file. You can find this information within the Configuration File Path or Loaded Configuration File field.
Once you’ve opened the php.ini file, enter your custom directives. You can check out this list of common PHP.ini directives and syntax rules to configure the file correctly.
Finally, save your file! The settings should start taking effect within a few minutes.
2. Use cPanel
cPanel is a common control panel tool included in many hosting provider dashboards. It’s pretty straightforward and easy to use.
First, you’ll need to log in to your hosting account and locate the cPanel File Manager. Then, open your public_html folder.
Here, you’ll want to look for your PHP.ini file by its name. Note that it might also be hidden, so click on Settings and check the box next to Show Hidden Files (dotfiles).
If you still can’t find it, click on New file and name it “php.iniâ€. Make your edits, save the file, and your site should start showing the changes within a few minutes.
Depending on your hosting account dashboard, you may also have access to the MultiPHP INI Editor. This tool enables you to configure your PHP settings from a list of available directives. Keep in mind that the editor is typically only available with VPS, dedicated server, or reseller hosting plans.
3. Utilize a WordPress file manager plugin
File manager plugins enable you to easily edit your website’s files without playing around on the back end. Therefore, using a plugin is an accessible, quick, and beginner-friendly way to access your WordPress PHP.ini file.
With a file manager plugin, you’ll typically get access to a clean, intuitive interface to manage, upload, download, and even back up and restore files. One of the most popular options is Advanced File Manager.
To edit your PHP.ini file with Advanced File Manager, you’ll need to install the plugin in WordPress. In your dashboard, navigate to Plugins → Add New. Then, search for “Advanced File Manager†and click on Install Now → Activate.
Once the tool has been installed successfully, head to File Manager → File Manager to access the plugin’s interface.
You may be able to find PHP.ini within the file list. Otherwise, click on New file and select txt to create a simple text file. You’ll be prompted to name the file, so call it “php.iniâ€.
Next, select the newly created file and click on Edit file. Then, input your code, along with any custom configurations.
Again, make sure to save your changes when you’re done to finish setting up your WordPress PHP.ini file.
Frequently asked questions about the PHP.ini file
We’ve just covered the basics of finding and editing your PHP.ini file in WordPress. If you still have any questions, we’ll answer them in this section!
What if I don’t have access to the PHP.ini file? Can I still edit my PHP settings?
If you can’t access your PHP.ini file, you may be able to edit your PHP settings by creating a new PHP.ini file via FTP, File Manager, or a file manager plugin. Keep in mind that this typically isn’t available for shared hosting plans. Alternatively, you can configure some PHP settings using .htaccess and wp-config.php.
Can I create a new PHP.ini file to overwrite my hosting provider’s file?
In some cases, it’s possible to override PHP settings by creating a new PHP.ini file. If this doesn’t work, you’ll need to contact your hosting provider directly. You may need to switch to a different hosting configuration, like VPS or dedicated hosting.
Do PHP.ini changes take effect immediately?
PHP.ini changes often take effect immediately or within a few minutes. If you’ve made edits, but your site’s configuration hasn’t changed, you may be editing the file in the wrong directory.
Can your WordPress site’s PHP.ini file be hacked?
Editing the PHP.ini file is a great way to extend the functionality of your site and configure its PHP settings. But you might not know how to carry out these changes.
To recap, here are three ways to locate and edit PHP.ini:
Use an FTP client.
Use cPanel within your hosting account dashboard.
Utilize a file manager plugin like Advanced File Manager.
Before you start editing any of your site files, it’s important to back up your site. Jetpack VaultPress Backup backs up all your database tables, website files, and WooCommerce data, so you’ll never lose your content. Better yet, it’s super simple to restore your site if anything goes wrong.
Images and videos are a great way to make your web pages more engaging and interesting to visitors. But lots of images on your website can slow down your loading times. This can affect your pages’ search engine rankings and your site’s user experience (UX).
Fortunately, you can optimize and compress images to increase site speed. Whether you’re a WordPress expert or a complete beginner, you can find a method that works for you — like using a plugin, a simple online tool, or the image editor on your device.
In this post, we’ll take a closer look at why you should consider optimizing and compressing images. Then, we’ll show you three ways you can do this and explore other useful strategies for speeding up image delivery.
Why compress and optimize your images?
Before you learn how to optimize images in WordPress, it’s important to understand why you might want to do this. The fact is that large, unoptimized images take up lots of bandwidth and can contribute to slow loading web pages. To give you an idea, when it comes to slow load times, just a four second delay can increase bounce rates by 24 percent.
Additionally, page speed is a ranking factor for Google. Therefore, slow loading times can lead to your pages appearing lower in the search results, making you less visible to searchers.
By optimizing your images, you can get your photos looking their best while using fewer pixels and bytes to serve them on the page.
When you do this, you’ll need to think about your preferred image format. For instance, a PNG is able to utilize ‘lossless’ compression, which doesn’t reduce file sizes too much. This enables you to retain image quality, making it a great choice for web graphics and icons.
Alternatively, you can use JPEG images. While the file size is much smaller, JPEGs can result in a poor quality image when compared to PNGs. In most cases, however, you won’t notice much of a difference.
How to optimize and compress images in WordPress (3 steps)
Now that you know why image optimization is important for your website, let’s take a look at three steps to optimizing and compressing images for WordPress.
Step 1: Compress your images
Method 1: Use an online compression tool
An online compression tool is a quick way to reduce your image file sizes without any noticeable difference to the image quality.
But, it does require you to revisit the website each time you want to add an image to your site. This can be fairly time-consuming, but some services do allow you to upload images in bulk.
One of the most popular online compression tools is Tiny PNG. This is a freemium, user-friendly platform that’s suitable for complete beginners.
With it, you can compress up to 20 images at once, and you’re able to select your preferred format from JPEG, PNG, or WebP.
All you need to do is upload/drop your image onto the website and the process begins immediately. This will only take a few seconds. Then, you can save your compressed images straight to your preferred cloud storage location or download the files to your computer.
Another useful online tool is Compress JPEG. Similar to Tiny PNG, you can compress up to 20 images at once and download them individually, or grouped together in a zip folder.
The advantage of Compress JPEG is that you’re not limited to JPEGs and PNGs. You’re also able to compress GIFs and PDFs. Although PDFs are document files, they often contain images, charts, and hyperlinks.
Additionally, PDFs can be hundreds of pages long, which results in large file sizes. By compressing any downloadable PDF files, you offer on your site, you can avoid creating a negative experience for users, making your files easily shareable and accessible to anyone who opens them.
Method 2: Resize and compress images manually with an image editor
Alternatively, you can resize and compress images with an image editor. This method gives you a lot more control over resizing and cropping your images, but it provides only very basic editing capabilities.
Of course, you might prefer external editing tools (like Adobe Photoshop), but these can be expensive and most of this software comes with a steep learning curve.
The most accessible method is to use the photo editor on your operating system. You can use your device’s native tool to reduce your image size, cropping out non-essential parts.
Here’s an example of how you might do this using the Photo application on macOS. Start by opening Photo and selecting your image. Then, hit Edit.
Here, select Crop and drag the corners to shrink your image.
You can also click on Custom to specify the exact height and width of your image. Simply type your dimensions into the box, and select landscape or portrait mode. The image will adjust instantly.
Alternatively, you might prefer to use one of the default options. For example, the Square setting can come in handy if you plan to post your image on social media.
If you decide against the changes you’ve applied, you can click on Reset to revert your image back to its original form. Then, when you’re happy with your image, click on Done.
As we mentioned above, you can also use third-party tools like Adobe Photoshop to resize and compress images.
If you opt for this method, it’s best to consider sticking to JPEGs and PNGs to keep file sizes small while retaining image quality.
Step 2: Serve your images through Jetpack’s image CDN
A content delivery network (CDN) is a powerful tool that uses a network of servers to quickly and efficiently display your site to visitors based on their location. And while any CDN can help you improve your website speed, Jetpack’s image CDN stands apart due to its unrivaled Photon technology.
Photon starts by re-encoding each image to more modern and lighter formats, like WebP, which reduces file size and takes weight off of your server. Then, it optimizes each image based on the specific device and screen size a visitor is using, creating a bespoke experience for every individual. This means that each and every reader, customer, and client can get the best possible user experience on your site — great for branding, sales, and search engine rankings.
And setting up Jetpack’s CDN couldn’t be any easier. Here’s how you can get started:
In your WordPress dashboard, go to Plugins → Add new. Search for “Jetpack.â€
Click Install now → Activate.
You’ll be prompted to connect Jetpack to your WordPress.com account, which enables you to make the most of the powerful features.
Return to your WordPress dashboard and navigate to Jetpack → Settings → Performance.
In the Performance and speed section, toggle on Enable site accelerator.
And that’s it! Jetpack will go to work right away.
Step 3: Install a speed optimization plugin
Now it’s time to wrap up your efforts with a final boost of power. You’ll want a speed optimization plugin for this, and the best one to choose is Jetpack Boost. This tool can work automatically, constantly adapting as you add new images or content to your site.
It will gauge your site’s performance in key areas and provide a report, so you can measure progress. Then, it goes to work to specifically target the metrics that are most important to both your visitors and to search engines.
Once activated, you can navigate to Jetpack → Boost in your WordPress dashboard.
Here, you can generate a score to assess your current performance across desktop and mobile devices. This will help you identify areas you need to improve.
You’re also able to configure your preferred settings for the plugin. For instance, you might want to enable CSS optimization or defer non-essential JavaScript. This allows you to load your most important styles and images quickly.
To do this, simply slide the toggle across for the relevant setting.
The final option is lazy image loading. This is a neat feature that helps you boost speed by only loading images when they’re needed.
Essentially, images that appear further down your page won’t be loaded until the visitor reaches them. It’s a great way to reduce the burden on your server.
And one of the best parts about Jetpack Boost is that once you’ve configured your settings, the plugin runs in the background of your site, so it won’t weigh things down.
How to put WordPress speed optimization on autopilot
Compressing images and graphics before you upload them to WordPress should become a regular part of your process. Then, with the right tools in place, your work is done!
Jetpack Boost combined with Jetpack’s image CDN is the simplest way to put your WordPress speed optimization on autopilot. These tools work in the background of your site, so you can simply “set and forget†them, without having to bother every time you add new images to your posts or pages.
Jetpack’s CDN will automatically detect new images and add them to its network of servers, immediately beginning to serve them in the appropriate file formats and resize them based on individual visitors’ needs.
Jetpack Boost will continue to defer non-essential JavaScript and lazy load images, even new ones you add. Plus, with a paid plan, it will automatically generate critical CSS every time you make a change on your site.
There are a ton of benefits that you can enjoy by putting speed optimization on autopilot:
Productivity. You can free up time to focus on more important tasks instead of going back and forth between other tools.
Reliability. You can rest assured that your site’s speed is optimized no matter what.
Speed. Optimization starts as soon as you upload new images or update content, and continues while you tend to other parts of your site.
Accuracy. With manual processes, there’s always room for human error. You might make a mistake with the CSS, select the wrong file type, or input the wrong dimensions. With your speed optimization on autopilot, once you’ve configured your settings, you’ll get your images exactly how you want them every time.
With all that in mind, combining Jetpack CDN with Jetpack Boost is the best way to optimize your images and speed. You can maximize productivity, boost your search engine rankings, and provide an excellent user experience.
Additional steps to optimize your image delivery
Now that you know how to optimize and compress images, let’s take a look at some additional steps that you can take to optimize your image delivery.
Resize your images for mobile devices
Resizing your images for mobile devices is another great way to speed up image delivery. This will help you create a responsive website with images that display smoothly across all screen sizes including smartphones, tablets, and desktops.
This way, you can optimize the user experience for all visitors, no matter what device they use to access your website. This is important because mobile traffic accounts for nearly 60 percent of global web traffic. What’s more, in 2015, Google started rewarding mobile-friendly websites with higher search rankings.
If you serve poorly-loaded content, glitchy pages, or missing images, you can severely disrupt your user experience and risk sending visitors elsewhere. A great solution is to install Jetpack CDN, which automatically resizes images for different devices.
Avoid embedding images from external sources
Another factor that contributes to slow load times is image redirects. These occur when you embed images from external sources. Luckily, this issue is simple to resolve.
To increase your website speed and optimize your UX, you can save the image to your computer, or to a remote location like the cloud. Then, you’re able to upload the image directly to your WordPress website.
Optimize your image thumbnails
Finally, if you run an ecommerce website, you can boost image delivery by optimizing your thumbnails.
Large and unoptimized thumbnails can delay your loading times, which can frustrate visitors. You might even end up losing customers as a result.
It’s important to make your thumbnail file sizes as small as possible. This is especially relevant for category pages where you might be displaying lots of thumbnails at once. That’s because lots of unoptimized images can significantly hinder your site speed.
Additionally, where thumbnails are concerned, you might even prioritize file reduction over image quality — especially since your website visitors aren’t likely to notice a reduction in quality if the image is very small.
What else can I do to speed up my WordPress site?
One of the easiest ways to speed up your WordPress site is to improve your Core Web Vitals score. This score is determined by a set of metrics used by Google to measure your site’s performance. For instance, LCP refers to the time it takes for the largest element on your page to load, like your hero image.Â
FCP evaluates the time it takes for the first piece of content to load on your page. With very large image files, you can get poor LCP and FCP scores that can affect your search rankings.
Other useful ways to speed up your site include minifying CSS, removing (or deferring) unused CSS, and deferring parsing of JavaScript.
Optimize and compress your WordPress images
While visuals are a great addition to your web pages, too many unoptimized media files can weigh your site down. This can result in poor performance that damages the user experience. Luckily, you can fix this by optimizing and compressing images in WordPress. Then, no matter where your visitors live or what device they’re using, you can serve content quickly.
To recap, here are three steps to optimize and compress images for WordPress:
The Query Loop is a neat WordPress block that enables you to display a list of related blog posts, products, and pages. As a beginner, you might be wondering how to take advantage of this feature.
Fortunately, the Query Loop block is relatively easy to use. You can choose your favorite pre-built layout or create something from scratch. Plus, you can configure the display of your nested blocks and fully customize the design.
In this post, we’ll take a closer look at the Query Loop block in WordPress. Then, we’ll show you how to use the block and talk about specific use cases.
What is the Query Loop block in WordPress?
The Query Loop block is a tool that enables WordPress users to display a dynamic list of posts based on specific attributes. For example, it can be set to cycle through all posts of a certain category, displaying the post title and image of each one.
This block can be quite technical to configure. As a result, beginners tend to avoid using it and instead opt for the Post List block, which is a simpler version of the Query Loop.
While the Query Loop block is more complex, it also allows for greater flexibility. For instance, you can create a page full of your best recipes or showcase a portfolio of projects.
When to use the Query Loop block in WordPress
The Query Loop block provides multiple opportunities for promoting your content. Here are some of the results you can achieve with it:
Create a related posts section for your blog, featuring the post title, excerpt, and image.
List companies by location within a business directory.
List book reviews according to a specific star rating.
These are just some examples. There are plenty of ways you can configure the Query Loop block.
How to use the Query Loop block in WordPress
To get started with the Query Loop block, you’ll need to navigate to the post or page where you want to use it. Then, click on the + to add a new block and search for Query Loop.
You can also insert the block using the block pattern selector. Switch to Patterns and select Query from the dropdown menu. Then, choose your preferred layout.
There are plenty of Query Loop layouts to choose from. For instance, you can present your posts in a grid, with an image to the left, or stick with the default format.
Alternatively, click on Start Blank to create your Query Loop from scratch and gain full control over the design of your content.
You’ll have to choose a variation to start with. You might want to show the image, date, and title of your post, or just present the post title and excerpt.
Whether you’ve created your block from scratch or used a template, you’ll see a preview of your block in the editor.
Your Query Loop block consists of several different sub-blocks, like post titles, featured images, and more. If you click on the Display Settings icon in the toolbar, you can configure the number of items per page.
You can also use the block settings in the panel on the right to further customize the query loop. You might decide to change the order of your items, create new posts for your feed, apply filters, change colors, and more.
What sub-blocks are found within the Query Loop block?
Within the Query Loop block, you’ll find several sub-blocks grouped together. Although they contain the word “post†in their names, they can also apply to other content like pages, portfolio items, or products.
Let’s take a look at each sub-block.
1. Post Title
The Post Title block displays the title of each post. You can transform the title into a link and adjust the font and color within the Block settings.
2. Post Date
With this block, you can show the published date of your content. You can change the default format, show the last modified date, and link to a post within the settings.
3. Post Content
The Post Content block presents the entire content from your post or page within the Query Loop block. This could make your block very long, which can be off-putting for visitors.
4. Post Excerpt
Post Excerpt displays a summary of each piece of content. Visitors will be able to view your excerpt and find a “Read More†link. You can add this link on a new line or at the end of the excerpt. Plus, you can modify the anchor text, change the link color, and select a new font size.
5. Post Featured Image
If you choose to include this block in your Query Loop, you’ll display the featured image for your posts or products. Additionally, you can enable a link with your image to direct visitors toward the piece of content when clicked.
6. Post Categories
By adding a Post Categories block inside your Query Loop, you can display the categories associated with that piece of content. This is a great way to display blog posts that cover a similar topic, or products within the same category. You can also change the color and fonts within the settings.
7. Post Tags
The Post Tags block enables you to display the tags added to your post. It’s another useful way to showcase similar content.
8. Pagination (previous post and next post)
Pagination is one of the most valuable blocks to add to your Query Loop since it displays links to your previous or next posts. Pagination consists of three separate blocks:
Previous
Page Numbers
Next
To use it, you’ll first need to select the Post Template block, using the List View. Then, you can click on + to add the Pagination block.
9. Post Author
As the name suggests, Post Author showcases the author details, like the author name, avatar, and bio. If you choose to include this block, you’ll need to select the user with the dropdown menu in the Block settings. Here, you can also configure avatar visibility, change the avatar size, show/hide your author bio, and change the color and dimensions.
10. Post Author Biography
If you don’t want to include your author name and avatar in your Query Loop, but you want the author bio to be visible, then this block is for you. All your visitors will be able to see is the bio. Plus, you can customize its appearance, adjusting the dimension, font, and color.
Examples of Query Loop block use cases
Now that you understand the Query Loop block a little better, let’s take a look at three ways you can use it.
1. Create a “recent posts†section
This section can make your recently published content more visible.
To get started, you’ll need to use two Query Loop blocks. Add your first one, then choose a pattern or start from scratch. For visual posts like recipes, Image, Date, & Title can be a good choice.
If you’ve already configured your Query Loop, your posts will show up here. If not, click on Create a new post for this feed to write and publish the posts you want to include.
Since this is where your most recent post will go, you’ll only want to display one piece of content. Navigate to the Display Settings. Beside ITEMS PER PAGE,input “1â€.
Now, you should only be able to see your most recent post listed in the block.
You can then add a second Query Loop block to display other recent posts. Choose your preferred layout. Then, navigate to the toolbar and switch from List View to Grid View. This way, the reader can see more of your recipes at once.
Now, click on the Display Settings and change the OFFSET value to “1â€. This will eliminate your most recent post from your second Query Loop block.
Additionally, you can customize the layout of your block. For instance, you might want to reduce the font size of your headings to improve the text’s readability. You can do this from the toolbar.
You might also want to reduce the size of the date. You can make these changes within the Block settings. Find Typography and select a more appropriate font size.
You can also set new dimensions for your featured images, and alter the alignment of your recipe titles. When you’re ready, click on Save draft or Publish.
2. Add the Query Loop block to an index template
If you’re using a block theme, you can add the Query Loop block to a template. This can come in handy when setting global styles for query loops and their sub-blocks.
In your WordPress dashboard, go to Appearance → Editor.
Click on the pull-down menu that’s currently set to Home or Page (depending on your theme), andselect Browse all templates.
From the list of templates, select the one you’d like to edit. The Index template tends to be a good option, since it’s the one that indexes and displays website posts.
If you choose Index, you’ll find that the template already comes with a Query Loop block, but you can delete it and add your own. You can then adjust the layout, switching between List View and Grid View.
You can also customize your “Read More†text by clicking on the sub-block and typing in your preferred call-to-action.
You’ll also find all the Block settings available if you go to the toolbar and click on Show more settings. Here, you can change the text size and color, and set new dimensions for your images.
3. Set global styles for your Query Loop blocks
If you plan on using Query Loop blocks frequently on your site, it can be time-consuming to create and configure your loop over and over again. That’s why it’s a good idea to set global styles for your query loops and nested blocks.
To access the global styles editor, click on the Styles icon in the top-right corner of your screen:
Then, select Blocks at the bottom of the sidebar:
Scroll through the list of available blocks and find Query Loop. Then, click on Colors:
Here, you can manage the color schemes of different elements and blocks on your site. If you want to add more custom colors to your default palette, click on Palette and find CUSTOM.
Now, click on the + to add new colors to your palette.
Next, go back to your Query Block loop colors. You’ll see a list of elements like background, links, and headings.
You can also set default styles for these components. To do this, select the element you want to edit.
For instance, you can change the background color of your Query Loop blocks.
If you decide against any of the changes you apply, simply click on Clear.
You can also set global styles for the background and text color of your headings. Additionally, you can assign hover colors for your links. When you’re done, click on Save to apply new default styles to your blocks.
Extend the Query Loop block
Although you now know how to create and customize a Query Loop block in WordPress, you may be looking to extend the block even further. Using the Block Variations API, you can specify certain default settings, disable customization options, and more.
For instance, you might never use the Sticky attribute in your Query Loop. The Author field might also not be relevant to your posts. Therefore, you can disable these controls so that they’re not visible.
In this instance, the variation code would look like this:
If, for whatever reason, you want to hide all the available controls for your Query Loop block, you can set an empty array beside the allowedControls.Â
As you can see, this method requires some technical knowledge. If you have no coding skills, you may want to stick with the customization options available in the Block Editor.
Frequently asked questions
While we’ve tried to cover all aspects of the Query Loop block, you may still have some questions about this feature. Let’s look at the most common ones.
What is a WordPress query?
Query translates to “ask†or “command.†So within the Query Loop block, the “Query†portion enables users to ask for certain information to pull into the loop. This is how the Query Loop displays all posts or pages for a specific tag, category, and more.
What is a WordPress loop?
A WordPress loop is a way of displaying similar information in a cyclic format. For instance, you can create a loop of blog posts that will display related articles on your page, showing the post title, excerpt, featured image, and more.
The data is pulled from your published content and placed in the loop, which sits on your pages for visitors. As such, it helps you direct users toward other relevant pieces of content and keep visitors engaged with your site.
What can you do with the Query Loop block?
There are plenty of things you can achieve with the Query Loop block. For example, you could show a list of related or featured products.
Additionally, you could direct users toward other recipes on your site that share the same tags or categories. For a portfolio website, you can even showcase your latest or best work within a Query Loop block.
How can you extend the Query Loop block?
You can achieve detailed control over the way your Query Loop is displayed by adding custom settings to the block. With the Block Variations API, you can create new features, disable certain elements, and apply your own presets.
Create a Query Loop block in WordPress
The Query Loop block is a useful WordPress block that enables you to display featured posts, related pages, or products of a certain category. You can also use it to show content from custom post types, like testimonials and portfolio projects.
The Query Loop block is very customizable. You can configure the sub-blocks within it, like the post title, author name, and featured images. Plus, you can extend the block and add custom settings with the Block Variations API.
Another way to help visitors find the right content on your site is to use Jetpack Search. Ideal for large websites, you can provide instant search results and utilize powerful filters to boost your user experience. Get started with Jetpack Search today!
While WordPress is one of the most popular content management systems, you may encounter problems from time to time. For example, you might have issues logging into your WordPress dashboard.
Fortunately, whether it’s a 404 message, redirect loop, or something else, there are multiple ways to fix login errors. By doing so, you’ll make your site accessible again to all members of your content and development team.
Below, you’ll learn about seven of the most common WordPress login errors. Then, we’ll share our best tips for fixing them.
1. “Cookies are blocked or not supported†error
Cookies are small snippets of data sent to your browser when you visit certain websites. The cookies are then stored for a specified period or until your session expires.
Websites use cookies to personalize the user experience (UX) by keeping track of your activities and preferences. Additionally, on the WordPress login page, cookies save your login credentials.
When you log in to WordPress and receive an error message that says, “cookies are blocked or not supported,†there are several potential causes. First, a security or caching plugin might be blocking cookies. Alternatively, if you’ve recently switched web hosts, there may be a conflict between the cookies in your browser and your new server.
There are two main ways to fix this login error. You can either clear your browser cache or edit your wp-config.php file.
Solution: Clear your browser cookies and cache
Clearing your cookies and cache is a great way to free up storage space and resolve common formatting issues and login errors. The process for clearing cookies depends on your browser.
If you’re a Google Chrome user, click on the three dots in the upper-right corner. Then, select More Tools → Clear Browsing Data.
Make sure that at least two of the boxes are ticked:
Cookies and other site data
Cached images and files
Then, confirm the action by clicking on Clear Data. Now, try to re-access your WordPress login page.
Solution: Edit your wp-config.php file
If the previous method didn’t work, you’ll need to edit the wp-config.php file via File Transfer Protocol (FTP) or File Manager in your hosting dashboard.
Once you’ve connected to your site, open its root directory. This is usually labeled public_html. Then, scroll down until you see wp-config.php.
Open the file and scroll down until you see the line that says:
/* That's all, stop editing! Happy publishing. */
Before that line, paste the following code to fix the blocked or not supported cookies error:
Now, refresh your browser and see if you can access WordPress.
2. WordPress login is stuck in a redirect loop
If your WordPress URL and site address differ from the permalinks registered with your hosting provider, they can create issues with the login procedure. In this case, you’ll be continually redirected back to the WordPress login page without ever gaining access to your site.
A common cause of the redirect loop is a recent migration, like switching hosts or servers. Moving the WordPress core files to a subdirectory can also result in this WordPress error.
As with most login errors, clearing your cookies and cache is the easiest way to start. You can check out the previous section to learn how to do this.
If that doesn’t work, there are three main methods you can try. The first involves editing the wp-config.php file. The second requires editing your functions.php file. Finally, you can try to restore your .htaccess file.
Solution: Edit your wp-config.php file
If you still have access to your WordPress dashboard, verify your site address and WordPress address by going to Settings → General. Here, look at your WordPress Address (URL) and Site Address (URL).
These addresses should match up. If they don’t, you can change your settings manually in wp-config.php. This method requires finding and editing wp-config.php via FTP or File Manager.
Once you’ve gained access to your WordPress files, head to public_html and open wp-config.php in a text editor.
You’ll need to substitute your URL for “example.com†in both lines. Then, save your changes and refresh the WordPress login screen to see if the error has cleared.
Solution: Edit your functions.php file
If you’re still unable to log in, you can edit the functions.php file to reset your WordPress address. Again, you’ll need to access the root directory of your site. Then, open your wp-content folder and locate your themes folder.
Now, select your active theme and find functions.php.
This should update your database and reset your site’s URL. Now, refresh your login screen and try again. Once you’ve gained access to your site, you can delete these lines of code from your functions.php file.
Solution: Restore the default .htaccess file
The final fix for the redirect loop is restoring the default .htaccess file. This is because one of the main causes of this error is a corrupted .htaccess file. It may be caused by custom changes you’ve made to the file.
You’ll need to access your WordPress files via FTP or File Manager. Then, locate your .htaccess file.
The first thing to do is to rename the file, so right-click on it and call it “.htaccess-oldâ€.
Next, you’re going to create a new .htaccess file. Stay within the root directory of your site and click on New File.
Name your new file “.htaccess†and paste the following code into it:
# BEGIN WordPress
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress
Save your changes and exit the File Manager. Then, return to the WordPress login page and see if the error is resolved.
3. “HTTP 500 Internal Server†error
A corrupted .htaccess file can cause internal server errors. Therefore, the best way to resolve the problem is to remove the file altogether.
Solution: Replace the .htaccess file
You’ll need access to your site files. You can do this via FTP or through your File Manager. Then, locate .htaccess within your public_html folder.
It can be a good idea to download a copy of the file to your computer before making any changes. If something goes wrong (or .htaccess isn’t the cause), you can re-upload the file to your database.
Now, right-click on the file to remove it. Additionally, you might need to visit your wp-admin folder to see if there is also an .htaccess file there. If there is, go ahead and delete that too.
Then, head back to your WordPress login screen and try to access your site. If this works, you know that your .htaccess file was the problem.
In this instance, you’ll need to create a new .htaccess file. You can do this within your root files by following the instructions in Section 2 of this tutorial.
Alternatively, you can generate a new .htaccess file in your WordPress dashboard. To do this, simply navigate to Settings → Permalinks.
Then, click on the Save button without making any changes to the settings. You can see if this has worked by revisiting your database and looking for a new .htaccess file in your site’s root directory.
4. “404 Not Found†error
If your site is returning a 404 error, it’s important to check your wp-login.php file. To do this, you’ll need to access your site files via FTP or File Manager. Then, look inside public_html.
If you have a backup of your wp-login.php file, you can compare it against the current one in your database and look for any differences. Essentially, you need to make sure that the file contains these two lines:
fine (‘WP_HOME’, ‘http://example.com’);
fine (‘WP_SITEURL’, ‘http://example.com’);
If you don’t see these lines of code in your wp-login.php file, download a fresh copy of the file from a new WordPress installation.
If this doesn’t solve the problem, the 404 error may be due to software conflicts between plugins and themes.
Open the folder and look for plugins. Then, right-click on the folder to rename it. You’ll want to rename it something like “plugins-old†or “plugins-disabled†to deactivate all plugins on your site. This tricks WordPress into thinking that your plugins no longer exist.
Now, return to your login screen to see if you can access your site. If you can, reactivate each plugin until you find the issue.
If this is a common issue on your site, it’s worth sticking with reputable plugins from the official WordPress plugin repository. You’ll also want to read customer reviews and see how frequently the plugin is updated. Generally, plugins with active development are best, since you know they’ll be compatible with the latest version of WordPress.
Solution: Replace your theme
As we mentioned earlier, the 404 error is generally caused by conflicts within the software on your site. While plugins tend to be the main culprits, the issue may also lie with your theme.
Therefore, you might be able to fix the 404 error by replacing your active theme with a default one.
Since you don’t have access to your WordPress admin area, you’ll need to activate a default theme on your server.
Access your site’s files via FTP or File Manager. Then, open your wp-content folder and locate your themes folder.
Rename the folder something like “themes-old†or “themes-disabled.†If all goes well, this should replace your theme with the latest default version on your website (like Twenty Twenty-Two).
Now, head back to the login page. If you can access your site without seeing the 404 error, you know that your theme was to blame.
In this case, it might be best to switch themes. Additionally, it’s a good idea to stick with an official WordPress theme. If you’d prefer to use a third-party theme, make sure it comes from a developer or company that you trust.
5. The WordPress login page is a blank screen
The White Screen of Death (WSoD) is one of the most frustrating login errors because it’s challenging to identify its cause. When you trigger this error, all you will see is a blank white screen.
Typically, the WSoD error is related to PHP or database errors. For instance, you may have added an incorrect line of code to one of your site’s files. If you remember making a recent change in your database, it’s a good idea to return to the file and remove the edits. You can do this quite easily by restoring a WordPress backup from just before you made the changes. If this doesn’t work, there are several solutions that you can try.
Start by clearing your cookies and cache. Disabling your plugins and changing to a default WordPress theme can also fix the problem. We explained how to perform these fixes earlier in this troubleshooting guide.
Solution: Restore a backup of your site
One of the easiest ways to fix the WSoD error is to restore a backup of your site. With a plugin like Jetpack VaultPress Backup, you can easily back up your database and files.
Better yet, you can restore your site from any location, even though you can’t log in. You’ll also be able to view an activity log containing all recent activity on your site. This can help you detect any potential problems.
To restore your site using Jetpack VaultPress Backup, navigate to https://cloud.jetpack.com and open your Activity Log. There, you can either scroll through the events that took place on your site, or use the filters to find a specific one.
Then, click Restore to this point and select the files you want to restore. And that’s it! Simply wait until the restoration process is complete and you’re good to go.
Solution: Enable debug mode
The WSoD is notoriously difficult to troubleshoot because you generally don’t receive any information about the error. That’s why it can be useful to enable debug mode, which can identify the specific sources of the error.
You can enable debug mode using a WordPress plugin like Query Monitor that will do this automatically. Alternatively, you can enable debugging manually by editing your wp-config.php file.
You’ll need to connect to your site’s server using FTP or File Manager. Then, locate the root directory of your site and look for wp-config.php.
Then, find this line at the bottom of the file:
/* That's all, stop editing! Happy publishing. */.
Before this line, add the following code to enable WordPress debug mode:
// Enable WP_DEBUG mode
define( ‘WP_DEBUG’, true );
// Enable Debug logging to the /wp-content/debug.log file
define( ‘WP_DEBUG_LOG’, true );
// Disable display of errors and warnings
define(‘WP_DEBUG_DISPLAY’ false );
Now, revisit your site, and you should be able to see new error messages providing information about the cause of the issue.
Solution: Increase your server memory
One of the most effective solutions to the WSoD error is to adjust your server’s memory limit. That’s because PHP scripts running on your site may be exceeding the maximum memory provided by your hosting plan and causing the login page to time out.
You may be able to contact your web host to adjust your memory limits. You can also expand your server memory manually by editing wp-config.php.
You’ll need to connect to your site using FTP or File Manager. Then, within your public_html folder, find wp-config.php.
Replace “X†with the amount of server memory you want in megabytes. For instance, “128M†will increase this limit to 128 megabytes.
Save your changes. Then, reload your site.
If this hasn’t worked, head back to wp-config.php and increase the memory limit even further. But it’s important to note that most web hosts will not let you exceed a certain amount (especially if you’re on a shared plan).
To avoid this type of login error in the future, it’s best to make a new backup of your site before making important changes to its files. Alternatively, it can be a good idea to trial changes on a staging site first. That way, you can test things out in a safe area without affecting your live content.
6. Lost or forgotten passwords
A lost or forgotten password can also prevent you from logging in to your WordPress site. In this scenario, you’ll see a warning message that says, “invalid email address†or “lost your password?â€.
You can use the link provided to reset your password. But you might not have access to the email address where your link is sent. In this case, you can fix the login error manually.
If the error happens to another user (other than yourself) who can’t access your site, you can do this from your WordPress dashboard. As the site administrator, you’re able to create and manage all user accounts. Go to Users in the admin area.
Find and select the specific user who needs their password reset. Then, scroll down to the bottom of the page where it says Account Management.
Next, click on Set New Password → Generate Password. At this point, you can eitherinsert a custom password or let WordPress generate one for you. Then, select Update Profile to save your changes, and then share the new credentials with the user.
7. WordPress login disabled (too many failed attempts)
The last error that we’ll discuss in this article occurs when there have been too many failed attempts to gain entry to your site. Generally, you’ll only see this error message if you have a plugin that secures your WordPress login page.
For example, you might use a tool that limits your login attempts. Or, you might have a general security plugin installed on your site.
In this case, the only way to fix the login error is to disable the plugin. To do this, you’ll need to access your WordPress site via FTP or File Manager. Then, open your public_html folder and select wp-content.
Next, click on plugins and find the security plugin within the folder. Right-click on the file to rename it. You’ll want to call it something like “example-disabled†to deactivate the individual plugin.
Head to your WordPress login page and see if you can access your site. If you can, then you’ll need to reactivate your plugin from your WordPress dashboard. You can do this by heading to Plugins → Installed Plugins. Then, find the plugin in question and select Activate.
If this plugin continues to cause WordPress login errors, it’s worth looking for an alternative tool. You can also communicate with the plugin developers to see if they can fix the problem.
Site backups: The solution to immediately resolve login errors
The best way to avoid login errors is to use Jetpack VaultPress Backup. If anything goes wrong on your site, it’s easy to restore an earlier version or replace individual files.
As a result, you don’t need to work your way through a bunch of troubleshooting steps to find and fix the issue. Instead, you’ll be able to get your site back up and running in no time.
Not only does VaultPress Backup save your site files, but you’ll also get backups of your entire database, along with WooCommerce customer and order data. What’s more, the copies of your site are stored in a secure location across multiple servers, and encrypted for extra peace of mind.
While WordPress is a reliable content management system, you may encounter occasional login errors that stop you from accessing your website. Fortunately, you can fix all kinds of WordPress errors like 404 errors, 500 errors, redirect loops, and more.
For example, try increasing your server memory limits if you’re faced with a blank WordPress login screen. Alternatively, you’ll need to remove some code from your wp-login.php file to fix any redirect loops. Meanwhile, if cookies are blocked, it’s worth clearing your browser cache.