WordPress speed optimization is a problem for most of the website builders, it is difficult and at the same time it is hard to find systematic and comprehensive optimization tutorials online. Diarmo is here to share speed optimization ideas, methods and tools to you, so that even a small person can optimize the speed of the website by himself. This is a really useful WordPress speed optimization tutorial.
This article shares the various factors that affect the speed of a website from all aspects of theBasic Optimization. Those sites with page load times of 4 seconds or more can be extremely speedy if optimized strictly according to this tutorial.
If the site itself loads in 2~3 seconds, the speed won't be too bad, and the speed may not improve much after optimizing according to this tutorial. Suggest to checkAdvanced Advanced Optimization Tutorial (paid), which can optimize the loading speed to 0.6~1 seconds.
Optimization content is more comprehensive, complex, do not need to adopt all the optimization recommendations. Please according to the website situation (which aspects of slow) appropriate to adopt the corresponding optimization recommendations optimization on the line. If you have more time and energy, adopt all the optimization suggestions, step by step operation of the site better.
There is paid content at the bottom of the article, which is the result of our hard experience. After purchase, you can enjoy human services, such as problems can be contacted WeChat customer service one-on-one analysis and guidance, but also to help you test the site to tell you how it should be optimized.
Why speed optimization?
PinterestReduced perceived wait time by 40% and directly increased search engine traffic and registrations by 15%.COOK reduced average page load time by 850 milliseconds, resulting in an increase in conversions by 7%, a decrease in bounce rate by 7%, and an increase in page volume visits per visitor by 10%.
Google says speed is the key to winning (Details:https://web.dev/why-speed-matters), and in June 2021 will beCore Web Vitalsas one of the ranking factors. Slow websites also increase bounce rates and decrease customer experience, which in turn affects the conversion rate of inquiries/orders.
Also slowness can affect crawlers such as Google crawling data, resulting in slow or even no content inclusion/update/inclusion on the site. It can also lead to failing mobile device suitability tests.
If you put Google and other advertisements on your website, you may waste money by having your customers click on the page and leave the website before displaying the full page content.
According to Google as well as some organizations:
- Pages load faster than 2 seconds and visitors start to lose interest;
- 47% visitors expect a web page to load in 2 seconds or less;
- 40% visitors will abandon sites that take longer than 3 seconds to load;
- 79% Visitors who are dissatisfied with the performance of a website are less likely to revisit;
- Akamai Studies have found that a 1 second increase in site latency decreases 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 is always improving its speed. The world's 40% or so of the site (including the U.S. White House government website) are WordPress to do, from the installation of this know its charm. It's the fact that most people don't use it and install a bunch of plugins and such that causes it to bloat and slow down.
Many plugins/themes are written with low quality code, even focusing only on aesthetics and functionality without taking into account performance and speed. There are many plugins for each function and different plugins need to be set up and optimized for each other. White which understand which plug-in fast, how to set up. Tossing to build out the website is naturally very stuck.
This article according to our many foreign trade site optimization experience summary, can help you to 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 test!pagespeed insightscsAccording to the analysis of which aspects are not done, and then flip the tutorial carefully step by step to optimize the next. The speed still can't get up? Please leave a message in the comments below, we will reply one by one.
How do you measure website load time and quality?
Generally speaking, the loading time of a good website on the computer side should be controlled within 2~3 seconds.Google SuggestThe mobile terminal is controlled within 3 seconds. E-commerce (cross-border e-commerce) website should try to achieve the computer side of the page loaded within 2 seconds, the cell phone side of 2.5 seconds.
3 seconds is a qualified line, if the page loading time is higher than 3 seconds customers start to leave. We feel that the loading time should be around 1 second for the computer terminal and 1.5~2.2 seconds for the mobile terminal which is more conducive to increase the conversion rate.
Diarmuid (name)Using Astra Pro + Elementor Pro to build the website, after optimization, the webpage loads in 1 second on the computer side and 2 seconds on the mobile side. Google speed test computer and cell phone scores 95~100 points.
Measuring the quality of a website can not just look at the loading time, Google Core Web Vitals (Web Core Vitals) has been very hot in the past few years, has become a new generation of Web performance experience and quality indicators.
Core Web Vitals is a scoring program launched by Google to measure the quality of websites and to measure and improve webuser experience. This is manifested in the followingGoogle speed testThere are 3 scoring items in there: Largest Contentful Paint (Maximum content drawn),First Input Delay (first input delay), Cumulative Layout Shift (Cumulative Layout Offset).
Click to viewTheWhat are Core Web Vitals and how to test, optimize them?The
Diarmuid (name)Build a foreign trade website strictly follow Core Web Vitals requirements, the site successfully through theGoogle speed testLCP, FID, CLS testing.
A high Google Speed Score doesn't necessarily mean a fast loading speed, for example, the total loading time of 5.2 seconds on the cell phone in the picture below is so slow that a higher score is not practical.
Google Chart belowPC-basedThe test, score and total load time are good. However, as you can see from the screenshot on the right, the menu didn't load completely and displayed abnormally. The test result is not the time it takes to fully load the page, but the result at some point during the loading process.
How to check website speed
There are 2 tools recommended, one isGTmetrixThe other one is the official Google speedometer.PagespeedThe 2 tools are very simple to use, enter the URL and click the button next to it to start measuring the speed.
Note: These 2 are foreign tools! Because there is a walled mainland site using these 2 tools to detect certainly not allowed, low scores. Domestic sites are recommended to useWebmaster Tools Speed TestThe
GTmetrixFree account can only test the speed of the computer side, the daily limit of the number of tests (you can register multiple accounts to switch to use). The advantage is that the data is more detailed, there is a list of page loading the size of each resource and load time.
PagespeedThe speed display doesn'tGTmetrixDetailed, can't see the number, size and time of resources loaded on the page. The advantage is that it can detect the data on both computer and mobile and give professional optimization suggestions to improve the speed.
The advantages and disadvantages of the two tools just complement each other, it is recommended to use. Total page load time and optimization is recommended to Pagespeed prevail, GTmetrix as an auxiliary to view the page resource loading situation in order to adjust the loading order and disable and so on.
Note: Don't rely too much on the score of the testing tool! High scores are sometimes not necessarily fast, low scores are not necessarily slow, and scores can only be used as a reference. Google official and many speed bloggers say that the score is not important.
Focus onCore Web Vitalsand the data below, they determine the speed of the first screen content display as well as the display quality, very important, try to make the 6 indicators below all green.
The above method detects the loading speed of specific pages and requires manual testing one by one. If you want to directly find the slowest page on your website and fix it, you can find the page with the worst results in your Google Analytics account. Go toGoogle Analytics> "Behavior" > "Site Speed" > "Speed Suggestions" to see page speed suggestions.
WordPress Speed Optimization Ideas
Web page loading is like driving up a hill, the server is the car engine, PHP, MySQ and so on is the gasoline, the network is the road, the car weight is the page size, the resource loading order is the gear, the server state is the vehicle state. To be fast, you have to choose a fast and stable server, use the latest version of PHP, use CDN, try to reduce the page code, optimize the resource loading order.
Server: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, high qualityhigh configurationThe server is the most important first step in building a website.
We recommendVultr High Frequency HostingIt's the best value for money.NVMeDisk hosting with fast performance. Click to viewMainstream foreign trade server advantages and disadvantages comparisonThe
I duplicated a foreign trade B2B website into 2 copies for speed testing, the mobile score of the website put on Linode server (1H1G) hovered around 70, and the mobile score of the website put on Vultr HF server (1H1G) dried up directly to around 90.
Server software also has a big impact on speed, if you use a 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, with a low version equivalent to #92 gasoline and a high version equivalent to #98 gasoline. The more efficient the version, the faster the speed.
PHP benchmarks found WordPress to be about 47.101 TP3T faster than PHP 8.0 on PHP 8.1 . PHP 8.0 was again much faster than 7.4, processing over 501 TP3T of requests per second.
Currently (2023) it is recommended to use PHP 8.0 with more than 2G of RAM, some plugins and themes are not compatible with version 8.1/8.2. If ≤ 2G RAM it is recommended to install PHP 7.4 for a smaller burden on the server.
Database recommended installationMariaDB(math.) genusFaster than MySQL1-2G RAM is recommended to install MariaDB version 10.0, 2-8G RAM to install 10.4, and 8G (or more) RAM to install the latest version. If you use Pagoda Panel, many systems are not compatible with MariaDB, it is recommended to install MySQL.
Note: Upgrading PHP may lead to incompatibility with old versions of plugins/themes, and replacing MySQL version may cause data loss. If it is a new website, back up the data and then casually toss it does not matter. If the old site has important data, backup data and then operate, they do not understand can go to Taobao to find someone to get.
CDN:A network is like a road, a good road is the only way a car can go fast. Conventional network may be similar to a dirt/concrete road, which is not fast and may have potholes. CDN is equivalent to a highway, which is very fast and smooth. It is recommended to use a freeCloudflare CDN, click to enterCloudflare Setup TutorialThe
paper size: Page size is similar to car weight, the lighter the car the faster it runs and saves gas. Try not to use code-heavy plugins and themes, disable some unnecessary code, compress images and videos, etc. There are tutorials below.
Loading order:Climbing a hill, you have to use the 1st gear to be powerful, and on a flat road, you have to use the high gear to be fast. Load web resources should also adjust the order of resource loading (delay JS loading, generate key CSS, preload, etc.) to speed. There are tutorials below.
Server Status:A server is like a human being, a lot of stress will kill the fire. 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 server stress, and here are a few ways you can reduce server stress. To reduce the server load further, see the detailed tutorial below.
- Block spam comments, check it outThe best way to block spam comments on WordPress is to beat Captcha!.;
- Intercepting malicious bots is recommendedWordfence Firewall Plugin+Cloudflare (Bot fight mode);
- Don't use the free enterprise mailbox given by the server, it will take up server resources and the mail arrival rate is low;
- Adjust the pre-cache function of the caching plugin (caching only sitemaps) or reduce the frequency of pre-caching.
WordPress Speed Optimization Methods
The above mentioned server, PHP/MySQL version to deal with first. If the server does not work then change a better server (at least 1H2G), not yet used CDN recommended to register to use theCloudflare, which will not be repeated here.
Speed optimization ideas and methods are basically similar, are achieved through the cooperation of multiple plug-ins. The difference is that the use of different plug-ins can do the effect and degree of difference, resulting in different results.
The following optimization method using the theme/plugin is not unique, just our practice that they are the best results, more suitable for mass users so recommended. 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 master the ideas and methods of speed optimization, it does not matter what plug-ins you use. Chef with what tools can cook a delicious meal, if the tool is good that's even better.
List of themes and plugins used in this speed optimization tutorial
- Astra ProTopics;
- Image Compression Plugin.;
- Wp Rocket maybe LiteSpeed CacheCache plugin;
- PerfmattersAsset Cleanup Plugin;
1 - Reducing the burden on servers
People can't run fast under heavy load, and many times the website is stuck because the server is stuck. Website access, form submission, etc. need to be processed by the server in order to be carried out smoothly, the server card website 100% card. We have seen many websites are because the server card, slow loading, especially shared host will limit the CPU frequency.
Now Elementor, Woocommerce, Wp Rocket caching plug-ins and other server requirements are increasingly high, small configuration server is very easy to clog . If slightly more crawlers, more pages are more likely to clog. One of the best ways is to properly upgrade the server configuration, can handle more concurrency and access.
In addition to upgrading the configuration, optimizing the website to reduce server pressure is also very effective and saves money. Here are the methods that we have practiced to effectively reduce server pressure.
Using Cloudflare/Server Cron instead of Wp_Cron
WP_Cron is a built-in PHP function for WordPress to perform some scheduled tasks at regular intervals, such as checking for updates to Wordpress versions, themes and plugins, posting articles at regular intervals, performing some timed tasks for plugins and so on.
The trigger of wp-cron needs visitors to click to visit, it will not be executed automatically. Every visitor will trigger wp_Cron, if more people visit the server will increase the burden and slow down the speed. Disable Wp-cron and replace it with the server's scheduled task Cron, which can greatly reduce the burden on the server and guarantee the page loading speed.
Disable wp_Cron:Using FTP, go to the root folder of the website (the folder with the URL xxx.com), find and edit the wp-config.php file.
, just add the following line.
define( 'DISABLE_WP_CRON', true).Full Selection Codemake a copy of
Below is what it looks like after adding the code ↓
Server Cron and Cloudflare Cron Triggers are both enabled.
Enable server Cron:Log into your web hosting control panel (cPanel, etc.) and find the Cron Jobs feature. Change the URL in the code below to your URL then copy and paste the entire code in, set it to start every 5 minutes, ().
wget -q -O - https://xxx.com/wp-cron.php?doing_wp_cron >/dev/null 2>&1Full Selection Codemake a copy of
Some hosts may have restrictions and force you to use longer intervals (30 minutes and up). That's okay, try to use the lowest possible. Even for your own server, 5 or 10 minutes is more than enough.
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.
Enable Cloudflare Cron Triggers:Cloudflare CDN can also add Cron tasks instead of wp_Cron, in the Cloudflare dashboard Workers > Manage Workers > select your Worker > Triggers to open the external link, click theView Specific MethodsThe
Reduce Wp Rocket Preloading and Remove Useless CSS Frequency
Wp Rocket and other optimization plug-insCache Preloadingrespond in singingGenerate key CSS functionsVery intensive on server resources, need to adjust frequency to reduce CPU pressure. One customer had a 2H2G VPS server with 3 new websites installed, no visitors, simple design, no attacks, stuck 24/7.
It took me a long time of troubleshooting to realize that the improved preloading feature in WpWP Rocket v3.12 improves the speed, but also leads to the problem of high CPU usage. After disabling the preloading feature the server returned to normal immediately.
Update 2024.08.14: The new version of Wp Rocket improves the preload function, when the server resources are not enough will automatically reduce the number of preloaded URLs, you can not add code to adjust, depending on personal preference.
If you don't want to disable cache preloading, you can adjust the preloading 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 preloaded per batch, default is 45, change to 20. ref:Wp fastest cache plugin preload less than 10 URLs per process. function preload_batch_size( $value ) { $value = 20; return $value ; }add_filter( 'rocket_preload_cache_pending_jobs_cron_rows_count', 'preload_batch_size' );//Set the desired cron interval in seconds, default is 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' );// Modify the delay between requests to the same URL from the default of 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' );Full Selection Codemake a copy of
The server returns to normal after a while after adding the code, if you click on the 
Clearing the cache or generating critical CSS will temporarily fill up, and return to normal after a while when the preloading/production of critical CSS tasks are complete.
If you have several sites on your server and all have Wp Rocket installed, you will still get stuck even if you adjust the preload frequency. Because."Remove unused CSS"The function can also cause CPU overload ("Asynchronous loading of CSS" will not), the frequency needs to be reduced.
Wp Rocket has aOfficial PluginIt can be reduced."Remove unused CSS"Frequency, download and install it. Default is 100 URLs processed per run, adjusted to 50 after installation. required Cron interval is 60 seconds by default, adjusted to 120 seconds after installation.
It is also recommended to disable Wp_Cron in favor of Server Cron, which is helpful in reducing CPU usage by clicking on theView detailed methodThe
Optimize site configuration, plugins, and page builds
Once when building a customer website About Us page, inserted the page shortcode in the content box of Elementor Tab widget, resulting in the page stuck and could not be opened, and Elementor could not open the page normally. Elementor could not open the page properly. The server was jammed, CPU was full, and rebooting did not help. After removing the page shortcode, everything is back to normal.
Database / PHP version is too high will also increase the server load, the jamming situation. PHP is currently recommended to install version 8.1 performance is better, 7.4 is starting to lag behind, 8.2 and above some plug-ins theme is not compatible with a lot of errors will occur.
Low-configuration servers with high versions of databases can also cause lagging. 1-2G RAM is recommended to install the database MySQL version 5.6, Extreme Installation. 2-4G RAM is recommended to install version 5.7, Extreme Installation. 8G or above is recommended to install version 8.0, Compile Extreme Installation.
Pagoda should also be configured to perform well as a server, Swap must be set, and MySQL and PHP should have their parameters adjusted according to the operation. Pagoda forum has a lot of tutorials, more to see. Recommend the following 2 articles
MySQL Performance Tuning with Pagoda Panel
How to set up Liunx panels to fully utilize server performance.
Some plug-ins are not written with high quality and are very stuck, and even have a dead loop. Encounter site lag first try to close the plug-ins one by one until the problem is solved, to find the problem plug-ins one by one to modify the settings that may affect the settings to see if the problem is set, or change a plug-in. ViewRecommended plug-ins for WordPressThe
If you have backup plugin and auto scan plugin (firewall plugin), don't set the backup and auto scan frequency so high, or it will cause a big burden to the server.
2- Choose fast and lightweight themes and plugins
WordPress speed optimization is the best and fastest way to solve the bloat from the root cause, once and for all.WordPress card is mainly because of the installation of slow themes, plug-ins, load a lot of useless code, and even some code writing irregularities lead to a dead loop. Change to fast themes and plug-ins, try to install as few plug-ins as possible, the problem of lagging on a large part of the solution.
Topics:Theme code is basically the core code, involved in a wide range of interdependent, difficult or even impossible to disable and delayed loading. If you choose a slow theme basically not much room for optimization. Theme must be selected fast, while taking into account some of the necessary features, high degree of customization.
A lot of people choose a theme with a lot of features and complexity (e.g. Avada, Woodmart), and then they test the speed and are dumbfounded. What you want to function and design through the installation of plug-ins to realize, do not use the theme to realize! Plug-in code is generally independent, disabled or delayed loading relatively easy.
If your website's theme is slow, it is recommended to change it. We recommendAstra proPremium theme, key activation, can be updated online in the background. Lightweight very fast, deep collection of Woocommerce added a lot of new features, point and click to easily complete the setup.
Plug-ins:Plugins are also a factor that very much affects the speed of a website. Many plugins are written in poor quality and load a bunch of JS code on the front end. And these codes cannot be disabled, delayed loading. Try to choose lightweight plug-ins that load only a small amount of code on the front end.
We have optimized website speed services, and when we optimize our clients' website speed, we find that they love to install a bunch of plugins. Load a bunch of JS, CSS in the front end, which is the root cause of the website speed is not fast.
Try not to use or minimize the use of third-party scripts, these plugins very much affect the loading speed, for example:
Traffic Tracking/Conversion Plugin--Google Analytics, Hotjar, etc.
Social Media Plugins--Facebook Pixel, "like" button, and more.
Third-party advertising plug-ins--Google AdSense, Media.net, etc.
Some A/B testing tools--Google Optimize, VWO, etc.
Online Customer Service Plugin--Tawk.To, Tidio, Live Chat and more.
It is recommended to use as few plugins as possible to achieve as much functionality as possible. For example, using theElementor ProYou can use it to create slideshows, article catalogs, popup ads, forms, etc. There's no need to install a plugin that does the same thing. Unless your page is not built with Elementor.
for exampleRank Math Pro Seo plugin has been equipped with redirection, 404 monitoring, Schema structure, keyword ranking tracking, installation of Google Analytics code and other functions, the use of it then a plug-in function top several plug-ins.
Speed plugin recommendations:
SEO Plugin Recommendations Rank Math ProThe installer is less than half the size of Yoast, with less front-end loaded code, and lightweight while being full-featured and beefy;
Recommended Translation Plug-insTranslatePress, is also lightweight, faster than other translation plugins, and has less front-end loading code;
Article Directory Plugin RecommendationsFixed TOC, lightweight, responsive design;
Forms plugin recommendationsFluent Forms Pro, No. The fastest form (form) plug-ins;
Firewall RecommendationsWordfenceThis is the most affordable + effective + fastest security plugin for civilians;
Automatic Backup Plugin / Relocation Site Plugin RecommendationsUpdraftPlusEasy to use powerful and fast;
Product Filtering Plugin RecommendationsPofilyIt is fast, powerful, and compatible with the CURCY Currency Switch plugin;
Currency Switching Plugin RecommendationsCURCYIt is fast, powerful, easy to use and Pofily compatible;
Wishlist Plugin RecommendationsTI WooCommerce WishlistIt's powerful, easy to set up, and aesthetically pleasing;
Cookies Alert Bar plugin recommended freeCookie Bar, the lightweight front-end loads less than 5kb of code, which is very fast;
Social Sharing Plugin RecommendationsNovashare, built for speed, does not affect the page loading speed, while powerful;
For more plugins check outRecommended plug-ins for WordPressThe
3 - Don't install too many tracking, e-commerce plugins
When optimizing an e-commerce site, all other pages are very fast Google test mobile and computer side go to 95+. However, the product detail page is very slow on the mobile side, with a rating of about 30 and a total load time of more than 4 seconds. Check the source code found Facebook ads, Google tracking code, paypal payment code and other third-party platform JS code add up to nearly 400KB, can not be optimized.
Payment plug-ins and form plug-ins also have a few, in the final analysis is not familiar with building a website, what all want what all installed. In fact, most of the sites at the beginning of a long period of time without traffic, the installation of these tracking plug-ins do not make any sense is purely to slow down the speed of the site, reduce the conversion rate.
Linking to Google Webmaster Tools and Google Analytics is enough to pass theRank Math SEO PluginLink words can also host the code locally without affecting the speed. Less installation of front-end functional plug-ins, choose lightweight speed plug-ins is the best website speed optimization method, from the source to solve the problem.
4-Use system fonts or locally hosted fonts
Fonts have a great impact on website speed. There are 4 types of regular fonts: system fonts, web safe fonts, locally hosted fonts, and web fonts. Sort by speed from top to bottom: system fonts > Web Safe Fonts > Locally Hosted Fonts > Web Fonts. If you want to improve the page loading speed you must use system fonts or web safe fonts, this site diiamo.cn uses system fonts.
The good thing about Google Fonts and locally hosted fonts is that there are a lot of fonts (including various art fonts and custom fonts). A font has various thicknesses (400 and 700 are commonly used) and effects (italics, etc.), so several font files are included. Loading only the thickness and character set files used can greatly reduce the total size of the font file.
You should also avoid loading fonts repeatedly, for example, if the theme is set to load Montserrat fonts, and Elementor also loads Montserrat fonts, it will result in 2 loads. Use Google Chrome's developer tools (press F12) and go to the "Network" section to see what fonts are loaded in total and if there are any duplicates.
Difference between different types of fonts
System Fonts:It is the default font of the operating system, which is stored in the local computer (cell phone), and can be displayed directly, without having to go to the server to download, so the fastest! It is highly recommended to use system fonts, we build websites using system fonts.
System fonts are displayed differently in different operating systems and there is only one font.
| default font | operating system |
|---|---|
| -apple-system (San Francisco) | iOS Safari, macOS Safari, macOS Firefox |
| system-ui | macOS Chrome, Windows Chrome (new versions) |
| BlinkMacSystemFont (San Francisco) | macOS Chrome |
| Segoe UI | Windows Vista and newer |
| Tahoma | Windows XP |
| Roboto | Android, Chrome OS |
| Oxygen / Oxygen-Sans | KDE |
| Fira Sans | Firefox OS |
| Droid Sans | Android (old versions) |
| Ubuntu | Ubuntu |
| Cantarell | GNOME |
| Helvetica Neue | macOS versions < 10.11 |
| Arial | All |
| sans-serif | All |
Cybersecurity Fonts:These fonts 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 quickly without downloading and are recommended.
The commonly used web-safe 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 web site URL. When loading a web page, you need to go to the web server to download the fonts, and the display speed is slower than the system fonts and web-safe fonts.
Generally, web fonts such as Google Fonts are downloaded and stored on a server to be used as locally hosted fonts. The advantage is that it has the same variety of fonts as the web fonts, but also takes into account the loading speed.
Web Fonts (Google Fonts):It refers to third-party fonts, which are stored inside third-party servers, with Google Fonts being the leader. The red box below is a web font, which is more artistic, so many people use it. Because you need to go to a third-party server to download fonts, web fonts (Google Fonts) are very slow, greatly increasing page load time.
Generally web fonts will load several thick and thin fonts, a page may need to load 4-5 (or even more) font files, a font volume may channel 200-300kb, which has a very large impact on speed. If you use Google Fonts, you have to host it locally, click to viewLocal Hosting Google Fonts MethodThe
The picture below is a roadrunner's website, the speed test shows that the total page load time of 5.7 seconds is very slow, loaded 13 web fonts, the total font load time of more than 3 seconds. If this site is changed to use system fonts, the speed can be immediately increased by about 3 seconds!
Icon fonts: In fact, in addition to the above 4 fonts there are alsoIcon fonts, that is, the following picture of this icon (icon), but made into a font format, the most famous is Font-Awsome. here do not go into detail, interested in their own understanding.
Icon fonts are mostly locally hosted and slow to load, and usually load multiple font files at once. Try to use SVGs, images orCSS IconsInstead of icon fonts, it's a lot faster.
Older versions of Elementor used locally hosted Font-Awsome icon fonts for their icons, now the new version of Elementor Pro replaces the Font-Awsome icon fonts with SVG icons much faster!
Check what fonts your website uses, try to use system fonts or web safe fonts and only use one font. Try to avoid using Google fonts, especially for domestic websites. If you have to use artistic fonts, it is recommended to upload the fonts to your web server and use them as locally hosted fonts.
utilizationGtmetrix.comTo test the speed of your website, enter the URL and click the button to start the test. After the test results click on "Waterfall", and then click on "Font" to see the loading time of the fonts used on the page.
If it is blank like the picture below, and the first number in the red box is 0, it means that there is no font downloaded on this page, and system fonts or web-safe fonts are used.
If you are using locally hosted fonts or web fonts, it will show the number of fonts, their names and loading time just like the picture below. For example, in the following picture, 13 fonts are loaded, the total size of fonts is 375KB, and the total loading time of fonts is more than 3 seconds.
Click on one of the fonts and expand it to see the details. You can see that the URL for this font below is https://gapis.geekzu.org/g-fonts/, which is the unified URL for Google fonts, so it is a Google font (web font).
How do I change the font?
As I said above, you need to change the system font or locally hosted font to make it faster, here is the tutorial to change the font. Note: To change fonts, you need to change the theme and page builder fonts like Elementor.
Changing theme fonts: go to the theme's font settings. The following picture isAstra ThemeFont settings, the first option "inheritance" is the system fonts, different themes of the font settings location and interface is not the same, their own Baidu.
The red boxes under "Other Systerm Fonts" are web-safe fonts.
All the fonts displayed under "Google" are Google fonts.
If you're using a builder like Elementor to build your site, you'll need to change the fonts as well. For new website, we suggest you to set the font as below, it will inherit the theme settings directly without any additional settings. 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 Global Font Settings and replace the fonts for each one. As with the theme fonts, the first "Default" is the system font, the one under "System" is the web security font, and the one under "Google" is the Google font.
The fonts in "Typography" should also be changed.
After making these settings, new pages will be built with the set fonts by default.
Sections that have been previously built with Elementor will now need to manually change the fonts individually if you have manually changed the fonts individually, not using the default settings.
First, click on the section and the settings box pops up on the left.
Go to "Style" to find "Typography", click on the pencil icon on the right to choose the desired font point
Ready to go.
How to host Google Fonts locally?
If you use Google Fonts and other web fonts, we recommend you 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, which will greatly improve the loading speed of the fonts. It will automatically download the web fonts to the server and turn them into locally hosted fonts, which will greatly improve the loading speed. We recommend you toBuy Astra Pro ThemeOne of the reasons for this is here, optimizing all aspects of speed it has thought of.
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 host Google fonts locally. If you use AWS, Tencent Cloud CDN or other CDNs that change the URL of the resource, enter the CDN domain name and note the format: https://cdn.xxx.com.
If you don't use CDN or use Cloudflare CDN, you don't need to fill in the form, it's better to click "Save Changes", and then click "Clear Local Fonts" to host Google Fonts locally after automatically refreshing the page.
If you are using other web fonts you can download the fonts first and use Elementor Pro's Custom Fonts feature to install the fonts to a website that will also be hosted locally and can be cached by a CDN.
Using Cloudflare Fonts
If you're using the Cloudflare CDN, you can use its Cloudflare Fonts feature to locally host Google Fonts by clicking theView Cloudflare Fonts detailsThe
Enable Cloudflare Fonts as per the image below, when enabled it will inline Google Fonts styles directly on the HTML page to prevent fetching them from Google servers. Additionally, it caches fonts at the Cloudflare edge to reduce latency. That is, it hosts Google Fonts at the CDN level.
After you do this clean up your website and CDN cache and use theGtmetrix.comTest page. Enter the URL and click the button to start the test. Click on "Waterfall" after the test results, and then click on "Font" to see the fonts loaded on the page. It is recommended to test every page!
If it still loads the old fonts, then it proves that somewhere on the page the previously set fonts are still being called. Check them one by one to find the culprit content before replacing the font.
5-Use themes to build headers and other site-wide content
The header is at the top of the first screen, and it is prioritized to be loaded and displayed when the page is accessed. Therefore, the display speed of the header directly determines the display speed of the page as well as 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 the header, very convenient and beautiful, powerful, the disadvantage is that the speed is a little slow. Because Elementor involves too many interdependent JS, CSS, can not be uninstalled, can not be delayed loading (otherwise it will display errors), so the speed can not be optimized up. Especially for cell phones, Google speed test is always below 90 points.
The same goes for footers, sidebars, popups, etc., these kinds of content are built as fast as possible using the builder that comes with the theme. The site we built even uses the theme to build the article/product listings and details pages, and then the corresponding pages are built using thePerfmattersThe plugin disables all Elementor code, so it's very fast. Google speed test mobile scores can go to 95-100.
If your header, footer, privacy collection popups, sidebars, and other site-wide displays are built using a builder like Elementor, it's recommended to recreate them using the theme's own builder (Appearance > Customize > Header), removing as much Elementor code as possible.
If you're using a theme like Hello Elementor, which has very few features and doesn't do what you want, it's recommended to switch to theAstra ProThemes that are fast and look good. Click to see what we made with Astra ProProduct Listing Page/Header/Footer,Product Detail Page,Article Listings Page,Article detail pageThe
If you can, article/product detail pages and listings pages can also be created in Astra Pro, which looks good and is fast. Some of the functionality of these pages can be realized by installing plugins separately, for example, the article directory of the article detail page can be created using theFixed TOCPlugin implementation, product detail page inquiry form useFluent FormsProduction.
Those who want to add text, buttons, forms, images, videos, tables, etc. to a page can use theACF Field Plugin + Hook Code Insertion MethodsThe
6-Disable unnecessary functions and codes
WordPress is bound to have a lot of features that don't make sense to us in order to fulfill the needs of all parties. Cleaning up useless features and code can further speed up your website. RecommendedDisable Bloat for WordPress & WooCommercePlug-ins.
It is possible to disable up to dozens of redundant features/codes, go to the plugin download page to see the list of specific disables. Some of the disabled features are the same as plugins like Perfmatters, just enable the appropriate feature in one of the plugins.
1-Disable WOOCOMMERCE expansion
2 - Disable WooCommerce Admin, this 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 website.
3-WOOCOMMERCE Administrator
4-WooCommerce Admin features continue to be increasingly integrated into the WooCommerce merchant experience. Using the options below, you can effectively disable WooCommerce administration, analytics, home screens, and other features that slow down your admin panel:
5-Disabling the WooCommerce Administrator
6 - Disable marketing centers
7-WOOCOMMERCE Promotions
8-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:
More.
7 - Minimize inline CSS
Inline CSS is the CSS that is output to the HTML, whereas the CSS that is output to a separate CSS file is file CSS.The advantage of inline CSS is that it loads quickly, faster than file CSS.
If the key CSS that affects the content display is output as inline CSS it will speed up the page display, so very many plug-ins will output inline CSS, and the key CSS generated by Wp Rocket is also output as inline CSS.
Inline CSS has 2 drawbacks, one is that it will increase the volume of the DOM, slowing down the content of the resolution and display speed; the second is that the inline CSS can not be cached, resulting in the customer to visit each page need to re-download a duplicate of the inline CSS, if the output is a file CSS is cached after the customer to visit the same type of page do not need to download the corresponding CSS, faster.
Now the mainstream processing of CSS is the CSS output to the file inside, and then use Perfmatters and other plug-ins to generate key CSS priority loading, greatly improving the loading speed. Therefore it is necessary to reduce inline CSS, CSS output to the CSS file.
If you use 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 minimize inline CSS.
If you're like me and you like to hand-write CSS to modify the appearance of certain content, be sure to read the following carefully. Be sure not to add custom CSS to Appearance > Custom CSS/Extra CSS, as CSS added here will be exported to all pages as inline CSS, which will slow down page loading.
The best way to do this is to manually create a few blank CSS files, place them in a child theme folder using FTP, etc., and then add code to functions.php to link the CSS files on all front-end pages.
Write the custom CSS inside the blank CSS file, and then use the Perfmatters plugin to disable the loading of the corresponding file on pages that don't need to use those CSS files. This manually added CSS will be loaded into the page in the form of a file, can be generated key CSS can also be cached, the fastest!
8-Optimize image loading
This is also a top priority for speed optimization, as more than half of the page size is images. Compression of images and delayed image loading can greatly reduce the page size, thus improving loading speed. It can be said that any slow website, basically will have pictures are not optimized in place.
Most of the newbies do out of the site have a picture volume is too large problem, the following figure is a speed optimization of our customers' website, the picture volume is too large stuck. png format should be changed to jpg, and then compressed under the volume of the page size reduction of at least more than 9M, the speed of a lot of fast.
Compression of the image size just need to install the image compression plugin and set up on the line, see our other articleUltimate WordPress Image Optimization Tutorials (Webp, Avif), Must See for Optimization SpeedThe. Select the appropriate plugin and set it up as per the tutorial.
Image delayed loading (lazy loading) also use plug-ins to achieve the following tutorials mentioned Perfmatters and Wp Rocket plug-ins have a delayed loading of images, select a plug-in to view its settings tutorials delayed loading of images in the part of the tutorials, according to the tutorials on the line, we recommend the use of Perfmatters delayed loading of images.
Note: If the image is loaded via css code, Optimole or the like may not compress it. You need to use e.g.TinyJPG online image compression toolCompress the images before uploading them to the website media library for use. After compression, check the frontend image compression to check for gaps.
9-Use of CDN
CDN is a global distribution network, similar to the express overseas warehouse. For example, if we directly from the mainland to send express delivery to customers around the world is very slow, we can store the goods in advance to the various overseas warehouses, and so the customer orders from the nearest warehouse to her shipment, the distance shortens the speed becomes faster.
The use of CDN can greatly shorten the server response time ↓, speed up the file loading speed. There is also a firewall function can intercept illegal attacks and malicious crawlers, to reduce server pressure is very helpful.
Note: Although CDNs can shorten server response times, speed up file transfers, and optimize TTFB in Google speed tests, they do not improveCore Web VitalsScores.The LCP, FID, and CLS scores are mainly related to the quality of the site itself, such as compressing resources, delaying the loading of images, removing unused assets, and loading JS asynchronously.
Cloudflare is a free CDN inside the best, the best results. Even better than some of the paid CDN effect, more than 200 global nodes. Cloudflare registration setup tutorial Baidu, very convenient. In the following Wp Rocket setup tutorial link, tutorial inside the link Cloudflare method.
Normally, editing articles and products will refresh the cache directly, but if you are using elementor or the like to modify the layout and content of the page, it is recommended to open Cloudflare'sdeveloper mode. When you turn it on it will automatically bypass the cache for the next 3 hours and the changes can be shown in real time, after 3 hours it will automatically turn off the developer mode and restore the cache.
You can log into Cloudflare backend to access cache settings and turn on developer mode. If you use Wp Rocket to link to Cloudflare, turn on "Developer Mode" in Wp Rocket > Cloudflare and click Save.
Tip: Some members reflect the use of Cloudflare after the Google speed test and the actual open speed slower, that's because CF has not finished caching, wait a few hours and then test the speed to try.
When I measured it again after some time, the speed became 0.8 seconds ↓.
10-Hosted Videos
Most of the newbies do website video will be directly uploaded to the media library, the front-end direct call to play ↓, so the speed will be very slow! And very eat server performance, resulting in server jams further slow down the loading speed. There are also some people like to put in the banner auto-playing background video, appear to have class.
Video with the picture as very affect the loading speed and server burden, it is recommended that the video uploaded to Youtube.com and other third-party platform hosting, through the playback URL link to the site to show play on it, so that the playback of the video will not take up the server bandwidth and resources, is the best way!
Setting up a Youtube account dedicated to uploading videos, with the video synopsis putting the website URL helps a lot with SEO! It is recommended to stop uploading videos directly to the media library for direct use.
11-Installation of WP Optimize to clean up the database
Many plug-ins will leave some tables and data in the database after they are uninstalled, so that you can restore the corresponding settings and data when you install those plug-ins again in the future. Regularly cleaning up the garbage left in the database by uninstalled plug-ins can speed up the old website and free up disk space.
The database cleanup function of plugins like Wp Rocket or Perfmatters can't clean up the tables left by the uninstalled plugin, so you need to install theWp OptimizePlugin Cleanup, it is the best free database cleanup plugin.
Download the plugin and install it, then click to enter the "Database" cleanup interface.
If you have the UpdraftPlus backup plugin installed, check the number 1. Then select all optimizations and click "Run all selected optimizations" to start optimization. The optimization will take some time, so it is recommended to run another optimization at the same time by following the steps below.
Click on "Table", and check the same box if you have the UpdraftPlus backup plugin installed.
Scroll down the page, you will see the table left by the uninstalled plugin, click "Delete". For example, the picture below shows the table left over from the previous installation of Contact Form7.
Note: Known plugins that use this table nameNone of it's installed.The table can be deleted only if there is an existing plug-in that uses the table, and it cannot be deleted if there is an existing plug-in that uses the table!
If there are no deletable tables it proves that your WordPress database is pretty clean.
If you get an error after cleaning the table, go to the UpdraftPlus backup interface to find the backup data before optimization and click "Restore".
After completing the above 2 cleanup remember to uninstall the Wp Optimize plug-in, usually use Wp Rocket or Perfmatters database automatic cleanup function on the line.
12-Optimize Elementor speed
Roughly 1 in 5 WordPress websites worldwide useElementor(Ele for short), Ele's popularity is evident. The power and flexibility of Ele has also led to bloated code and slow speeds. A whole bunch of speed bloggers boycotted it and abandoned it.
Ele's main advantages are its efficiency, aesthetics, and power, which areGutenberg (name)And other speedy page builders say it can't be compared. The ultimate goal of making a website is to make money, and efficient, beautiful and powerful is the factor that generates benefits. As for speed, there are 100 ways to improve, there is no need to give up for speed Ele. Ele is now and in the future will 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-ins imported directly into the Elementor template, compressed under the picture to install the cache plug-in and then use Google speed test and other test speed will find that the speed is very fast!
Say Elementor slow most people do not know how to set up 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 to reduce the amount of code to improve loading efficiency. We build all the sites unified use Ele, after optimization Google speed score can do 100 points, the computer side of the loading time of 1 second, the cell phone side of 2 seconds.
Due to space constraints, we have written a separate article on Elementor speed optimization, so please move to the next page for details.The Ultimate Elementor Speed Optimization Technique, Starting Pages in Seconds.The
13-Optimize search function
Each time a visitor performs a search, the entire database (MySQL) is retrieved, which is not a problem if the site does not have many pages or visitors. However, as the number of visitors and pages increase (especially on e-commerce sites), this can greatly increase the burden on the server and slow it down.
For e-commerce websites, improving search functionality is especially important. Not only do e-commerce sites have hundreds or thousands of pages, but search is the primary way users find products. E-commerce sites with high traffic demand more server performance.
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 burden while enhancing WordPress/Elementor search functionality.
It is also possible to use the freeElasticPressThe search plugin, Elasticsearch likewise indexes the database content and then searches that index, which is much faster than regular search to perform database queries.
14-Adjusting the firewall
If you compare page loading to courier delivery, firewalls are equivalent to checking cars at checkpoints, which greatly improves security but also slows down the speed. Nowadays, there are so many malicious crawlers and robots attacking the network, a firewall is a must, and it is recommended to use theWordfence Security PluginThe
However, if the firewall is set too strictly it will greatly slow down the page loading speed and the page will take a long time to load accordingly and load. Firewall plug-in settings are also very strict server performance, further impact on loading speed. It is recommended to test the loading speed of the website after the firewall is turned off and on respectively.
The firewall rules are set to be strict at the beginning, and after running for a period of time, check the interception logs to judge the situation of malicious crawlers and illegal estimation. Then lower the firewall level and then run for a period of time to check the log judgment, to find the balance of settings.
Some plug-ins such as intercepting crawlers more or less will affect the speed, to test the site in different plug-ins enabled/disabled under the speed, there are trade-offs appropriate to give up some plug-ins and features.
15-Delete unused CSS, JS
WordPress is a product for the masses, and products that meet the needs of the vast majority of users are destined to be bloated.WordPress sites are bound to produce assets (JS, CSS) that are not useful for our site.
According to our experience, by cleaning up useless CSS, JS can reduce the website 1/3~1/2 code! Just this one initiative can greatly improve site speed! The role of the Asset Cleanup plugin is to clean up each page of useless code, greatly reducing the page size to speed up the page loading speed.
The most famous and powerful asset cleanup plugin nonPerfmattersInstead, processing can disable useless assets, but also generate key CSS, delayed loading JS, delayed loading images, preloaded resources, etc., which is very effective in accelerating the website! Click to viewTutorial on the use of Perfmatters settings.The main purpose of this article is to explain the optimization idea and optimization steps as well as methods. We mainly explain the optimization ideas and optimization steps and methods, so that you can master the skills by yourself and optimize independently by example.
16-Installing the Cache Plugin
When someone visits your WordPress site, the server needs to execute PHP and query the database to retrieve data, and finally output the results into an HTML page for the visitor to view. This process involves a lot of links, slow and increase the burden on the server.
Caching works by storing a static HTML version of each page and serving it directly to the visitor, eliminating the need for most PHP runs and SQL queries, thus greatly improving page load speed.
Recommended installationWp Rocket Caching PluginThis is the best caching plugin for compatibility + acceleration + ease of use, perfect for white users. If it's a LiteSpeed server, install it for free!LiteSpeed CacheCaching plugin that works no worse than Wp Rocket.
Wp Rocket works great with Coudflare CDN. Click to downloadWp Rocket pluginClick to viewWp Rocket Setup TutorialCoudflare settings also affect the speed of the site, their own Baidu setup tutorials.
If the site has a lot of PHP-controlled dynamic content, and a caching plugin such as Wp Rocket can't bypass dynamic caching, it's recommended to use theW3 Total Cache Pro caching pluginW3TC has a fragment caching feature that perfectly bypasses all kinds of dynamic caching, including Memcached caching.
If it's an Nginx server and the site doesn't have login/membership etc, try thisEnabling Nginx fastcgi_cache cachingIt can be used to implement static web pages from the Nginx level. Effectively improve the concurrency of the site , reduce PHP runtime and request response time , greatly improve the page loading speed . Acceleration effect is better than Wp Rocket and other plug-ins.
17-Generate key CSS, delayed loading JS
Above mentioned to remove useless assets is to disable the useless JS, CSS files, the rest of those CSS files also contain part of the useless CSS, if you can not load or delay the loading of this part of the useless CSS can further enhance the speed of generating the role of key CSS here.
With the same useless CSS, each JS file (including inline JS) inside some JS on the page display does not play a role, but is responsible for the implementation of the function. If this part of the non-critical JS delayed loading, can greatly reduce the pre-load content + save JS parsing time, can greatly enhance the speed. If your website Google speed mobile score has not been on, a big reason is that the JS loading bad cause, optimize the JS can improve the score.
Both the Wp Rocket and Perfmatters plugins have "Generate key CSS"and"Delayed Loading JS"function, there are many other excellent also have these 2 functions. Just select 1 of the plugins to enable these 2 features, don't enable the same feature in more than one plugin or there will be conflict.
Different plug-ins to generate key CSS and delayed loading of JS use and the effect is not the same, we recommend the use of Perfmatters to generate key CSS and delayed loading of JS, after we compare the experiments found that it is more powerful, better results.
Click to viewPerfmatters Asynchronous/Delayed Loading JS Settings TutorialClick to viewPerfmatters Generate Key CSS Settings TutorialThis is just a setup tutorial. These 2 are just setup tutorials, the corresponding usage is in thePerfmatters Usage Tutorial SectionThe
Perfmatters acceleration effect is a little better, the setup is also a little more complicated, if the white man can't read or change to Wp Rocket. small rocket setup is much simpler, the effect is also good. Click to viewWp Rocket Generate Key CSS and Delayed Load JS TutorialsThe
Advanced Advanced Optimization Tutorial (paid)
If you follow the above tutorials to optimize in place, the site speed should increase a lot, there may still be some places that have not been optimized in place, theGoogle speed testThe mobile score never went up. Tools are dead, websites and ideas are alive, depending on your ownStatus of the websiteTargeted optimization gives 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, as well as plug-ins advanced use of the method, so that your site speed optimization effect to a new level.
Checking optimization results
To this wordpress speed optimization tutorial end, optimized for immediate use!Google Speed Measurement ToolTest the speed of the site. If optimized properly the computer score should be above 95 and the total loading time within 1 second. A mobile score of 95 or so, with a total load time of 2 seconds or less.
Recommended for domestic sitesWebmaster Tools SpeedThe
If the score and total load time is not ideal, check the speed tool optimization recommendations to see what is not optimized in place, targeted optimization on the line. If you have any questions or are experiencing difficulties, leave a comment below.
