Profile

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

WordPress speed optimization tutorial
Article List
Article List

WordPress speed optimization is a problem for most website builders, it is difficult, while it is difficult to find systematic and comprehensive tutorials and ideas online. Diamo here to share the ideas and some methods and tools to optimize the speed to everyone, so that the white can also rely on their own optimization site speed.

A few of the articles are paid content, which is the result of our hard experience. After purchase you can enjoy manual service, if you encounter problems you can contact WeChat customer service for one-on-one analysis and guidance, and can also help you test your website to tell you how you should optimize it. After buying this article paid content and then buy our speed optimization services can be discounted 50 yuan.

 

Why speed optimization?

Pinterest reduces perceived wait time by 40% and directly increases search engine traffic and registrations by 15% . COOK reduces average page load time by 850 milliseconds, resulting in 7% more conversions, 7% fewer bounces, and 10% more page views per visitor.

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

If you put ads like Google on your website, you may be wasting your money by bouncing out before you can display the entire page content after the customer clicks 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%.

 

Why is WordPress stuck?

This is a false proposition, in fact, WordPress does not card. Around 40% of the world's websites (including the US White House government website) are made by WordPress, and you know its charm from this installation. It's the fact that most people won't use it that causes it to bloat and start slowing down.

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.

Speed measurement results

Pasted 86

 

What is a good website load time?

Google says 3 seconds is a passing line, if the page load time is higher than 3 seconds customers start to leave. And the cross-border e-commerce website should try to load the page in 2 seconds. We think the loading time should be around 1 second for computer side and 2 seconds for mobile side to help improve the conversion rate.

DiiamoAfter 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. The Google speed test is above 95 points.

Speed measurement results

Site load time is not the only criterion, "perceived time" is the most important metric. The "Largest Contentful Paint (LCP)" in Google's testing tool is an important, user-centric measure of perceived time, which is the amount of time it takes for the first screen of content (i.e., the first thing a visitor sees) to be displayed in its entirety. convinced that the page is useful and more likely to browse.

Google recommends that LCP time should be less than 2.5 seconds and will start using this criteria as an SEO ranking factor in 2021.DiiamoThe built website LCP can be optimized to about 0.5 seconds, far ahead of the competition.

Largest Contentful Paint

 

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.

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.

Pasted 68

 

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.

Pasted 69

 

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 on the following 6 data, they determine the first screen content display speed as well as display quality, very important, try to make these 6 indicators are green.

Pasted 70

 

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.Servers are the ceiling of speed and are very important. Bad servers have long response times, slow data readings, and tend to run blockages that reduce page loading. Choose a reliable server with good configuration to speed up data processing and transmission.

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.

PHP is currently (November 2022) recommended for version 8.0. 8.1 has some plug-in themes that are not compatible, so it is recommended that you upgrade to 8.1 by mid-2023.MariaDBIt is faster than MySQL, 1-2G RAM hosts are recommended to install MariaDB version 10.0.

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 the server, CDN is not used then go 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. OptimoleImage compression plug-ins or other.
  3. Wp Rocket or LiteSpeed CacheCaching plug-ins.
  4. PerfmattersAsset liquidation plug-in.

 

1 - 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 filePasted 65Add the following line.

Add define( 'DISABLE_WP_CRON', true);

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

Pasted 64

 

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.

Pasted 66

 

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.

 

2 - Choose fast and light themes and plugins

The best way to optimize WordPress speed is to solve the lag from the root, once and for all. WordPress card is mainly because of the installation of slow themes, plug-ins, loaded a lot of useless code. Change to a fast theme and plug-in problem is half solved.

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 not much room for optimization. The theme must be fast while taking into account some of the necessary features, 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, while deeply optimized Woocommerce has some useful features.

Plug-in.Plugins are also a factor that very much affects the speed of the site. Many plugins are written with poor quality and load a bunch of JS code in the front end. Some code disabled/delayed loading then the corresponding function will fail. Try to choose lightweight plug-ins, only load a small amount of code in the front-end.

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, pop-up ads, forms, etc. There is no need to install plug-ins for the same function.

For exampleRank Math Pro Seo plug-ins already have redirects, 404 monitoring, Schema structure, keyword ranking tracking, installation of Google Analytics code and other functions, there is no need to install the same function of the plug-in.

Slow plug-ins (not recommended).
Later free to do a slow plug-in collection.

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.

 

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.

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.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 hosted fonts. The advantage is that you can have multiple fonts like web fonts.

