How to Improve the Performance of Your WordPress Theme

Practical guide to improving the performance of WordPress themes

Core points

• WordPress theme performance is affected by the number of HTTP requests, download resource size, and page efficiency. Reducing these factors can significantly improve performance.
• How to quickly improve WordPress performance include: consulting hosts, enabling GZIP compression, enabling WordPress and browser caching, disabling unused plugins, removing unnecessary resources, and replacing social media buttons.
• Pictures are the main reason for website bloated. By removing or replacing unnecessary images, using the correct format, adjusting large bitmap image sizes, maximizing image compression and achieving lazy loading, page weight can be significantly reduced and performance can be improved.
• More thorough solutions include: adopting a build process, considering progressive web application technology, avoiding third-party code, carefully evaluating WordPress themes, simplifying websites, and considering performance from the start.

This article is part of a series of articles created in collaboration with SiteGround. Thank you for supporting the partners who made SitePoint possible.

In May 2017, the average page weight reached 2884kb. Google DoubleClick's research report shows that the average loading time on mobile devices is 19 seconds. However, performance is more important than ever:

• User frustration: User won't wait. Aberdeen Group's research shows that every second delay can lead to:
  • Page views decreased by 11%
  • User satisfaction decreases by 16%
  • Conversion rate decreased by 7%
• Mobile terminal: Mobile access accounts for 55% of all network traffic. Both device and bandwidth capabilities are increasing, but the speed is not keeping up with the growth rate of page weight. Users usually pay by bytes.
• Search Engine Ranking: Google punishes slow loading, heavyweight websites.
• Host Cost: It is reasonable to work with companies such as SiteGround to host, but heavyweight websites consume more resources and cost more than streamlined alternatives.
• Maintenance: The more resources your website requires, the higher the maintenance cost. Ultimately, slow websites will cost you and your users money. Next time your boss asks to add unnecessary features, please remind them of this simple truth!

Ideally, you should consider performance before writing the first line of code. However, you may be reading this article because there are performance issues with your topic. Fortunately, there are some cost-effective solutions to this problem without any drawbacks. Every millisecond saved will reduce your costs while increasing user satisfaction, engagement and revenue.

Factors that affect performance

Performance is affected by the following factors:

1. Number of HTTP requests
2. Download resource size
3. Efficiency of Page

The number of HTTP requests depends on the number of files and Ajax calls needed to make your page work: HTML, CSS, JavaScript, images, fonts, data, and all other resources. HTTP/2 solves this problem, but both your server and user's browser must be configured to enable support. Even with HTTP/2, twenty file requests are still not as effective as ten. The main factor is the size of each file.

To illustrate this, 2884kb is 20% larger than the original version of Doom from id Software. Granted, we are comparing modern web pages to a game from 25 years ago, but most pages show only a few paragraphs, while Doom implements a 3D engine, multiple levels, graphics, music and sound effects. Even relatively lightweight pages can be inefficient. For example, if your three-page website relies on a 500kb JavaScript framework, the code must be downloaded, parsed, and executed before you see the first character. Even if the total resource size exceeds 500kb, the server rendered HTML file will start displaying before it is fully loaded. Finally, server speed, compression, and caching are also other important considerations.

Measure performance

Measuring performance is important to identify bottlenecks and ensure that your updates have improved pages. The following tools provide breakdown of request and response time and update suggestions:

• Pingdom
• Google PageSpeed ​​Insights
• GTmetrix
• WebPageTest

The browser's developer tools network tab also provides information about the layout and how long it takes for the page to be ready to respond to user events.

Fast win

The following updates should not take more than a few minutes-You have no excuses!

Contact your web host

A good web host will analyze your usage and provide advice on service, hardware and software upgrades. This can provide cost-effective performance improvements with minimal effort. Our partner SiteGround has a team of proactive and knowledgeable WordPress experts who are happy to help you solve this problem. SiteGround offers a range of WordPress plans, and SitePoint users can enjoy up to 65% off.

Enable GZIP compression

Almost 30% of websites fail to enable GZIP compression. This can usually be enabled in web server settings or in WordPress plugins such as WP HTTP Compression and W3 Total Cache.

Enable WordPress cache

There are several WordPress plugins that render pages and store them in the cache of their first request. Subsequent requests get these pages from the cache instead of regenerating database content in the template. Cache plug-ins include W3 Total Cache, WP Super Cache, Hyper Cache, WP Fastest Cache, and Cache Enabler. Your hosting provider may be able to enable caching for you. Our partner SiteGround has a custom caching tool that can greatly speed up your website.

Enable browser caching

If the user caches the resource through the browser, the user does not have to download the resource again. Simple solutions include setting the appropriate Expires header, Last-Modified date or taking ETags in HTTP headers. The following .htaccess example requires the browser to cache images for one month:

