Improving WordPress website performance: a step-by-step optimization guide
(This article series on WordPress website performance optimization was created in collaboration with SiteGround. Thank you for your support for the partners who made SitePoint possible.)
Slow websites are frustrating. Potential visitors may leave before the page loads, and search engine rankings will also decline, resulting in reduced traffic.
The ideal web page loading time should be within two seconds. How to achieve it? Take it step by step.
This article will introduce a range of strategies that can be used to optimize the speed of WordPress websites.
You may not feel that the website is slow. Your browser has a very likely cached page, so your experience is different from new visitors.
The following are some services that can tell you the page loading time and the total file size of the page:
Check website speed before and after adjusting website performance. If your page loading time is within two seconds, it's done well.
Record the differences brought by each step. Which step is the most effective?
Host a website on a slow server, speed improvement is impossible. Choosing the right virtual host is the first step to having a quick loading website.
How to choose a company that prioritizes speed? Check out the performance list in the Ultimate Guide to Selecting a Virtual Host.
SitePoint recently partnered with SiteGround to make it our official recommended web host. SiteGround has servers across multiple continents and uses the latest SSD hardware, internal caching tools and free CDN services to invest heavily in speed improvements. Its flexible server supports PHP7 and HTTP/2, and continues to perform software and hardware updates.
First, use a quick theme. A multitude of options can simplify your work, but at the cost of increasing the burden on your web server and browser. Some WordPress themes are megabytes in size, increasing page loading time.
Every feature you don't use will slow down the website for no reason. If you are good at tweaking your code, select topics with fewer options to speed up your website.
Further reading:
Secondly, use responsive design. Responsive designs are designed to load less resources in mobile devices or specify high-resolution images for desktop displays. Mobile users do not need to download large images, and desktop users do not need to squint their eyes to look at small images.
Google also prefers responsive websites, so it is expected that SEO will improve after switching.
First, minimize the number of plugins used. Before installing any plugins, ask if you really need them. Installing a large number of plug-ins will not have a huge impact on website speed, but will increase the risk of installing bad behavior plug-ins.
Secondly, make sure your plugin is optimized for the current version of WordPress. Do some research before installing the plugin, especially if the rating is Samsung or lower. It may be poorly developed, or use inappropriate hooks. This can slow down the website and can also have a negative impact on WordPress and other plugins. It is also important to keep plugins updated to ensure you have the latest performance improvements, security patches, and features.
Your Widget should be as lightweight and easy to load as possible. Some widgets load external JavaScript or CSS when rendering. This is common for Facebook, Twitter and Google's social network Widget.
If the Widget is unlikely to be updated frequently, upload it directly to the server. By not relying on external servers, you can reduce the loading time of your website.
First, use gzip to compress static content. The compressed file is smaller, so it loads obviously faster.
Secondly, use CDN to reduce the load on the web server. Your static resources (such as images, scripts, and CSS files) will be served from optimized content delivery network servers all over the world — often the server closest to visitors. Your web server will be released to serve the rest of the website, thereby improving performance.
Ideally, look for virtual hosts that offer CDNs in their hosting plans, such as SiteGround. There are many CDN networks:
These are used in conjunction with the cache plugins we will introduce next time.
The following is more reading about CloudFront:
Images are one of the heavier elements of a website: they account for more than 65% of the content of the web page. There are several ways you can optimize uploaded images.
First, specify the maximum image size for thumbnails, medium and large images. You can find these options in Settings/Media. If you upload an image of 1024 pixels and your content area is only 604 pixels wide, the image will be reduced using CSS. The generated pre-scaling 604 pixel wide image download size will be significantly reduced.
Secondly, compress it! This technique can reduce image file size losslessly without resizing image size or reducing image quality. Although Yahoo canceled the Smush.it service a few years ago, there are alternatives like reSmush.it, and some plugins we will cover in the next post.
Third, use lazy loading. This technique is very effective for image-intensive websites. Images are loaded only when visible, not when the page is initially loaded. This can significantly speed up page loading times, although displaying delays when the image scrolls into the field of view.
Further reading:
Fourth, choose the best image format for your website. Some image formats are easier to use, while others are smaller. For example, a scalable SVG has a smaller file size, especially if you optimize it for the web and compress it with gzip.
Learn the advantages and disadvantages of various image formats here:
Fifth, use CSS wizard. Improve performance by combining many small topics and miscellaneous images into as few images as possible. Learn more here:
Lastly, check out this comprehensive overview of image optimization:
WordPress page is loaded from the MySQL database. Over time, the database may contain a lot of information that you no longer need. Optimizing the database deletes this information and improves performance.
You can optimize the database directly from phpMyAdmin. You can also use plugins to optimize it. We will cover these in the next article.
Cache is very effective in optimizing high-traffic websites. Each time a WordPress page is loaded, information is retrieved from the database and CSS files, combined into an HTML file, and then loaded into the guest's browser. It takes time.
Cache makes these HTML files available to future visitors, saving a lot of time. We will cover the cache plugin in the next article.
Keep your WordPress website in its best shape with regular maintenance. Some maintenance routines can significantly increase speed, especially:
Learn how to do these and more here:
For many optimization tasks, there are some WordPress plugins that can do the heavy lifting for you. We've covered eight of the best plugins that cover all aspects. We also list nearly twenty alternatives so you can explore which ones are best for your needs. Get in-depth and see which ones have the greatest impact on your website.
If you are following our WordPress maintenance checklist, you may already be using some of these plugins. Keep working hard! This garbage will accumulate continuously.
### W3 Total Cache
This plugin uses cache to provide simple web performance optimization (WPO) - cache posts and pages to memory or disk, cache feeds, search results pages, database objects, and compressed CSS and Javascript files. To make the most of it, take some time to configure it carefully.
W3 Total Cache can also be used with your CDN such as Cloudflare or MaxCDN to further reduce loading time.
W3 Total Cache improves website SEO and user experience by improving website performance and reducing download time through features such as Content Delivery Network (CDN) integration.
Alternative caching plugins include WP Super Cache, Hyper Cache, WP Fastest Cache, and Cache Enabler.
If you want to avoid plugins, a good option is to find a virtual host that caches for you. Our partner SiteGround has an excellent in-house developed caching tool that can help you greatly speed up your website.
### WP-Optimize
This free plugin can optimize your WordPress database in just one click, or automatically optimize with its built-in scheduler. Redundant information (such as spam, post revisions, and other spam projects) will be scrubbed from your mySQL database, speeding up website loading.
WP-Optimize is an effective tool for automatically cleaning WordPress databases to run at maximum efficiency.
Alternative database optimization plug-ins include Optimize Database after Deleting Revisions, WP Cleanup, WPOptimize, WP Database Cleaner, and WP-DBManager.
### Autoptimize
Poor structured CSS and HTML can lead to slow website speed and loss of traffic. This plugin scans and tweaks your website, "compresses" and removes redundant code.
To prevent compatibility conflicts, Autoptimize can ignore your other plugins. It can also force your plugins to run in a specific order. By trying this, you may be able to significantly reduce loading time.
Autoptimize makes it very easy to optimize your website. It connects all scripts and styles, compresses and compresses them, adds expired headers, caches them, and moves the styles to the page header and moves the script to the footer.
Alternative plugins for compression include WP Super Minify and Better WordPress Minify.
### P3 (Plugin Performance Profiler)
Bad plugins can adversely affect the performance of the website. P3 will evaluate your plugin. It will identify the plugin that has the greatest impact on website loading time and display it in the pie chart so you can easily see which tweaks have the greatest impact.
This plugin creates a website plugin performance profile by measuring the impact of the plugin on the website load time. Typically, WordPress websites load slowly because of improper plug-ins or excessive number of plug-ins. By using the P3 plugin, you can narrow down any factors that cause your website to be slow.
Alternative plugins related plugins include Plugin Organizer.
### WP Smush
This plugin compresses the image by removing metadata from JPEG files, optimizing JPEG compression, converting certain GIFs to indexed PNGs, and removing unused colors from indexed images. You can set it to automatically compress new images when uploaded to the website.
WP Smush is fast and has good performance. The files are compressed using a dedicated server and are recommended by the website performance tool GTmetrix.com.
Resize, optimize and compress all images with a powerful and completely free WordPress image compressor, courtesy of the super team at WPMU DEV!
Alternative image compression plug-ins include EWWW Image Optimizer, Imagify, Kraken Image Optimizer, ShortPixel Image Optimizer, and CW Image Optimizer.
This plugin ensures that the image is loaded only if it is visible above the viewport. It works out of the box without configuration.
Delay loading of images to improve page loading time. Use jQuery.sonar to load images only if they are visible in the viewport.
Alternative lazy loading plugins include jQuery Image Lazy Load WP, BJ Lazy Load, Rocket Lazy Load, Unveil Lazy Load, and Lazy Load for Videos.
### Imsanity
This free plugin does not provide lossless compression, but will automatically adjust the image to a more "reasonable" resolution. It is able to set the maximum width, height, and quality of the image and can convert the BMP file to JPG.
Imsanity will automatically resize huge image uploads to a more reasonable size in the browser, but still large enough for typical website use. The plug-in can be configured using maximum width, height and mass.
This plugin compresses your page in gzip format (if the browser supports compressed pages). HTTP compression can reduce page size by 60-80%, increasing page loading speed by three to four times.
This plugin allows your WordPress blog to output pages compressed in gzip format (if the browser supports compression).
You can also enable gzip compression from the settings of the W3 Total Cache or virtual host control panel mentioned above.
How slow is your website? Use one of the tools listed above to find out. Then try one or more strategies and test your speed again. Then repeat the process.
Our preferred virtual hosting provider SiteGround allows you to use powerful performance optimization techniques in just a few clicks. Their guide on improving WordPress performance includes a complete tutorial on many topics we cover in this article, including caching, gzip compression, using CDN, optimizing images, and optimizing WordPress databases.
Which optimization strategy has the greatest impact on your website? Please let us know in the comments.
There are several plugins that can significantly improve the performance of WordPress websites. Some of the best plugins include WP Rocket, an advanced plugin that provides a range of optimization features such as caching, database optimization, and lazy loading. W3 Total Cache is another popular choice, which provides features such as page caching, database caching, object caching, and browser caching. Other notable plugins include WP Super Cache, Autoptimize, and WP Smush for image optimization.
Content Delivery Network (CDN) can significantly improve the performance of WordPress websites by storing cached versions of websites on multiple servers around the world. When users visit your website, CDN delivers the website from the server closest to them, reducing data transfer time and thus speeding up the website.
Optimizing WordPress database can significantly improve website performance. This can be achieved by regularly cleaning the database, deleting unnecessary data, and optimizing database tables. Plugins like WP-Optimize and WP-Sweep can help automate this process.
Large, unoptimized images can significantly slow down WordPress websites. By optimizing images, you can reduce file size without losing quality, thus reducing page loading time. This can be done using plugins such as WP Smush or EWWW Image Optimizer.
Cache can significantly improve the performance of WordPress websites by storing static versions of the website, thereby reducing the number of requests to the server, thus speeding up the website. This can be done using plugins such as W3 Total Cache or WP Super Cache.
Compressing CSS and JavaScript files can improve the performance of WordPress websites by reducing file size and the amount of data users need to download when accessing the website. This can be done using plugins such as Autoptimize or WP Rocket.
Optimizing WordPress websites to suit mobile devices is critical to performance and SEO. This can be achieved by using responsive themes, optimizing images, enabling AMP (accelerating mobile pages), and using mobile-friendly plugins.
Good web hosting providers can significantly improve the performance of WordPress websites by providing fast server speeds, reliable uptime, and excellent customer support. Some popular WordPress-friendly web hosting providers include SiteGround, Bluehost, and WP Engine.
Monitoring the performance of a WordPress website is critical to identifying any issues and making necessary improvements. This can be done using tools such as Google PageSpeed Insights, GTmetrix, and Pingdom.
Regular updates to WordPress websites, including themes, plugins, and core WordPress software, can improve the performance of your website by ensuring you have the latest features, bug fixes, and security updates. It is also important to test any updates on the staging site to avoid any potential issues before applying the update to your live site.
The above is the detailed content of 10 Steps for Optimizing WordPress Site Performance. For more information, please follow other related articles on the PHP Chinese website!
What is the difference between xls and xlsx
Why is the mobile hard drive so slow to open?
pkg file opening method
Why disabling automatic updates in Windows 11 is invalid
How to represent negative numbers in binary
Check folder size in linux
html formatting method
What is the core of a database system?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
