Stand with Ukraine. Fight for freedom and democracy

Donate

How to Speed Up WordPress Website and Crocoblock Plugins

From this tutorial, you will learn how to speed up your WordPress website and possible reasons why it might load slowly.

Tutorial requirements:

  • WordPress website;
  • Access to the admin panel of your hosting provider with full rights.

Slow websites are incredibly frustrating for any developer and business owner because low performance not only ruins the user experience but also significantly worsens the site’s ranking by search engines. This guide will go through the main factors influencing page load speed and how to optimize them.

WordPress Performance Essentials

1 Step — Themes, plugins, and updates

A fast, well-coded WordPress theme with a mobile-first approach is vital for website performance, so it’s essential to research and accomplish all the tests before using a particular theme.

For testing website loading speed and getting insights, use Pagespeed Insights from Google or GTMetrix; it’s recommended to do it right after the theme installation when no plugins are there yet. It will help you to set a “checkpoint” and understand whether your theme is lightweight or not. Use Geekflare tools to get even more insights and details about your website’s performance. 

If you plan to use many plugins, always choose the most lightweight mobile-first and recently updated theme. When installing plugins, don’t forget to read their reviews and check how often they are updated. You can also use instruments like WP Hive

After installing all the necessary plugins, it’s a good idea to check the website speed again. If there is a significant drop in performance at this stage, install a Query Monitor plugin, go to Queries > Queries by Component, and sort things by “Time.” Thus, you will see which plugins might slow down a loading speed. 

In case you suspect plugin conflict, deactivate all the plugins and then reactivate one by one and check whether the website works correctly, as well as run performance tests to find out which of the plugins causes a problem. 

Updates 

Update a PHP version. 

Updating a PHP version is essential if you want to boost website performance because each next version is 10-15% faster than the previous and more stable. 

Update a WordPress version, plugins, and the theme.

Better performance, bug fixes, and better security (not to mention new features) come with each new release, so don’t forget to update WordPress, plugins, and the theme. Ensure you do all your code edits in a child theme, not on the parent theme, which is being updated; otherwise, you can lose those edits after updating.

2 Step — Understanding your website type

Understanding your website type is vital for future planning of the resources it will require and choosing optimization tools and techniques. There are two types of sites: static and dynamic. The first one doesn’t use a server (and is based only on HTML, CSS, and JavaScript), and the second uses a server and database. It’s a classic (and a bit outdated) approach to this terminology. 

However, there’s been a new approach to those definitions for some time. 

  • Websites with a lot of dynamic (or adaptive) content are considered dynamic, as this content changes depending on the user’s behavior, preferences, interaction patterns, and other factors. Examples: booking, appointment, listing, eCommerce websites. 
  • While websites, where information doesn’t change frequently, are considered static. Examples: blogs and corporate sites. 

The approach to optimization of those two categories is slightly different, and when this difference is not clear for website developers, they might have a lot of frustration trying to use the same approach to dynamic sites as to static. 

The main difference is caching. While for static sites, it can dramatically improve loading speed, for dynamic sites, various caching plugins often cause big problems if used with default settings. 

Dynamic websites offer much bigger functionality and a next-level user experience. But not all the sites should be dynamic; some just don’t need it because they have different goals (e.g., some blogs). 

Dynamic websites generate much more database requests, and due to their specifics, there are normally more users per unit of time. Their sessions might be shorter but include more interactions and more page loads (e.g., visitors can read one blog page for a few minutes, not causing any additional requests to the server; while if it’s a shop, there are normally many requests per minute: using filters, going through many pages, etc.). And the content they request is impossible to cache because it’s so different. It’s called uncacheable content. But using advanced CDN settings and other techniques, it can still be cached.

Yet, it’s essential to understand that applying the same logic as static content caching will simply not work and even cause slowing down the site or errors.

Static vs. dynamic websites

3 Step — PHP environment, server environment, and hosting provider

PHP environment

PHP memory limit is a per-script memory limit. Increasing it will not help to process more scripts simultaneously. Typically, a default memory limit value is 128-256M. 

If you see the following error, check the php.ini settings on the hosting panel.

Fatal error: Allowed memory size of x bytes exhausted (tried to allocate x bytes)