<code><ifmodule mod_expires.c="">
ExpiresActive On

<filesmatch>
ExpiresDefault "access plus 1 month"
</filesmatch></ifmodule></code>

Disable unused plugins

Most plugins will add code to your website, such as extra CSS or JavaScript, even if you are not using it. WordPress administrators can disable plugins from the WordPress control panel, or they can completely remove plugin code if they are sure the plugin will never be used.

Delete unnecessary resources

Does your template really need fifteen fonts? Have you added seven analytics systems? Is that third-party widget necessary? Do you need to display ads from fifty ad networks? Do you need multiple JavaScript libraries? Can you replace JavaScript animation with CSS3 effects? Clean it up and remove anything you don't need.

Replace social network button

Does Facebook, Twitter, Google and LinkedIn share buttons on your page? Although they seem harmless, they may add hundreds of kb of third-party JavaScript to your page. This is a bloated security risk that can negatively affect performance. Third-party code is unnecessary – you can add fat-free social buttons to your page using a few lines of HTML. A small amount of JavaScript can enhance the experience of using pop-ups or using event tracking log usage in Google Analytics.

Merge and compress JavaScript and CSS

Dissolving JavaScript and CSS files into separate modules during development is feasible. However, before hosting individual files on a production server, these files should be merged and compressed to remove comments and spaces. (Note that your WordPress style.css file must retain the topic details at the top, otherwise it will break!)

Processing your image

Image is the biggest reason for website bloated. Deleting a single 500kb high-resolution image can reduce weight and download time by 25% or more.

Delete or replace unnecessary images

I'm sure that the hero is beautiful and fits the brand image, but is it causing you to lose customers? All or part of the image can be replaced with CSS3 gradients, borders, filters, or other effects.

Use the correct image format

Always use the appropriate image format. Generally speaking:

• Use SVG for vector logos and charts
• Use JPG for photos
• Use PNG for everything else
• But for smaller, limited colors or images with animations, consider using GIFs.

There are other formats, such as WebP, but the browser support is limited. If in doubt, try all the appropriate options and select the best ones. But please note:

• JPG is a lossy format that removes details at higher compression rates. Find the best tradeoff between quality and file size for each image.
• PNG is available in 256 and 24-bit color categories. The 256 color version usually produces smaller files.
• PNG and GIF both provide transparency. Turn off transparency as much as possible to save more bytes.

Resize large bitmap image

The images taken by a basic camera or phone are too large to be displayed on any device. WordPress offers options for resizing, but for best results, the editor should crop and resize before uploading. Image size should not exceed the maximum size of its container. Users using high density/retinal displays may appreciate higher resolution images, but you can use the img tagged srcset attribute to provide an alternative. Resizing the image can have a significant impact on the weight of the page. Reducing the size by 50% will reduce the total area by 75%, thereby improving file size accordingly.

Maximize image compression

You can significantly reduce the size of the bitmap image by deleting metadata, reducing color depth, and adjusting the compression coefficient. WordPress plugins such as WP Smush, EWWW Image Optimizer, Imagify, Kraken Image Optimizer, ShortPixel Image Optimizer, and CW Image Optimizer can handle this process for you. For best results, images should be processed before uploading. Software options include OptiPNG, PNGOUT, jpegtran and jpegptim. Windows users can try using excellent RIOT. Alternatively, you can use online tools such as TinyPNG/TinyJPG. SVG images can be compressed by rounding values ​​to fewer decimal digits, simplifying paths, and removing unnecessary comments, properties, and spaces from XML. Your SVG editor should have the option to compress files, or you can use tools like SVG editor and SVGO. You can also move style directives to CSS.

Implement lazy loading

Finally, the lazy loading technique ensures that images are downloaded only if the boxes containing them are visible in the viewport. WordPress plugins that implement lazy loading include Lazy Load, jQuery Image Lazy Load WP, ​​BJ Lazy Load, Rocket Lazy Load, Unveil Lazy Load, and Lazy Load for Videos. Other resources:

• Five image latency loading techniques to improve website performance
• How to build your own progressive image loader

More Thorough Solution

If your subject is still overweight, you can consider a more intense dieting regimen…

Using the construction process

The build process can automatically optimize images and merge and compress CSS and JavaScript files. You can adopt a Gulp build process for your WordPress theme, which can save hours of work, improve page performance, and make development more fun.

Consider progressive web application technology

Progressive Web Application Technology allows web applications to work offline by caching basic and common resources. While this is often used for applications, you can transform your website into a progressive web application and enjoy the benefits of fast loading and offline operations.

Avoid third-party code

Will you grant unlimited permission to access your website code to unknown developers? Won't? So why trust third-party widgets like social media sharing buttons and discussion forums? While these widgets rarely compromise security, you should check which hidden resources they are loading and evaluate the impact on performance.

