Optimizing WordPress for Performance and Speed
A webinar held on December 13, 2023
11:00 AM Pacific Time (US and Canada)

The webinar is supposed to cover technical aspects of performance optimization in web development. Did it deliver?

Not really.

WHAT WAS DELIVERED
[PagePipe staff commentary appear in brackets]

This presentation by Marco Berroco, a senior WordPress developer from Costa Rica, focuses on optimizing website speed, specifically for WordPress sites. With 14 years of experience in the WordPress ecosystem, Marco discusses various aspects of web development and optimization.

Key Points Covered

• Importance of Website Speed: Marco emphasizes that website speed is often overlooked in the development process but is critical for user experience and search engine ranking. Slow websites lead to decreased user engagement and conversions.

[Uh. Sadly, Marco is spouting a little web dogma. There is no evidence speed makes a difference in search-engine page ranking. Bad speed makes for poor user experience.]

• Factors Affecting Website Speed: He identifies several factors that affect website speed, including hosting, scripts and resources, assets (like images and videos), and themes and plugins. He advises careful selection and management of these elements.

[This may seem obvious — but that is what value analysis is all about.]

• How the Web Works: The presentation explains how web requests and responses work, using the analogy of walkie-talkie calls. Marco demonstrates how to check the number of requests a website makes using browser developer tools.

[The metaphor of a walkie-talkie communicating back and forth being like server and website interaction is a good one. Both usually can’t talk at the same time. You have to wait for a response first.]

• Caching: Different types of caching (site cache, browser cache, server cache) are discussed. Marco explains how caching can speed up a website by storing copies of web pages or elements to reduce the number of requests.

[Caching is important but it isn’t always the saving grace for bad acting plugins or heavy 24-bit PNG photographs.]

• Image Optimization: The importance of image optimization is highlighted, with a focus on compression techniques and the use of tools like squash and Smush for efficient image handling.

[Image optimization doesn’t make as big a difference as many suppose. WordPress does a good job of managing images on it’s own. Optimization is only needed fro the most gross of errors — using the wrong image format. Many in the chat, were hyping up webP format as superior since it is endorsed by Google because they think they invented it. But The gain is insignificant compared to the cost of overloading your media library which plugs up backups and stalls servers. Marco said he only uses JPEG format — and we agree. Lossy JPEGs are the only way to go. Do not use webP. We’ve done side-by-side speed tests and it is not worth it.]

• Tools and Plugins: Marco suggests using Lightspeed Cache for caching and demonstrates how to use it along with other tools like Pingdom and GTmetrix for monitoring website performance.

[We think LiteSpeed destroyed our website performance optimization business. That is how good it is.]

• Best Practices: He advises going light with themes and plugins, only using what is necessary, and emphasizes the importance of testing the website’s performance throughout the development process.

[Isn’t this obvious? Maybe not to a novice.]

• Hosting and Geographic Location: The choice of hosting service and the geographic location of servers are also discussed as crucial factors in website performance.

[We think CDNs are a bane for speed. WE do not use any CDN and if a client is on CDN we get them off of it. Especially bad is CloudFlare for 504 server not found errors. What is worse than a slow site? No site loading.]

• Environment Impact: Marco mentions that efficient web design and development can positively impact the environment by reducing data transfer and power usage.

[He only mentioned this because he works for GreenGeeks and that si their positioning strategy for niche differentiation.]

What things did Marco do that actually helped his site speed in his demonstration? What were the load time improvements with each step?

In his demonstration, Marco Berroco took several specific actions to improve the speed of his website. Each step resulted in measurable improvements in load time:

• Disabling Unnecessary Plugins: Marco started by deactivating plugins that were not essential to his website’s functionality. This included removing a page builder plugin (Elementor). This step significantly reduced the number of HTTP requests and the overall weight of the site, leading to improved load times.
  Load Time Improvement: After deactivating Elementor and other unnecessary plugins, his website’s load time improved from 2.38 seconds to under 2 seconds.

[This is a no-brainer. And we’re surprised he had so many unused plugins still activated and slowing down his own site. Not a test site. His actual site. Physician heal thyself.]

• Using Lightspeed Cache Plugin: He activated and configured the Lightspeed Cache plugin. This plugin optimizes various aspects of the website, including caching, combining CSS and JS files, and more.
  Load Time Improvement: After applying the preset configurations in Lightspeed Cache, the website’s load time further reduced to around 1 second or less.