But remember that if you see this error quite frequently, even after increasing the PHP memory limit to 256-512M, the problem might be in the scripts’ quality, or you are using really powerful plugins. Also, it’s important to remember that increasing the PHP memory limit will decrease the number of concurrent processes. 

Server environment

Most of the hosting providers use Apache, Nginx, or LiteSpeed servers. All of them have their advantages and fans, but when we talk about highly-loaded projects, it’s much better with many concurrent requests. Nginx and LiteSpeed will be the best choice because of their better performance and caching modules. You can choose a hosting provider or a plan that uses them even if you don’t use a dedicated server but just shared hosting. Of course, if your website is highly dynamic and the performance needs some improvements. 

Memcached and Redis are the most popular in-memory databases, and they can help to deal with processing a large amount of data. They can help with shared hosting plans too, and the best idea is to consult your hosting provider’s tech support to help you choose which one of those two will work best for your project. 

Hosting and hardware

If the hosting provider declares that it uses SSD hard discs, it’s a good sign. Those days, HDD storage type can definitely be called obsolete. 

Also, if the hosting provider states that it uses HTTP/2 (and HTTP/3, which is coming soon), it’s very good for loading speed. 

Cloud hosting from reputable IaaS providers like Google Cloud or AWS can guarantee the best speed, geographical accessibility, scalability, and stability. There are cheaper providers that are also good, such as Digital Ocean, Vultr, or Linode. The best way to use them (if you are not a professional DevOps engineer) is to use managed hosting providers that do all the dirty work for you, including adding firewalls, advanced caching, and other perks. 

If you don’t use cloud hosting or CDN, consider having your website’s server located as close as possible to your existing and potential clients. 

But remember that a reputable and performance-focused hosting provider offering elaborate solutions and good tech support is an extremely important component of the performance and success of your site. Consider using a good managed WordPress hosting because they are specialized exactly on what this CMS requires and all the specific ways of its optimization. 

WordPress Front End Optimization and Cache Management

1 Step — Images and video optimization

Optimizing images is essential to improve a loading speed dramatically but doesn’t require any elaborated knowledge and is easy to do. 

A standard resolution for screen images is 72 PPI; for Retina, it’s bigger, but it’s better to deliver such images separately. There’s a WP Retina 2x plugin which helps to do so. 

Many tools help to perform a lossless compression for images (compress them without losing quality). Such services are available online and in the form of plugins. 

Using SVG format for logos, icons, illustrations, and other similar images instead of PNG will not only improve page loading time but also enhance the image quality because it’s a vector format that can be resized to the biggest screens without even a little loss of quality, and at the same time the file size is extremely small.  

It’s a bad practice to store images on third-party websites and embed them because it significantly increases page loading speed. 

Caching and preloading, as well as lazy load, are great practices for images and videos. But remember that lazy loading is applicable when you have many images or videos, not just a few, and they are located below the first screen. 

Regarding videos, it’s better not to store big videos on your hosting if their size is somewhere more than 2-5M and WebM or MPEG-4 formats. Use YouTube, Vimeo, and similar services to embed them. The same with audio files (podcasts): use third-party services for storing them.

2 Step — CSS optimization

In most cases, CSS, JavaScript, and HTML optimization is done with the help of plugins. But it’s important to understand the idea of what those plugins do to set the right settings properly. 

The most frequent reason for poor loading speed, as all the performance-measuring tools detect it, is Render Blocking elements. It means that the page can’t start rendering before all the styles, scripts, images, etc., are still loading. So, basically, the goal of optimization is to reduce everything that blocks rendering: 

  • removing unused scripts and duplicating lines of code;
  • minifying CSS files;
  • Gzip-compressing of CSS files;
  • using wp_enqueue_style() function in functions.php to link all the necessary styles instead of placing <link href=”style.css” rel=”stylesheet”> in the header.php. 
  • it’s a good practice to split styles for print, screen, and media into different files and then fetch them separately when needed using the “media” parameter. Some styles which are rarely used (like the “print” one) can be enqueued in the footer, where it will definitely doesn’t block rendering. 

All of this can be done with the help of WordPress optimization plugins. Also, they will help with extracting critical CSS and placing it above the fold (but you should consider that sometimes it doesn’t work properly and causes errors). 