Web fonts.Google fonts are web fonts, which are stored in Google's own server, fonts.gstatic.com/xxx. There are hundreds of Google fonts, and they can be used commercially for free.

Pasted 50

When loading the page, you need to go to Google server to download the font to local display, because the speed is the slowest. As we all know, Google's font network is not very good and the download speed is not very fast. The worst thing is that 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 the speed.

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!

Pasted 43

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.

Pasted 46

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.

Pasted 40

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.

Pasted 43

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).

Pasted 44

 

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.

Pasted 51

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

Pasted 88

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

Pasted 53

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

Pasted 54

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

Go to Perfmatters General Settings > Preloading Settings, fill in the full URL of local fonts in Preload, select "Font" as the type, check "CrossOrigin" and the other two defaults, save to preload local hosted fonts.

Pasted 55

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.

Pasted 56

 

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".

Pasted 57

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

Pasted 58

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.

Pasted 59

The font in "Layout" should also be changed.

Pasted 60

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.

Pasted 61

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

Pasted 62

 

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 the header, which is convenient, beautiful and powerful. However, it is very slow. Because Elementor involves too manyInterdependenceThe JS, CSS, can not be uninstalled, can not be delayed loading (or it will display errors), so the speed can not be optimized up. Especially on the mobile side, the Google speed measurement 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.Then use thePerfmattersPlugin disables all Elementor codeThe speed is therefore very fast. Google speed test mobile scores can go up to 95-100.

If your header, footer, privacy collection pop-ups, sidebar, etc.Full station range displayThe content is built using a builder like Elementor, it is recommended to use the builder that comes with the theme (Appearance > Customize > Header) to recreate it and remove the Elementor code as much 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.

Pasted 90

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

Pasted 89

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-Compressed images

This is also a top priority for speed optimization, as more than half of the page size is images. Compressed images and delayed loading can greatly reduce the size of the page, thereby improving the loading speed. It can be said that any slow website, images are not optimized in place.

For image optimization, 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

As for the delayed loading of images (lazy loading) will be shared below when using the Perfmatters plugin, just follow the steps.

Note: If the image is loaded by css code, not in html through img or other tags, Optimole and other plug-ins are unable to compress the image. You need to useTinyJPG online image compression toolCompress the images before uploading them to the website media library for use.

 

7 - Install Cloudflare CDN and link the website

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 ship from her nearest warehouse, so that the speed is fast and the cost is also lower.

Cloudflare is the best free CDN, even better than some paid CDNs, and more nodes worldwide.

Cloudflare registration setup tutorial Baidu, very convenient. In the following there is Wp Rocket set up tutorial links, the tutorial 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.

Pasted 67

You can log into the Cloudflare backend to enter the cache settings and open the developer mode. If you use Wp Rocket to link Cloudflare, open the 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.

Pasted 73

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.

Pasted 74

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

Pasted 76

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!

Pasted 77

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".

Pasted 78

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

 

9 - Install Wp Rocket/LiteSpeed cache plugin

Caching plugin makes web pages static and stored in disk/memory. Greatly reduces server pressure and resource download speed, must be installed. If it is not a LiteSpeed server, it is recommended to install Wp Rocket for best results.

In case of LiteSpeed server, it is recommended to installLiteSpeed CacheCache plugin, the effect is better than Wp Rocket. Setup tutorials and usage search for yourself, not detailed here.

We can afford, while the effect of good caching plug-ins are Wp Rocket, with Coudflare use the effect of bar. Click to downloadGPL Licensed Wp Rocket PluginClick to viewWp Rocket setup tutorial.

If you are not afraid to toss and turn and know a little technology can be putSuper Page Cache for CloudflarePlugin and Wp Rocket work together. This plug-in is not good for the average person, and the settings are also very troublesome. I saw some feedback on the build group that this plugin does not take effect, in fact, do not know how to use. White or just use Wp Rocket, do not blindly tossed.

By default Cloudflare can only be set up by page rules do not cache 3 pages, if it is an e-commerce site and so need to set up not cache many pages, 3 rules may not be enough.

Super Page Cache for Cloudflare is specifically for the above-mentioned Cloudflare caching plug-ins, which use Workers can cross the Cloudflare 3 page rules limit, set not to cache multiple pages, better control the cache effect. And this plug-in can also use Cloudflare's Edge Cache function to improve caching efficiency and speed.