[This is the same amazement we feel about our site and client sites when using LiteSpeed servers. For simplicity, he just used the default “extreme” settings. That can break some websites because of file concatenation. But most do fine. No harm trying it.]

• Optimizing Images: Marco discussed the importance of image optimization and demonstrated the use of image compression tools like Smush and squash. He showed how compressing images can significantly reduce their file size without a noticeable loss in quality.
  Load Time Improvement: Although specific numbers weren’t provided for this step, image optimization typically contributes significantly to load time reduction, especially for image-heavy websites.

[We do image optimization as best practice using one plugin — Imsanity plugin. But it really isn’t necessary with all the improvements in WordPress media file management.]

• Removing Page Builder: By removing the page builder (Elementor), Marco significantly reduced the number of requests and the amount of JavaScript and CSS that needed to be loaded.
  Load Time Improvement: This step was part of the initial plugin deactivation but is worth highlighting separately due to the substantial impact page builders can have on performance.

[There is no reason to use a pagebuilder plugin any more with the advances in Gutenberg block editor.]

• Testing and Tweaking: Throughout the demonstration, Marco emphasized the importance of continuous testing and tweaking. He used tools like Pingdom to measure the impact of each change he made.

[Of course. You have to find out what is going on with tests. We like to use WebPagetest.org to see waterfall reports. But Pingdom is quick and dirty tweaking.]

• General Best Practices: In addition to these steps, Marco discussed general best practices like choosing the right hosting provider, considering server location, and using caching effectively.

[All these considerations are mostly ivory-tower nonsense.]

In summary, by deactivating unnecessary plugins, optimizing images, and using caching plugins, Marco was able to significantly reduce the load time of his website. These steps demonstrate the importance of optimizing various aspects of a website to enhance its speed and performance.

What was the final result in load time?

The final result in load time, as demonstrated by Marco Berroco in his presentation, was a significant reduction from over 2 seconds down to approximately 160 milliseconds. This drastic improvement was achieved after applying aggressive caching and optimization strategies using the Lightspeed Cache plugin and deactivating unnecessary plugins, including a page builder.

This load time of 160 milliseconds represents a very fast response time for a website, especially compared to the initial load time of 2.38 seconds before the optimization steps were implemented. The reduction in load time is a testament to the effectiveness of proper optimization techniques in web development, particularly in the context of WordPress websites.

The real questions is: Why wasn’t Marcos site already tweaked and fast? It’s like an auto mechanic with a broken-down car. Not very credible.

How does Marco’s technique differ from other technical experts on page speed and word press optimization?

Marco Berroco’s approach to page speed and WordPress optimization in his presentation reflects several standard practices in the field, but there are also nuances that might differentiate his technique from others:

Focus on Practical Demonstration: Marco’s method included a hands-on, step-by-step demonstration of the optimization process, showing real-time results. This practical approach can be more engaging and instructive for viewers, especially those who are new to WordPress optimization.

Emphasis on Plugin Management: While most experts highlight the importance of minimizing plugin usage, Marco specifically demonstrated the impact of deactivating a major page builder plugin (like Elementor) and other unnecessary plugins. This underscores the sometimes significant impact that certain types of plugins, particularly page builders, can have on site speed.

Use of Specific Tools: Marco chose specific tools (like Lightspeed Cache and image optimization tools like squash and Smush) and showed how to use them effectively. Different experts might prefer different tools based on their experiences and the specific needs of a website.

Detailed Explanation of Web Mechanics: He provided an explanation of how the web works, including the concept of “walkie-talkie calls” for web requests. This level of detail might be more than what some experts provide but can be very beneficial for understanding the underlying principles of web performance.

Balancing Performance with Practicality: Marco’s approach balanced the need for speed with practical considerations like website functionality and the user experience. This is crucial, as over-optimization can sometimes negatively impact the user interface or functionality.

Environmental Consideration: He mentioned the environmental impact of web optimization, an aspect not commonly addressed in many optimization discussions. By reducing data transfer and server load, efficient web design can have a positive environmental impact.

Comprehensive Testing and Analysis: The continuous testing and analysis of the website’s performance after each change is a method used by many experts. However, Marco’s detailed demonstration of how to interpret results from tools like Pingdom can be particularly instructive for those learning about optimization.

Did we learn anything new? Yes. We learned GreenGeeks has a speed dashboard with a waterfall and you can sort requests by load-time duration. We didn’t know that and we are GreenGeek hosting fans. But did that change our lives or even our website? Nope. So it was a long dull seminar for us.