How to achieve the maximum speed of WordPress Gutenberg website?
Jan 21 / 2021
This way you can keep track of what scripts are loaded on a page.
Using web browser friendly images formats
Web-friendly formats are jpeg 2000, jpeg, XR, and webp. To generate .webp images you can use plugins like:
To make sure that your browser loads the right image format, go to the Network tab on the page Inspector.
.webp images are much lighter and more browser-friendly, resulting in a much shorter loading time.
Unfortunately, Internet Explorer and Safari versions older than 14.0 don’t offer support for these formats. On the good side, most plugins handle these exceptions and load an appropriate format depending on the browser the site is viewed on.
Lazy loading images
You can use lazy loading to decrease the time before the page becomes available to a user. This feature makes the browser load the necessary assets only when they are needed instead of loading them all at once.
Again, you can achieve it with several plugins.
Alternatively, you can use premade lazy loading libraries. And from WordPress v. 5.5, you don’t have to worry about it at all because lazy loading is available out of the box.
Handling unoptimized and oversized images
Every image uploaded to the site should be as small as possible. Its size should be adjusted to the requirements of a user’s device. In another way, the maximum speed of WordPress Gutenberg is very hard to achieve.
The following plugins let you handle lossless image optimization.
These plugins work in the background, so it’s a good practice to install them early on so that you don’t have to do a mass optimization later.
If you don’t want to use plugins, you can use other optimization tools like:
The size of images that load with the page depends mostly on properly set image thumbnails. It’s a common habit to upload camera or stock images straight into the media library. These images are often huge and can drastically decrease page loading speed. That’s why it’s so important to define thumbnails depending on your needs. This is a task for a web developer coding the website.
Server response time
This problem can be usually solved with a caching plugin:
- W3 Total Cache
- WP Fastest Cache
If none of these plugins help fix the server response time issue. Gere are a few more hints to achieve the maximum speed of WordPress Gutenberg:
- Try turning off plugins that aren’t key to the website functionality,
- Update PHP to the newest version
- Consider switching to a more efficient hosting provider.
Maximum speed of WordPress Gutenberg: Summary
This was a step-by-step guide on how to maximize your WordPress Gutenberg website performance. Remember, that once you load all external scripts, like Google Tag Manager, Google Optimize, or Analytics, the final result may end up being a little lower. It’s important to keep your theme clean and only install plugins and scripts that are actually important to your website’s functionality. But despite all that, you will notice a huge performance improvement after dealing with the issues above!
If you have any questions, just give us a shout. Our developers are here to assist you.
Check how to test website speed.