Well-written CSS also saves loading time, and there are some things to pay attention to:

  • using modern layout techniques (grid and flexbox instead of float);
  • using CSS animations where possible instead of JavaScript animations;

avoiding the frequent use of very complex selectors (e.g., .main > .main.container > div#specialDiv > menu#mymenu > p:nth-child(even)), as they take time to parse, etc.

3 Step — HTML Optimization

Best practices for optimizing your HTML files:

  • trying not to use inline styles and scripts;
  • using Gzip compression;
  • loading scripts after CSS, so the page will load much faster;
  • making sure the HTML code is valid and concise. 

HTML plays the role of a “skeleton” of the website, so its successful rendering basically depends on the optimized and fast load of CSS and JavaScript. 

4 Step — Scripts optimization

There are many plugins that clog the call stack with lots and lots of JavaScript files, with their dependencies and other things that need to be processed, so it takes time. That’s why choose plugins that don’t load your website with too many libraries and use a module approach when you can simply switch off unused modules. 

For example, all the Crocoblock plugins use this approach, and you can easily switch on and off modules and widgets. Don’t forget to check them out at Crocoblock > JetPlugins Settings > “The Plugin” or in the plugins’ individual menu (as in the case with JetEngine). 

JetEngine Modules
JetEngine Modules that can be activated and deactivated

There are also many modules you can switch on and off in the JetTricks dashboard. 

JetTricks plugin widgets
Many Crocoblock users forget to switch off widgets they don’t use, especially quite heavy such as Parallax or Particles

The following steps are important for optimizing scripts:

  • minifying JS files;
  • using Gzip
  • excluding unused library components;
  • avoiding linking too many external libraries and scripts located on other servers, as it takes extra time to load;
  • placing JavaScript and links to JS files and libraries to the footer to avoid blocking page rendering;
  • asynchronous (async) load of scripts is important because when a browser “sees” the script, it can’t continue loading the page until it executes the script;
  • defer property is similar to asynchronous, but it works only for external scripts; it is also being executed just before the full page is loaded, so it doesn’t block rendering but still doesn’t behave so independently as async

Good optimization plugins with the right settings can successfully do this work for you. 

5 Step — Fonts loading

Fonts can slow down webpages if they are not optimized, so here are some tips on how to make your fonts load faster:

  • use only the subsets you need (if you don’t need Greek or Vietnamese, for example, make sure they don’t load those characters sets);
  • preload fonts;
  • use modern font formats like WOFF;
  • try to self-host fonts;
  • use a proper font-display property (“swap” and “optiona” would be the best in most cases;
  • using a “local” property, so if the user has this font on their computer, it will save time for font loading from a server.

6 Step — Caching and CDNs

There are several types of cache, and each of them does its own job. Let’s have a look at a few of them:

  1. Site cache is there to store the data which the user loaded when they opened the page for the first time. 
  2. Browser cache is the type of cache that stores website files on the browser side (and the user has control over them).
    Beware that site and browser cache can show outdated data and, in some cases, cause errors if one plugin uses data generated by another, but that data is outdated. 
  3. Server cache is a general name for CDN cache, object cache (connected to databases), and opcode cache (dealing with PHP requests).

CDN is a great solution for dynamic sites because scripts can generate dynamic content straight from the cache, which is physically located as nearest to the user as possible. CDNs store static content (images, CSS, JavaScript files), so they don’t interfere with other types of cache and not causing conflicts.

Beware that site and browser cache can show outdated data and, in some cases, cause errors if one plugin uses data generated by another, but that data is outdated. 

If you have a highly dynamic website, you should, first of all, pay attention to the server cache. As a rule, tools and settings for dealing with it can be found in the hosting admin panel. Also, in this case, fast hosting is the key to performance.

Other Tips for Better Performance

Tidying up WordPress 

There are two main things to do for tidying up the website to boost its performance:

  1. Removing unused plugins and themes. 
  2. Cleaning up the database. 

Cleaning a database reduces its size, speeding up the website and reducing CPU usage. There are a few main categories of junk that clog the database:  

  • old revisions;
  • trashed posts, comments, and spam;
  • orphaned metadata;
  • expired transient options;
  • tables left behind old plugins;
  • temporary (overhead) records created by plugins that collect a lot of data (mostly SEO and analytics plugins).

Use database cleaning plugins. Don’t forget to back up your website before using them, and also be careful with the settings.   

Using pagination

Pagination in categories or even for long posts considerably improves page loading speed, especially if there’s heavy content. In addition, it enhances user experience and can be referred to as SEO best practice (but only if implemented correctly, with rel=”canonical” links for pagination pages and other things to consider).

Limiting post revisions 

By default, WordPress saves all the post revisions, and they clog the database. It will gradually affect the overall website performance. So, it’s better to limit this number. For this, go to wp-config.php on the root of the WordPress folder, find this line, and limit the number of revisions, let’s say, to 3: 

define( 'WP_POST_REVISIONS', 3 );

Reduce the number of server calls

The server call takes place each time the page needs an additional piece of information, like images, CSS, or JS files, from the server. Thereby, the more such calls are generated, the longer it takes for the page to load. There are different ways to optimize a number of server calls by using:

  • pagination;
  • lazy load and defer attribute;
  • CSS sprites;
  • combining scripts used in the page in one file (which can be done with the help of the optimization plugins);
  • deactivating rarely used plugins and deleting and replacing the plugins producing too many server calls;
  • avoiding using images and other resources from external websites (such as embedded images, analytics code, and share buttons);
  • using container-specific image sizes.

Avoiding redirects

Each redirect takes extra time to process, so it’s better to avoid them when they are not essential, especially when they lead to other redirects.

Link types: prefetch, prerender, preload

DNS-prefetch is used for third-party links; it helps to resolve domain names before the browser issues the request or the user clicks on the link. It can be used for links to Google Fonts, tag manager, etc., by adding a rel= “dns-prefetch” attribute to the link. If there are a lot of external links on the site, prefetching can significantly improve loading speed. It works even better with rel= “preconnect.” It should be placed in the <head> section of the website. 

Prefetch is used for internal links when you are sure the user will definitely click on that link, so you instruct the browser to load that page in its cache. Using it makes sense when this page is heavy, and you want to speed up the process and improve the user experience. Add rel= “prefetch” to implement it. 

Prerender is a directive that tells the browser to fully load the page the link is pointing to, with all the connected resources. It’s used for pages that you are completely sure the user will open next. The difference with prefetching is that the browser starts to perform prerendering the moment it reads this directive, while it does prefetch when it has some “free time.” The syntax is rel= “prerender.” 

Preload is useful when you want to preload and store in the browser’s cache a file that will be used very soon. So, if it’s already preloaded, the process of requesting it from the server will not block rendering. It’s used mostly for CSS and font files.

The syntax looks like this:

<link rel="preload" href="style.css" as="style">

And “as” attribute is mandatory, because it instructs the browser about the loading priority

NOTE!
Do not overuse preload and prerender – it will cause slowing down the site instead of speeding it up. Also, use prefetch with caution. 

Caching plugins

Don’t use several caching plugins on one website: it will cause a conflict. Also, remember that in most cases, such plugins don’t work “out-of-the-box,” requiring attention to the settings and testing if everything works well on the website and whether the performance has really improved after implementation.

JetPlugins Speed Optimization Tips

Using the principles mentioned above, you can deal with Crocoblock plugins, too. The key point here is that most JetPlugins work with dynamic content, so it’s essential to take into account the specifics of dealing with it.

Caching dynamic content: main principles

  1. Remember that the ultimate goal is to let a browser paint the page HTML as fast as possible to reduce the TTFB (Time To First Byte) value. It means that some dynamic content and JavaScript files involved in its delivery should be loaded or executed after the cached content or simply with delay when the HTML has already been painted. 
  2. Many scripts are not required for rendering a page. That’s why it’s better to use the “Load Scripts on User Interaction” option (most optimization plugins have it). But some pages might not work correctly with such settings, so test thoroughly after implementing and consider using this method only for particular scripts. 
  3. Pages almost entirely made of dynamically generated content should not be cached using the site or browser cache. It can be done by excluding such URLs from caching using the optimization plugin’s settings. 
  4. Consider disabling Preloading for such pages, too. 
  5. Avoid using Elementor > Advanced > Responsive settings in the page editor, especially to set up conditional visibility for large objects with some dynamic elements inside. For example, containers with JetEngine listings, JetMenu, etc. Remember that this Elementor feature only hides certain blocks using the display:none; property, but it still loads it. So, if you set up the Responsive view in the Elementor interface for three devices (mobile, tablet, and desktop), the page will load all three containers but hide two of them. Apparently, it will increase the loading time dramatically. 
  6. Remember that if the element is hidden, it still loads and launches all the styles and scripts connected to it. It means that it consumes loading time and resources. 
  7. You can use AJAX to render page triggers (so the dynamic content will be loaded after the cached content). This option is available in some caching plugins. 
  8. Choose server caching (mentioned above in this article) over caching with the help of the plugins for highly dynamic websites. You still can and should use such plugins but not to the same extent and rely more on the server caching tools to decrease the loading time. 
NOTE
Check out this article about WP Rocket settings for Crocoblock plugins. You can use the same principles when setting up other caching plugins.

Let’s go through the speed optimization tips for some of the Crocoblock plugins. 

JetEngine optimization tips

  • Don’t insert too many listings on the same page because it generates additional server calls and slows down a page. Create a new listing for that particular page instead. 
  • Use the Dynamic Visibility module when needed (instead of other similar tools for visibility).
  • Don’t use lazy load for listings and images located above the fold – it doesn’t make sense and will visually slow down a page load. 
  • Deactivate Preload in your caching plugin settings if JetEngine is the reason for the page load speed decrease. 
  • Switch off the modules you don’t use.

JetTabs, JetTricks, JetBlog, JetElements, JetBlocks optimization tips

  • Switch off widgets and extensions you don’t use. Remember that some of them load quite heavy JavaScript libraries (e.g., Parallax or Particles JetTricks widgets). Go to Crocoblock > JetPlugin Settings > {the plugin} > Widgets and disable what you will not use. 
  • You can speed up Elementor when it deals with those plugins using Crocoblock’s Editor Load Level. It changes a set of options for the Elementor Style tab when using JetTabs, JetTricks, JetBlog, and JetBlocks widgets. It can be found at Crocoblock > JetPlugins Settings > {the plugin} > General Settings. 
Editor load level Crocoblock
  • It’s better not to use JetTabs on the main page because this page, as a rule, already has a lot of things. All the tabs load a lot of content (most of it is hidden, but it still loads). 
  • Be cautious with sliders, especially those placed above the fold, and remember that they require some scripts and styles to run them, not to mention that they load images; that’s why sliders might block page rendering.

JetMenu optimization tips

  • If the menu doesn’t load properly on mobile devices, the problem is, most likely, in the cache. Enable the “Separate cache files for mobile devices” option. Or don’t cache the menu at all. 
  • Don’t use Elementor’s Responsive feature for displaying mobile and tablet menus. It dramatically decreases the loading speed because all the menus will load simultaneously, even if some will be invisible. 
  • For building responsive menus, use breakpoints available in the Menu widget settings. For more adjustments, go to Crocoblock > JetPlugins Settings > JetMenu > Mobile Render settings
  • Don’t insert unoptimized images and many different listings in the Mega menu. Create a custom listing for the menu instead. 
  • Keep in mind that each listing grid in the header or footer menu (in the Mega menu) is an additional server call that will be performed on each page of your website, and it will slow down a page load time. So, if you insert listings in the Mega menu, consider using lazy load to process them. 
  • If the “Load Scripts on User Interaction” is on in your caching plugin’s settings, exclude the following files (by copying and pasting the code below in the “exceptions” area in your caching plugin settings):
/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/elementor-pro/
/elementor/
/jet-blog/assets/js/lib/slick/slick.min.js
/jet-elements/
/jet-menu/
elementorFrontendConfig
ElementorProFrontendConfig
hasJetBlogPlaylist
JetEngineSettings
jetMenuPublicSettings

Crocoblock plugins can deal with a large amount of data and don’t require any kind of very specific speed optimization techniques and tricks: just general principles and common sense will be enough. Also, if using them with Elementor, don’t forget to optimize Elementor, too.

We hope those tips and tricks will help you to boost your website performance.