The ultimate WordPress speed optimization tutorial, opening pages in seconds! Optimization ideas + methods + tools

WordPress speed optimization is a problem for most website builders, it is difficult, while it is difficult to find a systematic and comprehensive optimization tutorial online. Diamo is here to share optimization speed ideas, methods and tools to everyone, so that even a small white person can optimize website speed by himself. This is a really useful WordPress speed optimization tutorial.

A few of the articles are paid content, which is the result of our hard experience. After purchase, you can enjoy human services, if you encounter problems, you can contact WeChat customer service for one-on-one analysis and guidance, and also help you test your website to tell you how you should optimize it.

Why speed optimization?

PinterestPinterest reduced perceived wait time by 40% and directly increased search engine traffic and registrations by 15%. COOK reduced average page load time by 850 ms, resulting in 7% more conversions, 7% less bounce rate, and 10% more visits per visitor page volume.

Google says speed is the key to victory (Details.https://web.dev/why-speed-matters), and in June 2021 willCore Web Vitalsas one of the ranking factors. A slow website also increases the bounce rate and reduces the customer experience, which affects the inquiry/order conversion rate.

Also slow speed can affect Google and other crawlers crawling data, resulting in slow website content inclusion/update, or even not updated/included. It may also cause the mobile device suitability test to fail.

If you put ads like Google on your website, you may waste money by leaving the site before you can display the entire page content after clicking on the page to deduct the fee.

According to Google, as well as studies by several institutions, it has been shown that

1. Page loading speed of more than 2 seconds, when visitors start to lose interest.
2. 47% visitors want pages to load in 2 seconds or less.
3. 40% visitors will abandon sites that take longer than 3 seconds to load.
4. 79% Visitors who are not satisfied with the performance of the site are less likely to revisit.
5. Akamai The study found that a 1-second increase in website latency reduces conversion rates by about 7%.

The chart below shows Google statistics, the green number on the left is the page load time and the green number on the right is the bounce rate. As the page load time increases, the bounce rate also increases significantly.

Why is WordPress stuck?

In fact, WordPress is extremely fast and has been improving its speed. About 40% of the world's websites (including the US White House government website) are made by WordPress, so you can see its charm from this installation volume. Most people don't use it and install a lot of plug-ins and so on to make it bloated and slow.

Many plugins/themes code writing quality is not high, or even focus on aesthetics and functionality without taking into account the performance and speed. There are many plugins available for each function, and different plugins need to be set up to optimize each other according to the situation. White which understand which plug-in fast, how to set. Tossed out by themselves to build out the site is naturally very card.

This article is based on our many foreign trade site optimization experience summary, can help you optimize the site speed to about 1 second, simple page speed can even be optimized to 0.7 seconds. If the speed is not too optimistic after operating according to this tutorial, please use Google speed testpagespeed insightscsAccording to the analysis of which aspects are not done, and then open the tutorial carefully step by step to optimize the next. Speed still can not go up? Please leave a message in the comments below, we will reply one by one.

How to measure website loading time and quality?

Generally speaking, a good computer-side loading time of a website should be controlled within 2~3 seconds.Google SuggestionsThe mobile terminal is controlled within 3 seconds. E-commerce (cross-border e-commerce) websites should try to load the page within 2 seconds on the computer side and 2.5 seconds on the mobile side.

3 seconds is a qualified line, if the page loading time is higher than 3 seconds customers start to leave. We think the loading time should be around 1 second on the computer side and 1.5~2.2 seconds on the mobile side is more beneficial to improve the conversion rate.

DIIAOMAfter using Astra Pro + Elementor Pro to build the website, the loading time of the web page was optimized to finish loading within 1 second on the computer side and within 2 seconds on the mobile side. Google speed test scores 95~100 for computer and mobile.

Measuring the quality of a website can not only look at the loading time, Google Core Web Vitals (Web Core Vitals) is very hot in these years, has become a new generation of Web performance experience and quality indicators.

Core Web Vitals is a scoring project launched by Google to measure the quality of websites and to improve webUser Experience. The specific performance isGoogle Speed Test3 scoring items inside. Largest Contentful Paint (maximum content drawing), theFirst Input Delay (first input delay), the Cumulative Layout Shift (cumulative layout offset).

Click to viewWhat are Core Web Vitals and how to test and optimize themWhat is it?

DIIAOMBuild foreign trade website strictly follow Core Web Vitals requirements, the website passed successfullyGoogle Speed TestLCP, FID, CLS testing.

How to check website speed

There are 2 recommended tools, one isGTmetrixThe other one is the official Google speed measurement toolPagespeedThe two tools are very simple to use, enter the URL and click the button next to it to start the speed test.

Note: These 2 are foreign tools! Because there are fences mainland sites using these 2 tools to detect certainly not allowed, the score is very low. Baidu domestic testing tools test.

GTmetrixFree account can only test the speed of the computer side, the number of tests per day limit (you can register multiple accounts to switch to use). The advantage is that the data is more detailed, with the size and loading time of each resource loaded on the page listed.

PagespeedThe data displayed by the speed measurement is notGTmetrixDetailed, can't see the number, size and time of resources loaded on the page. The advantage is that it can detect data from both computer and mobile and give professional optimization suggestions to improve speed.

The advantages and disadvantages of the 2 tools just complement each other, so it is recommended to use both. Pagespeed is recommended for total page load time and optimization, and GTmetrix is used as an aid to view the loading of page resources in order to adjust the loading order and disable them, etc.

Note: Do not rely too much on the test tool scores! High scores are sometimes not necessarily fast, low scores are not necessarily slow, scores can only be used as a reference. Google official and many speed bloggers have said that the score does not matter.

Focus onCore Web Vitalsand the following data, they determine the first screen content display speed as well as display quality, very important, try to make the following 6 indicators are green.

The above method is to detect the loading speed of specific pages, which needs to be tested manually one by one. If you want to directly find the slowest pages on your website and fix them, you can find the pages with the worst results in your Google Analytics account. Go toGoogle Analytics> "Behavior" > "Site Speed" > "Speed Suggestions" to view page speed suggestions.

WordPress speed optimization ideas

Web page loading is like driving up a hill, server is car engine, PHP, MySQ and so on are gasoline, network is road, car weight is page size, resource loading order is gear, server state is vehicle state. To be fast, you have to choose a fast and stable server, use the latest version of PHP, use CDN, minimize the page code, and optimize the resource loading order.

Servers.The server is the ceiling of speed and is very important. Bad servers have long response times (below), slow data reads, and very much affect page load times. Choose a stable, qualityHighly configurableThe server is the most important first step in building a website.

We recommendVultr HF HostingIt is the most cost effectiveNVMeDisk hosting with high speed and good performance. Click to viewMainstream foreign trade server advantages and disadvantages comparison.

I copied a foreign trade B2B website into 2 speed tests, put Linode server (1H1G) website mobile scores hovering around 70 points, put Vultr HF server (1H1G) website mobile scores directly dry to about 90.

Server software also has a big impact on the speed, if you use Vultr server to install Pagoda Panel +OpenLiteSpeedsoftware, which is much faster. However, OpenLiteSpeed compatibility and stability is not as good as Linux, so it is not recommended at this time.

PHP, MySQ: PHP and MySQL (database) are like gasoline for a car, low version is equivalent to #92 gasoline and high version is equivalent to #98 gasoline. The higher the version the higher the efficiency and the faster the speed.

More than 2G RAM, currently (November 2022) PHP version 8.0 is recommended, some plugins and themes are not compatible with version 8.1. If ≤ 2G memory it is recommended to install PHP 7.4, which is less burdensome to the server.

Database recommended installationMariaDBIt is recommended to install MariaDB version 10.0 for 1-2G memory, 10.4 for 2-8G memory, and the latest version for 8G (or more) memory.

Note: Upgrading PHP may lead to incompatibility of old version plugins/theme, replacing MySQL version may cause data loss. If it is a new website, backup the data and then just toss it. If it is an old website with important data, first backup and then replace it, you do not know how to find someone to get it on Taobao.

CDN.A network is like a road, a good road is the only way a car can go fast. A regular network may be similar to a dirt/concrete road, which may not go fast and may have potholes, but a CDN is equivalent to a highway, which is very fast and smooth. It is recommended to use the freeCloudflare CDN, click to enterCloudflare setup tutorial.

Page Size: The page size is similar to the weight of a car, the lighter the car the faster it runs and the more fuel efficient it is. Try not to use code-heavy plugins and themes, disable some unnecessary code, compress images and videos, etc. There is a tutorial below.

Loading order.Climbing hills have to be powerful in 1st gear, flat roads have to use high-grade speed to be fast. Loading web resources should also be divided into situations to adjust the order of resource loading (delay JS loading, generate key CSS, preload, etc.) to speed. There is a tutorial below.

Server Status.The server is just like a human being, it will die on fire when the pressure is high. Try to reduce the burden on the server, so that it is stable and smooth operation, to protect the page loading speed.

There are many ways to reduce the pressure on the server, and following the tutorial below can basically reduce a lot of unnecessary work on the server and greatly reduce the burden. The following methods can also be used to further reduce the burden on the server.

1. Blocking spam comments, see specificallyThe best way to block WordPress spam comments.;.
2. To block malicious bots, it is recommended to useWordfence Firewall Plugin+Cloudflare (Bot fight mode).
3. Do not use the free enterprise mailboxes given by the server, which will occupy the server resources and have low mail arrival rate.
4. Disable the pre-caching feature of the caching plugin (only the sitemap is cached) or reduce the frequency of pre-caching.

WordPress speed optimization method

The server, PHP/MySQL version mentioned above is handled first. If the server does not work then change a better server (at least 1H2G), not yet used on the CDN recommended to register to useCloudflareThe following is a summary of the results of the study, which will not be repeated here.

Speed optimization ideas and methods are basically the same, are achieved through multiple plug-ins with. The difference is that the use of different plug-ins can achieve the effect and degree of difference, resulting in different results.

The themes/plugins used in the following optimization methods are not the only ones, we just practice and feel they work best and are more suitable for public users so we recommend them. If you have the same function of the plug-in feel good to use, you can continue to use without replacement.

As long as you have mastered the ideas and methods of speed optimization, it does not matter what plug-ins you use. The chef can cook a delicious meal with any tool, and if the tool is good that's even better.

List of themes and plugins used in this speed optimization tutorial

1. Astra ProSubject.
2. Image Compression Plugin;.
3. Wp Rocket or LiteSpeed CacheCaching plug-ins.
4. PerfmattersAsset liquidation plug-in.

1-Reducing server load

People in the weighted state can not run fast, many times the site card because the server card. Website access, form submission, etc. all need to be processed by the server in order to proceed smoothly, the server card website 100% card. We have seen a lot of websites because the server card, slow loading, especially the shared host will limit the CPU frequency.

Now Elementor, Woocommerce, Wp Rocket caching plugins, etc. are more and more demanding on the server, and small configuration servers are easily clogged. If there are slightly more crawlers and more pages are more likely to clog. One of the best ways is to upgrade the server configuration appropriately to be able to handle more concurrency and access.

In addition to upgrading the configuration, optimizing your website to reduce server stress is also very effective and saves money. Here are the methods that we have practiced to effectively reduce server stress.

Use Cloudflare/Server Corn instead of Wp_Corn

WP-Cron is a built-in PHP function for WordPress to perform some scheduled tasks at regular intervals, such as checking Wordpress version, theme and plugin updates, publishing posts at regular intervals, performing some regular tasks of the plugin, etc.

Wp-cron trigger requires visitors to click on the visit, and is not executed automatically. Every visitor will trigger wp_corn, if more people visit the server, the burden will increase and the speed will slow down. Disable Wp-cron and use the server's scheduled task Corn instead, which can greatly reduce the burden on the server and protect the page loading speed.

Disable wp_corn.Use FTP to go to the root folder of the website (the folder with the URL xxx.com), find and edit the wp-config.php fileAdd the following line.

Add define( 'DISABLE_WP_CRON', true);

The following figure shows what it looks like after adding the code↓

Server Corn and Cloudflare Cron Triggers are both enabled.

Enabling Server Corn.Login to your web hosting control panel (cPanel, etc.) and find the Cron Jobs feature. Change the URL in the code below to your URL and copy and paste the whole code in, set it to start every 5 minutes, ().

wget -q -O - https://xxx.com/wp-cron.php?doing_wp_cron >/dev/null 2>&1

Some hosts may have restrictions and force you to use longer intervals (30 minutes and more). That's okay, try to use the lowest possible. Even for your own server, a frequency of 5 or 10 minutes is sufficient.

If you are using the Pagoda panel, just go to Scheduled Tasks and create a scheduled task as shown below. The script content is the same as above.

Enabling Cloudflare Cron Triggers.Cloudflare CDN can also add Cron tasks instead of wp_corn by going to Workers > Manage Workers > Select your Worker > Triggers in the Cloudflare dashboard to open the external link and clickView specific methods.

Using Object Caching (Memcached)

What is object caching? Why must I do object caching for website acceleration?
The website made by WordPress is dynamic website, every time visitors visit the page will involve PHP code running + database query + hard disk file reading, so the page loading speed is slow and the pressure on the server is also high.

Object caching (Memcached method is recommended) is to save the result of PHP code running and database query in memory in advance, and visitors access the page directly to memory (reading efficiency is much faster than hard disk) to get the data without running PHP code and querying database. Therefore, the page loading speed is greatly improved, and the server burden is greatly reduced.

Some websites are fast at first, and then start to slow down after the number of visitors comes up. One of the reasons for this is that the large number of visitors increases the pressure on the server and causes lag. At this point, upgrading the server is the most fundamental solution, and using object caching can also greatly ease the pressure.

Plugins such as Little Rocket also cache PHP and database query results and save them in disk, using files to store data, and the query and write speed is limited by the speed of the hard disk. If the number of query requests (number of visitors) becomes more, it will reach the IO bottleneck of the hard disk, resulting in a slower or even lagging website, which is not as fast as Memcached.

Redis and Memcached are both in-memory caches, and both have the same role, so just enable one of them. Small and medium-sized WordPress sites are better off with Memcached because it handles small amounts of data faster.

If you are using managed hosting such as SiteGround, Cloudways, etc. with Memcached caching enabled by default, you can enable/refresh Memcached caching by installing the companion plugin.

How to enable Memcached caching in WordPress?

To enable Memcached cache, you need to install Memcached PHP extension on the server (host) first, if it is shared hosting, it is basically installed by default, no additional installation is needed. If you are using a VPS host, you need to enter the PHP extension in a panel like Pagoda and install Memcach.ed (Do not install Memcach), it is recommended to also install the OPCache extension to enable OPCache caching.

Enabling method 1.The best way is to installW3 Total Cache ProCaching plugin that automatically + manually refreshes Memcached cache. It includes database caching, object caching, fragment caching, page caching, etc. You can choose Memcached caching method. No additional configuration is required, just install and set it up.

Enable method 2 - In case of managed hosting such as SiteGround, Cloudways, etc., it comes with Memcached cache. You can refresh and control the Memcached cache by installing the caching plugin specified by the host.

Enable Method 3 2- Install MemcacheD Is Your Friend plugin (compatible with PHP 7), download link: https://pan.baidu.com/diiamo Extraction Code: 3ici. After installing and enabling the plugin, you can see the following information in the WordPress backend "Tools" > "Memcached".

Enable Method 4 - UseWPJAM BasichPlugin (compatible with PHP 8.x), after installation into the site file management, will plugins/ wpjam-basic/ template/ directory object-cache.php file copy wp-content directory can be. Tip: This plugin is very cumbersome, the follow-up support is basically not.

Note: Methods 3 and 4 cannot automatically refresh the Memcached cache, and require additional manual cleanup, or wait for expiration (possibly up to 30 days) to automatically clean up. It is recommended that the Memcached cache be turned on after the website is built and online, and if the front of the modified website does not show new content, the Memcached cache needs to be cleaned manually

Reduce the frequency of preloading and removing useless CSS from Wp Rocket

Wp Rocket and other optimization pluginsCache preloadingandGenerate key CSS functionsVery resource intensive server, need to adjust frequency to reduce CPU stress. One customer had a 2H2G VPS server with 3 new websites installed, no visits, simple design, no attacks, stuck 24/7.

It took me a long time to find out that WpWP Rocket v3.12 had improved the preload function to increase the speed, and also caused the problem of high CPU usage. After disabling the preload feature, the server returned to normal immediately.

If you don't want to disable the cache preload feature, you can adjust the preload frequency by adding the following code to "Appearance" > "Theme File Editor" > "functions.php" at the bottom of the page.

If the problem does not improve much after adding the following code, you can continue to reduce the number of URLs and increase the other 2 values to try.

// Change the number of URLs to be preloaded per batch, default is 45, change to 30. ref:Wp fastest cache plugin preload less than 10 URLs per processing.
function preload_batch_size( $value ) {
     $value = 30;
     return $value;
 }
add_filter( 'rocket_preload_cache_pending_jobs_cron_rows_count', 'preload_batch_size' );

// Set the desired cron interval in seconds, default 60 seconds, change to 120.

 function preload_cron_interval( $interval ) {
     $interval = 120;
     return $interval;
 }
add_filter( 'rocket_preload_pending_jobs_cron_interval', 'preload_cron_interval' );

// Change the delay between requests for the same URL, the default is 0.5 seconds, to 0.6 seconds.
 function preload_requests_delay( $delay_between ) {
     $seconds = 0.6;
     $delay_between = $seconds * 1000000;
     return $delay_between;
 }
add_filter( 'rocket_preload_delay_between_requests','preload_requests_delay' );

After adding the code, the server returns to normal after a while, if you click Clearing the cache or generating critical CSS will temporarily fill up the load and return to normal after a while when the preloading/production of critical CSS tasks are completed.

If you have several websites on your server and they all have Wp Rocket installed, you will still get stuck even if you adjust the preload frequency. Because "Delete unused CSS" function can also cause CPU overload ("Loading CSS asynchronously" will not), the frequency needs to be reduced.

Wp Rocket has aOfficial PluginIt can reduce"Delete unused CSS"Frequency, just download and install. The default is to process 100 URLs per run, adjusted to 50 after installation. the required Cron interval is 60 seconds by default, adjusted to 120 seconds after installation.

It is also recommended to disable Wp_Corn and use Server Corn instead, which is helpful to reduce CPU usage, clickView detailed method.

Optimize site configuration, plugins, and page builds

Once when I was building a customer website About Us page, I inserted a page shortcode in the Elementor Tab widget content box, which caused the page to get stuck and not open, and Elementor could not open the page properly. The server was clogged and the CPU was stretched to the limit, and a reboot did not help. After removing the page shortcode, everything was back to normal.

PHP is currently the highest recommended installation version 8.0, 8.1 many plug-ins are not compatible with the theme will be a lot of errors, resulting in lag.

It is recommended to install MySQL version 5.6 with 1-2G memory for fast installation, version 5.7 with 2-4G memory for fast installation, and version 8.0 with 8G or above for compile and fast installation.

Pagoda also need to be configured to play server performance, Swap must be set, MySQL and PHP should also be adjusted according to the operation of the parameters. There are a lot of tutorials in the Pagoda forum, go see more. Recommend the following 2 articles

MySQL Performance Tuning via Pagoda Panel

How to set up Liunx panel to make full use of server performance

Some plug-ins are not written in high quality very card, and even have a dead loop. Encounter site lag first try to close the plug-ins one by one until the problem is solved, find the problem plug-ins one by one to modify the settings that may affect to see if the settings problem, or change the plug-in. ViewWordPress builder plug-in recommendation.

If there are backup plug-ins and auto-scan plug-ins (firewall plug-ins), the backup and auto-scan frequency should not be set so high, otherwise it will cause a great burden to the server.

Disable unnecessary functions and code

WordPress is bound to have a lot of features that don't make sense to us in order to meet the needs of all parties. Clean up useless functions and code can further speed up the site. RecommendedDisable Bloat for WordPress & WooCommercePlug-in.

It can disable up to dozens of redundant functions/code, go to the plugin download page to see the list of specific disables. Some of the disabled functions are the same as those of plugins such as Perfmatters, just enable the corresponding function in one of the plugins.

1 - Disable WOOCOMMERCE expansion
Disable WooCommerce Admin, which will make your backend heavy. Disable all WooCommerce promotions that appear in different places in the admin panel. Reduce the size of CSS and javascript scripts loaded on the front-end and back-end of your site.
3-WOOCOMMERCE Administrator
The functionality of WooCommerce Admin continues to be increasingly integrated into the WooCommerce merchant experience. You can effectively disable WooCommerce Admin, analytics, home screens and other features that slow down your admin panel using the following options.
5 - Disable WooCommerce Administrator
6 - Disable marketing center
7-WOOCOMMERCE Promotion
WooCommerce constantly tries to promote and advertise add-ons by adding nags to your admin panel. Now you can turn them off or hide them at.
More.

2 - Choose fast and light themes and plugins

The best and fastest way to optimize WordPress speed is to solve the bloat from the root, once and for all. WordPress card is mainly because of the installation of slow themes, plug-ins, loading a large number of useless code, and even some code writing irregularities lead to a dead loop. Change to fast themes and plug-ins, try to install less plug-ins, the problem of stuck on a large part of the solution.

Topic.The theme's code is basically the core code, which is widely involved and interdependent, making it difficult or even impossible to disable and delay loading. If you choose a slow theme there is basically not much room for optimization. The theme must be fast, while taking into account some necessary features and a high degree of customization.

Many people choose the theme is to choose more features, complex and good-looking (such as Avada, Woodmart), a test speed silly. Want what features and design by installing plug-ins to achieve, do not use the theme to achieve! Plugin code is generally independent, disable or delayed loading is relatively easy a lot.

If your site's theme is slow, we recommend changing the theme. We recommendAstra proPremium theme, key activated, can be updated online in the background. Lightweight is very fast, deep collection of Woocommerce add many features, point and click to easily complete the setup.

Plug-in.Plugins are also a factor that very much affects the speed of a website. Many plugins are poorly written and load a ton of JS code on the front end. And these codes cannot be disabled and delayed loading. Try to choose lightweight plug-ins that load only a small amount of code on the front end.

We have a website speed optimization service, and when we optimize our clients' websites for speed, we find that they love to install a bunch of plugins. Loading a bunch of JS and CSS on the front end, which is the root cause of the website speed is not fast.

Use no or as little third-party scripts as possible, e.g.
Tracking Scripts-- Google Analytics, Hotjar, etc.
Social Media--Facebook Pixel, "Like" button, etc.
Third Party Advertising-- Google AdSense, Media.net, etc.
Some A/B testing tools-- Google Optimize, VWO, etc.

It is recommended to use as few plugins as possible to achieve as much functionality as possible. For example, useElementor ProYou can use it to create slideshows, article directories, popup ads, forms, etc. There is no need to install plugins with the same functionality. Unless your page is not built with Elementor.

For exampleRank Math Pro Seo plugin already has redirects, 404 monitoring, Schema structure, keyword ranking tracking, installation of Google Analytics code and other functions, use it then a plug-in function top several plug-ins.

Speedy plug-in recommendations.
SEO Plugin Recommendations Rank Math ProThe installation package is less than half the size of Yoast, with less front-end loading code, light weight and full functionality at the same time and bull.

Recommended translation plug-insTranslatePressthat are also lightweight, faster than other translation plugins, and have less front-end loading code.

Article Directory Plugin RecommendationsFixed TOC, lightweight, responsive design.

Form Plugin RecommendationsFluent Forms ProThe fastest form plug-in.

Firewall RecommendationsWordfence, which is the most affordable + most effective + fastest security plug-in for civilians.

Recommended plugins for automatic backup/relocation sitesUpdraftPlusEasy to use, powerful and fast.

Product filter plug-in recommendationPofily, fast, powerful and compatible with the CURCY currency switch plugin.

Currency Switching Plugin RecommendationsCURCY, fast, powerful, easy to use and Pofily compatible.

Wishlist plugin recommendationTI WooCommerce Wishlist, powerful, easy to set up and beautiful.

Cookies alert bar plugin recommended for freeCookie Bar, lightweight front-end loads less than 5kb of code, very fast.

Recommended social sharing pluginsNovasharethat is built for speed, does not affect page loading speed and is powerful at the same time.

For more plugins, please seeWordPress builder plug-in recommendation.

3 - Use system fonts or locally hosted fonts

There are 4 types of regular fonts: system fonts, web-safe fonts, locally hosted fonts, and web fonts. In order of speed, system fonts = web-safe fonts > locally hosted fonts > web fonts.

If you want to improve page loading speed be sure to use system fonts or web-safe fonts, this site uses system fonts. The benefit of Google Fonts and locally hosted fonts is that there are many fonts (including various artistic fonts and custom fonts).

Difference between different types of fonts

System font.It is the default font of the operating system, stored in the local computer (cell phone), can be displayed directly, no need to go to the server to download, so the fastest! Highly recommended to use system fonts, the websites we build are all using system fonts.

System fonts are displayed differently in different operating systems, and there is only one font.

Cybersecurity fonts.They are pre-installed on most operating systems and are called "safe fonts" because they appear the same on different operating systems/devices. They exist inside the operating system, so they load without downloading and are fast and recommended.

Commonly used web security fonts for WordPress are: Arial, Tahoma, Verdana, Times New Roman, Helvetica, Courier New, Georgia, Trebuchet MS, Times.

Locally hosted fonts.The fonts stored inside the web server are called locally hosted fonts, and the font URL is the website URL. When loading web pages, you need to go to the web server to download fonts, and the display speed is slower than system fonts and web security fonts.

Generally, web fonts such as Google Fonts are downloaded and stored on the server to be used as local hosted fonts. The advantage is that you can have multiple fonts like web fonts.

Web fonts (Google Fonts).It refers to third-party fonts, which are stored inside third-party servers, of which Google Fonts is the leader. The red box below is the web font, which is more artistic, so many people use it. Because of the need to go to the third-party server to download fonts, web fonts (Google fonts) are very slow and greatly increase the page loading time.

Generally web fonts will load several thicknesses of fonts, and a page may need to load 4-5 (or even more) font files, which has a very big impact on speed. If you use Google fonts, you have to host them locally, click to viewLocally hosted Google Fonts method.

The picture below is the website of Roadrunner A. The speed test shows that the total page loading time is 5.7 seconds very slow, 13 web fonts are loaded, and the total font loading time is more than 3 seconds. If this site change to use the system fonts, the speed can immediately improve about 3 seconds!

Icon fonts: In fact, in addition to the above 4 fonts there areIcon fonts, is the icon (icon), but made into a font format, the most famous is Font-Awsome. here is not detailed, interested in their own understanding.

Icon fonts are mostly locally hosted and slow to load, and generally load multiple font files at once. Try to use SVG or images instead of icon fonts, the speed is improved a lot.

The old version of Elementor used the locally hosted Font-Awsome icon font for icons, now the new version of Elementor Pro replaces the Font-Awsome icon font with SVG icons much faster!

Check what fonts your site uses, try to use system fonts or web-safe fonts, and use only one font. Try to avoid using Google fonts, especially for domestic websites. If you must use artistic fonts, it is recommended to upload the fonts to the web server for use as locally hosted fonts.

UseGtmetrix.comTo test the speed of your website, enter the URL and click the button to start the test. Click "Waterfall" after the test result, and then click "Font" to see the loading time of the font used on the page.

If the same as the picture below shows blank, the first number of the red box is 0, representing that this page does not download fonts, using the system fonts or network security fonts.

If you are using locally hosted fonts or web fonts, it will show the number of fonts, their names and loading time as the following image. For example, there are 13 fonts loaded, the total font size is 375KB, and the total font loading time is more than 3 seconds.

Click one of the fonts and expand it to see the details. You can see the URL of this font below is https://fonts.gstatic.com/, which is the unified URL of Google fonts, so it is a Google font (web font).

How do I change the font?

Changing fonts requires replacing the theme as well as page builder fonts like Elementor.

To change the theme font you need to go to the theme's font settings. The image below isAstra ThemeFont settings, the first option "Inherit" is the system font, different themes have different font settings location and interface, Baidu yourself.

The red boxes below "Other Systerm Fonts" are web security fonts.

All the fonts displayed under "Google" are Google fonts.

If you build a website using a builder like Elementor, you also need to go change the font. Change the settings first to make it easier to use later.

Go to Elementor settings, check the following 2 items and click "Save Changes".

Edit a random page using Elementor and go to Site Settings.

Go to the global font settings and replace each font. Same as the theme font, the first "default" is the system font, the one under "system" is the network security font, and the one under "Google" is the Google font.

The font in "Layout" should also be changed.

After doing these settings, the set font will be used by default to build new pages in the future.

The section that has been previously built using Elementor now needs to be manually changed back again if you have manually changed the font alone.

First click on the section and the settings box pops up on the left.

Enter "Style" and find "Typography", click the pencil icon on the right to select the desired font pointThat is.

How to host Google Fonts locally?

If you use Google Fonts and other web fonts, it is recommended to open the "Preload Local Fonts" and "Load Google Fonts Locally" functions of Astra Pro theme, which will automatically download the web fonts to the server and turn them into locally hosted fonts, greatly improving the font This will automatically download the web fonts to the server and turn them into locally hosted fonts, which greatly improves the font loading speed. Recommended for youBuy Astra Pro ThemeOne of the reasons for this is that it has thought of every aspect of optimizing speed here.

There are many themes that do not have these 2 features, this can be achieved using the Perfmatters plugin.

Perfmatters General Settings>Fonts Settings, "Local Google Fonts" can be opened to locally host Google Fonts. If you are using AWS, Tencent Cloud CDN or other CDN that will change the URL of the resource, enter the CDN domain name into it, and pay attention to the format: https://cdn.xxx.com.

If you do not use CDN or use Cloudflare CDN will not fill in, it is best to click "Save Changes", automatically refresh the page and then click "Clear Local Fonts" can be locally hosted Google fonts.

After doing this clean up your website and CDN cache, then useGtmetrix.comTest page. Enter the URL and click the button to start the test. Click on "Waterfall" after the test result, and then click on "Font" to see the font loaded on the page. We recommend testing every page!

If the old font is still loaded, then it proves that the previously set font is still called somewhere on the page. Check them one by one, find the culprit content and then replace the font.

4 - Use the theme to build the header and other site-wide content

The header is at the top of the first screen content, and it is loaded and displayed first when the page is accessed. Therefore, the display speed of the header directly determines the display speed of the page and the customer experience, which is very important. Using a theme to build the page is the fastest and best way!

Many people use Elementor to build header, which is convenient, beautiful and powerful, but the disadvantage is that it is a little slow. Because Elementor involves too many interdependent JS and CSS, it can't be uninstalled and can't be loaded late (or it will display errors), so the speed can't be optimized up. Especially on the mobile side, Google speed is always below 90 points.

The same goes for footers, sidebars, popups, etc. Try to use the builder that comes with the theme to build these kinds of content, the speed is the fastest. We built the site even the article/product list page and detail page with the theme builder, and then use the corresponding page in thePerfmattersThe plugin disables all Elementor code, so it's very fast. Google speed test mobile scores can go up to 95-100.

If your header, footer, privacy collection popups, sidebar and other site-wide displays are built using builders like Elementor, it is recommended to use the theme's own builder (Appearance > Customize > Header) to recreate them, removing as much Elementor code as possible.

If you use a theme like Hello Elementor, which has very few features and doesn't do what you want, we recommend switching toAstra Prothemes that are fast and look good. Click to see the ones we made with Astra ProProduct Listing Page / Header / Footer, ,Product Detail Page, ,Article list page, ,Article Detail Page.

If you can, article/product detail pages and listing pages are also created with Astra Pro, which looks good and is fast. Some features of these pages can be achieved by installing separate plugins, for example, the article table of contents on the article detail page can be created withFixed TOCPlugin implementation, product details page inquiry form useFluent FormsProduction.

If you want to add text, buttons, forms, images, videos, tables, etc. to the page, you can useACF field plug-in + Hook code insertion method.

5 - Minimize inline CSS

The advantage of inline CSS is that it loads quickly, faster than file CSS.

If the key CSS that affects the display of content is output as inline CSS, it will speed up the display of the page, so it is very likely that plugins will output inline CSS, and the key CSS generated by Wp Rocket is also output as inline CSS.

Inline CSS has 2 disadvantages, one is that it increases the volume of the DOM, slowing down the parsing and display of the content below; the second is that inline CSS cannot be cached, resulting in customers needing to re-download duplicate inline CSS for each page they visit, and if the output is cached as a file CSS, customers do not need to download the corresponding CSS when they visit the same type of page, which is faster.

The mainstream approach to CSS nowadays is to output CSS to the inside of a file and then use plugins like Perfmatters to generate key CSS to load first, which greatly improves loading speed. Therefore it is very necessary to reduce inline CSS and output CSS to the CSS file.

If using the Astra Pro theme, there is a feature to export the theme CSS to a file, reducing inline CSS.

Elementor's "Advanced Settings" allows you to set the CSS printing method to "External Files" to reduce inline CSS.

If, like me, you like to modify the appearance of certain content by handwriting CSS, please be sure to read the following carefully. Be sure not to add custom CSS to "Appearance" > "Custom CSS/Additional CSS" because the CSS added here will be output as inline CSS to all pages, which will slow down the page load.

The best way is to manually create a few blank CSS files, put them in a child theme folder using FTP or other methods, and then add code to functions.php to link the CSS files in all front-end pages.

Write your custom CSS in that price-blank CSS file, then use the Perfmatters plugin to disable the loading of the corresponding files on pages that don't need those CSS files. This way the manually added CSS will be loaded into the page as a file, and can be generated as key CSS or cached, for speed!

6-Optimize image loading

This is also a top priority for speed optimization, as more than half of the page size is images. Compressed images and delayed image loading can greatly reduce the size of the page, thereby improving the loading speed. It can be said that where the slow speed of the site, the basic will have pictures are not optimized to the problem.

To compress the image size, just install the image compression plugin and set it up, see our other articleThe ultimate WordPress image optimization tutorial (Webp, Avif), optimize the speed must see》. Select the appropriate plug-in and set it up according to the tutorial.

Image delayed loading (lazy loading) is also achieved using plug-ins, the following tutorial mentioned Perfmatters and Wp Rocket plug-ins have image delayed loading feature, select a plug-in to view its settings tutorial image delayed loading section, according to the tutorial settings on it, we recommend the use of Perfmatters delayed loading images.

Note: If the image is loaded via css code, Optimole or the like may not be able to compress it. You need to useTinyJPG online image compression toolCompress the images before uploading them to the website media library for use. After compression, you should check the foreground image compression situation to check for gaps.

7 - Using CDN

CDN is a global distribution network, similar to the express overseas warehouse. For example, if we send courier directly from the mainland to customers around the world is very slow, we can store the goods in advance to each overseas warehouse, and wait for the customer to place an order and then shipped from her nearest warehouse, the distance is shortened and the speed becomes faster.

The use of CDN can greatly reduce the server response time ↓ and speed up the file loading speed. There is also a firewall function to block illegal attacks and malicious crawlers, which is very helpful to reduce the pressure on the server.

Note: Although CDN can shorten server response time, speed up file transfer, and optimize TTFB in Google speed test, it does not improveCore Web VitalsScores. LCP, FID, CLS scores are mainly related to the optimization of the website itself, such as compressing resources, delaying the loading of images, deleting unused assets, loading JS asynchronously, etc.

Cloudflare is the best free CDN inside, the best effect. Cloudflare registration setup tutorial Baidu, very convenient. In the following there is Wp Rocket set up tutorial links, tutorials inside the link Cloudflare method.

Usually editing articles and products will refresh the cache directly, but if you are using elementor or something to modify the page layout and content it is recommended to open Cloudflare firstDeveloper Mode. After opening it will automatically bypass the cache for the next 3 hours and the changes can be displayed in real time, after 3 hours it will automatically close the developer mode and restore the cache.

You can log into the Cloudflare backend to enter the cache settings, open the developer mode. If you use Wp Rocket to link to Cloudflare, open "Developer Mode" in Wp Rocket > Cloudflare, and click Save.

8 - Install WP Optimize to clean up the database

Many uninstalled plugins leave some tables and data in the database so that you can restore the corresponding settings and data when you install those plugins again later. Cleaning up the junk left in the database by the uninstalled plugins can speed up the website and free up disk space.

The database cleanup function of plugins like Wp Rocket or Perfmatters cannot clean the tables left by the uninstalled plugins, so you need to installWp OptimizePlugin Cleanup, it is the best free database cleanup plugin.

Download and install the plug-in and click on the "Database" cleanup screen.

If you have the UpdraftPlus backup plugin installed, check the number 1 there. Then select all the optimizations and click "Run all selected optimizations" to start the optimization. The optimization will take some time, so it is recommended to follow the steps below to perform another optimization at the same time.

Click on "Tables", and check the box if you have the UpdraftPlus backup plugin installed.

When you scroll down the page, you will see the table left by the uninstalled plug-in, click "Delete". For example, the image below shows the residual forms from the previously installed Contact Form7.

Note: Known plugins that use this table nameAll are not installedThe table can only be deleted if there is an existing plugin using the table can not be deleted!

If there are no deleteable tables, it proves that your WordPress database is quite clean.

If you get errors on the site after cleaning the tables, go to the UpdraftPlus backup screen and find the backup data before optimization and click "Restore".

Remember to uninstall the Wp Optimize plugin after completing the above 2 cleanups, usually use Wp Rocket or Perfmatters' automatic database cleanup function.

9 - Optimize Elementor speed

About 1/5 WordPress websites worldwide useElementor(Ele for short) to build, Ele's popularity is evident. The power and flexibility of Ele also leads to bloated code and slow speed. A whole bunch of speed bloggers boycotted it and abandoned it.

Ele's main advantages are efficiency, beauty and power, which areGutenbergFast page builders such as the fast page builder say incomparable. The ultimate goal of making a website is to make money, efficient, beautiful and powerful is the factor that generates benefits. As for the speed there are 100 ways to improve, there is no need to give up Ele for the sake of speed. ele is now and in the future must be the preferred tool for building websites.

In fact Elementor page speed can be very fast! If you useAstra Themeand use the matchingPremium Starter TemplatesTemplate plug-in directly into the Elementor template, compress the images under the installation of the cache plug-in and then use Google speed test, etc. to test the speed will be found very fast!

Most people who say Elementor is slow do not know how to set and optimize, in fact, Ele speed has a very large optimization space, the plug-in team is also very concerned about the speed has been reducing the amount of code to improve loading efficiency. We build all websites unified use Ele, after optimization Google speed score can be achieved 100 points, the computer side of the loading time within 1 second, the cell phone within 2 seconds.

Because of the space problem, we have written a separate article to explain the Elementor speed optimization method, please move to the detailsThe Ultimate Elementor Speed Optimization Technique, Open Page in Seconds.

10- Optimize the search function

Visitors will retrieve the entire database (MySQL) content each time they perform a search, which is not a problem if there are not many pages and visitors to the site. However, as the number of visitors and pages increases (especially for e-commerce sites), this can greatly increase the burden on the server and slow down the speed.

For e-commerce sites, it is especially important to improve the search function. Not only do e-commerce sites have hundreds or thousands of pages, but search is the primary way users find products. The more traffic an e-commerce site has, the higher the performance requirements of the server.

Therefore it is very necessary to optimize the search function to reduce the load on the server and provide a good user experience. Recommended installationSearchWPPlugin, which indexes database content, reduces server load while enhancing WordPress/Elementor search functionality.

You can also use the freeElasticPresssearch plugin, Elasticsearch also builds an index for the database content and then searches that index, which is much faster than regular search to perform database queries.

11-Tuning the firewall

If you compare page loading to express delivery, firewall is equivalent to check the car, greatly improving security but also slow down the speed. Now the network so many malicious crawlers, robot attacks, firewall is a must, we recommend the use ofWordfence Security Plugin.

However, if the firewall is set too strictly will greatly slow down the page loading speed, page corresponding and long loading time. Firewall plug-in settings are also very strict to eat server performance, further affecting the loading speed. It is recommended to test the loading speed of the website after the firewall is turned off and on respectively.

Firewall rules are set strictly at the beginning, run for a period of time to check the interception logs to determine the malicious crawlers and illegal estimates. Then turn down the firewall level and run again for a period of time to check the logs to determine the setting balance point.

Some blocking crawlers and other plug-ins will more or less affect the speed, to test the speed of the site in different plug-ins enabled / disabled, some trade-offs appropriate to give up some plug-ins and features.

12-delete unused CSS, JS

WordPress is a product for the masses, and a product that meets the needs of the vast majority of users is destined to be bloated. WordPress sites are bound to produce assets (JS, CSS) that are useless for our sites.

In our experience, by cleaning up useless CSS, JS can reduce the website by 1/3~1/2 code! Just this one initiative can greatly improve the speed of the site! The role of the asset cleanup plugin is to clean up each page of useless code, greatly reducing the size of the page to speed up the page loading speed.

The most famous, powerful and useful asset cleanup plugins are notPerfmattersIt's a great way to disable useless assets, generate critical CSS, delay loading JS, delay loading images, preload resources, etc. It's great for website acceleration! Click to viewTutorial on the use of Perfmatters settingsWe will explain the optimization ideas and steps and methods. We mainly explain the optimization ideas and optimization steps and methods, so that everyone can master the skills themselves, and learn to optimize on their own.

13 - Installing the cache plugin

When someone visits your WordPress website, the server needs to execute PHP and query the database to retrieve data, and finally output the result into an HTML page for visitors to view. This process involves a lot of steps, and the slow speed also increases the burden on the server.

Caching works by storing a static HTML version of each page and serving it directly to visitors, eliminating most PHP runs and SQL queries and thus greatly improving page load speed.

It is recommended to install Wp Rocket caching plugin, which is currently the best caching plugin in terms of compatibility + acceleration + ease of use, perfect for white users. In case of LiteSpeed server, it is recommended to install the freeLiteSpeed CacheA caching plugin that works no worse than Wp Rocket.

Wp Rocket with Coudflare CDN effect bar. Click to downloadWp Rocket pluginClick to viewWp Rocket setup tutorialCoudflare settings also affect the speed of the site, their own Baidu settings tutorial.

If it's an Nginx server and the site doesn't have a login/membership function, you can tryEnabling Nginx fastcgi_cache cachingThis application implements page staticization from the Nginx level. Effectively improves the concurrency of the site, reduces PHP runtime and request response time, and greatly improves page load speed. The speedup effect is better than plugins like Wp Rocket.

14-Generating critical CSS, delayed loading JS

The removal of useless assets mentioned in step 11 above is to disable useless JS and CSS files, leaving those CSS files which also contain some useless CSS, if you can not load or delay the loading of this part of useless CSS can further improve the speed, the role of generating key CSS is here.

Like useless CSS, each JS file (including inline JS) also has some JS that does not play a role in the page display, but is only responsible for functional implementation. If this part of the non-critical JS delayed loading, can greatly reduce the pre-load content + save JS parsing time, can greatly improve the speed. If your website Google speed mobile scores have not been up, a large reason is the JS loading badly caused, optimize the JS can improve the score.

Both Wp Rocket and Perfmatters plugins have "Generate key CSS"and"Delayed loading JS"function, there are many other excellent also have these 2 functions. Select 1 of the plug-ins to enable these 2 features on the line, the same function do not enable in more than one plug-in or there will be a conflict.

Different plugins generate key CSS and delayed loading JS in different ways and with different effects. We recommend using Perfmatters to generate key CSS and delayed loading JS, which we found to be more powerful and better after comparing experiments.

Click to viewPerfmatters asynchronous/delayed loading JS setup tutorialClick to viewPerfmatters generates key CSS settings tutorials. These 2 are just tutorials for setting up, and the corresponding usage methods are inPerfmatters Tutorials section.

Perfmatters acceleration effect is better, the setting is also more complicated, if the white can not see or change to use Wp Rocket. small rocket setting is much simpler, the effect is also good. Click to viewWp Rocket generates critical CSS and deferred loading JS tutorials.

Advanced Advanced Optimization Tutorial (paid)

If you follow the above tutorial to optimize in place, the site speed should improve a lot, there may be some places that have not been optimized in place.Google Speed TestMobile scores have not been going up. Tools are dead, the site and ideas are alive, according to their ownSite StatusTargeted optimization is the best way to achieve the best results.

The degree of proficiency in the use of plug-ins and their own optimization ideas also have a great impact on the acceleration effect, the tutorial contains high-level optimization ideas, optimization techniques, and advanced use of plug-ins, so that your site speed optimization effect to the next level.

Click to viewAdvanced Advanced Optimization Tutorial.

Check the optimization effect

This is the end of the wordpress speed optimization tutorial, optimization immediately after useGoogle Speed Check ToolTest the speed of the website. If the optimization is in place the score on the computer side should be above 95 with a total loading time of 1 second or less. Mobile scores around 95 with a total loading time of 2 seconds or less.

For domestic websites, it is recommended to use17CEDetection speed.

If the score and total load time is not ideal, check the speed measurement tool optimization recommendations to see what is not optimized in place, targeted optimization on the line. If you have any questions or encounter difficulties below the comments message.