Super Page Cache for Cloudflare plugin requires disabling the cache function of other cache plug-ins, so this plugin will cause the cache function of Wp Rocket to fail, all other functions are not affected (such as compression CSSS, delayed loading JS, lazy loading of images, etc.).

 

10 - Optimize Elementor speed

1/5 of WordPress websites 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.

 

11 - Optimize the search function

When a visitor performs a search, the server searches the entire site for results, which can greatly increase the load on the server and slow down the speed. The more pages/products on the site and the more visitors, the more time it takes to search and the more burden it puts on the server.

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 to provide a good experience for the users.

 

12 - Install Perfmatters Asset Cleanup Plugin

Asset cleanup plug-ins are also a top priority and very necessary! Many plug-ins are simply not written with the right quality, and even if some functions are not used to load a bunch of useless code on the front-end pages. Even some pages simply do not use some plug-ins, they still load code in all pages.

The role of asset cleanup plugins is to manually disable useless code on each page, thus reducing page size and speeding up page loading. The two most famous and useful asset cleanup plugins arePerfmattersandAsset CleanUp Pro.

Perfmatters has a bigger reputation, more comprehensive features, more beautiful UI design, more detailed setup tutorials, and more speed optimization blogger recommendations. asset CleanUp Pro is more professional and powerful in disabling code and compressing/merging CSS and JS, and can manually control the preloading of each CSS and the delayed, asynchronous loading of JS.

We started out using Asset CleanUp, but later found that Perfmatters' 3 features of generating critical CSS, delayed loading JS, and delayed loading images fit well with our optimization ideas, so we switched to it. Plugins, like objects, are all about fit. Which plug-in you think the function is more suitable for you will choose which one.

 

Perfmatters setup tutorial

The setup tutorial is rather complicated, and not everyone may use this plugin, so we put the Perfmatters setup tutorial inAsset Cleanup Plugin Perfmatters Download, GPL License, with Tutorial.

 

Perfmatters Tutorial

This is the top priority, the website speed optimization effect is good or bad depends on how to operate here. Because each site is different, so there is no fixed method of operation settings, you need to analyze the site first before optimizing.

We mainly explain the optimization ideas and optimization steps and methods, so that we can master their skills, to name a few independent optimization. Buy tutorial enough what do not understand or optimize the site after the effect is not obvious contact customer service or message comments, one-on-one guidance.

 

Disable useless resources with Perfmatters

First, enable the script manager in Assets settings and tap Save.

Pasted 17

When enabled, the "Script Manager" text will appear at the bottom of the background when editing articles, pages or products, and you can click it to enter the script management interface of the page you are editing.Pasted 20

Or inFront EndPage URL followed by/?perfmattersYou can also enter the resource management interface of the corresponding page by pressing the Enter key on the keyboard. For example, the address of the home page of this site is https://diiamo.cn, add the script manager suffix to become https://diiamo.cn/?perfmatters. After visiting, you will enter the script manager interface shown in the figure below.

Pasted 81

For ease of use, first enter"Settings"The interface is set up a bit.

Pasted 82

Click Save after setting as shown below. Then click on the top left corner "Script Manager"Go back to the Resource Management screen.

Note: After the third test mode is opened, only the administrator can see the effect of the page after disabling the resources, visitors still visit the page without disabling the resources. After disabling the resources to test the site display and function normally, remember to come back to close the "test mode", clean up the cache, disable the resources to take effect.

perfmatters 2124

Follow the above method to Google after optimizationClick to go to Google speed test pageTest. Under normal circumstances the score on the computer side should be 95-100, with a page load time of 1 second or less. The score on the mobile side should be 90-100 with a page load time of 1.5-2.5 seconds.

If the score does not reach the above criteria, it is likely that the steps are not done, go over it again. It is also possible that the web server, website theme, etc. is not very fast affecting the speed.

End

Article out of date? Have a better opinion? Have a question? Please leave your comments below and we will follow up.

Recommended Articles.
Comments :

发表评论

Set as private comment

The email address will not be disclosed, and the URL needs to be removed from https://前缀 for insertion.

Chat
  • WeChat Service
Quick login without registration

Enter your username and password to log in

Have no account? Forgot password?
Purchase Tips

To purchase, please click on the top right corner of the avatar to register/login first, after logging in, if it shows no login status please.

For a better user experience, the site uses cookies -Privacy Policy
This site uses cookiesPrivacy Policy