Carely evaluate WordPress themes

Free and commercial WordPress themes make financial sense. Why hire a developer when a ready-made theme meets all your needs for a few dollars? But be careful about hidden costs. A universal template must be sold thousands of copies before the development effort can be recovered. To attract buyers, developers bundle many features you may never need. Check one: Does the theme look good? Check 2: How does the theme perform on various devices and networks? See also: 10 features of advanced WordPress themes.

Simplify your website

One trend is to move towards a simpler, streamlined, and more customer-centric online experience. This may be harder than it sounds, but the old days of giving all imaginable features to all users are over. Whether you can convince your boss/customer is another matter!

Change your development lifestyle

Who should be responsible for web pages that reach 2.8Mb? It's us. The reason and how the website becomes bloated doesn't matter—the developers make it happen. Rapid development and cost cutting are still important, but the whole process is in vain when it leads to slow, clumsy websites that no one wants to use. Your client/boss may not understand the technical issues, but you should explain the consequences. Performance is considered from the very beginning. Like content, SEO, usability, and accessibility, performance should never be ignored! Creating a fast WordPress theme is difficult, but "adding" performance later is much more difficult and more costly.

Other suggestions:

It's easy to forget about bandwidth when you develop on a fast 200Mbps connection. Restrict connections or try to load your website in areas with poor signal. If you feel frustrated, your users will also feel frustrated!
Consider the page weight and question every resource added to the topic. Consider the "rating" strategy, for example, if you are adding 20kb of fonts, you have to save 20kb from elsewhere.

Unsome performance sites have become an epidemic, but it is obvious that few developers are concerned about it. Those who care will get more visitors, higher conversion rates and higher salaries!

Frequently Asked Questions about Improving the Performance of WordPress Themes

How to optimize my WordPress theme for better performance?

Optimizing WordPress themes for better performance involves multiple steps. First, choose a lightweight theme designed for speed. Avoid using topics that load features you don't need because these features will slow down your website. Second, use a good cache plugin. This will store a version of your website on the server and provide it to visitors, reducing the amount of work the server needs to perform. Third, optimize your images. Large, high-resolution images can slow down your website, so use the Image Optimization Plugin to reduce image size without losing quality.

What FAQs can cause my WordPress website to slow down?

There are several common problems that can cause WordPress websites to slow down. These issues include slow hosting providers, no use of content distribution networks (CDNs), excessive plugins, large images, and no use of cache plugins. It is important to regularly monitor the performance of your website and resolve any issues that arise.

How to choose a fast WordPress theme?

When choosing a WordPress theme, look for a lightweight and designed for speed. Avoid using themes with many features you don't need as these will slow down your website. Also, check the ratings and comments for the topic to see if other users have encountered problems with their speed.

CDN How to improve the performance of my WordPress website?

CDN (Content Distribution Network) can greatly improve the performance of WordPress websites. It works by storing a copy of your website on servers around the world. When users visit your website, the CDN serves content from the server closest to them, reducing the time it takes to load content.

How to optimize images on WordPress website?

You can optimize images on your WordPress website by using the Image Optimization Plugin. These plugins reduce the size of the image without losing quality, which can significantly improve the loading time of the website. You can also manually optimize images before uploading them by reducing their resolution or compressing them.

How do too many plugins affect the performance of my WordPress website?

While plugins can add useful features to WordPress websites, too many plugins can slow down the website. Each plugin will add some code that your website must load, which will increase the loading time. It is important to use only the plugins you really need and regularly check and delete any plugins you no longer need.

How to monitor the performance of my WordPress website?

You can use a variety of tools to monitor the performance of your WordPress website. These tools include Google PageSpeed ​​Insights, GTmetrix, and Pingdom. These tools can provide valuable insights on the performance of your website and identify any issues that need to be addressed.

How does a slow hosting provider affect the performance of my WordPress site?

Your hosting provider plays a vital role in the performance of your WordPress website. If your hosting provider has slow servers, your website will also be slow. It is important to choose a hosting provider that provides fast and reliable services.

How to reduce the number of HTTP requests on a WordPress website?

Reducing the number of HTTP requests on a WordPress website can increase its loading time. This can be done by combining CSS and JavaScript files, using sprite images, and reducing the number of posts displayed on the page.

How to use browser cache to improve the performance of WordPress websites?

Browser caching can significantly improve the performance of your WordPress website by storing a version of your website in the user's browser. This means that when the user revisits your website, it loads faster because the browser doesn't have to download everything again. You can enable browser caching by using a cache plugin or by adding code to the .htaccess file.

The above is the detailed content of How to Improve the Performance of Your WordPress Theme. For more information, please follow other related articles on the PHP Chinese website!