Free Guide – 7 Steps To A Fantastic Website PageSpeed

How does Easy manage a perfect 100 Website PageSpeed? By following the simple 7-step free guide below. Each step leads to an incremental improvement. PageSpeed Optimization can be frustrating because there is a near-infinite number of choices. To cut down the time involved, order the investigation. These are the steps Easy uses:

Budget
Tools*
Theme*
Content
Caching*
Hardware.
Go to Step 1

*See Summary below

At each step, resist the urge to second guess a previous decision. This is why we have an ordered list, to speed the search for an optimum solution. As much as possible we don’t want to revisit previous decisions. So we formalize and limit backtracking to Step 7.

At each step start with the most popular, most widely used solutions. Not always a guarantee of success, popularity suggests others have found the solution effective. From there look for newer solutions that haven’t had time to grow in popularity. From there look for simplicity in setup. All too often a product comes with hundreds of options and a steep learning curve. Finding the “sweet spot” while tuning is all but impossible with a large number of options to choose from.

Step 1, decide your budget.

From a cost point of view, it may be more economical to start first at step 6 with an enhanced WordPress server rather than a shared server, depending upon the premium charged. Otherwise, remain on a shared server until volumes grow to justify the expense. As a proof of concept, Easy uses low-cost shared servers.

Step 2, you need a tool to measure performance.

You cannot fix performance without measurement. The simplest tool is PageSpeed Insights or WebDev. In addition, the F12 key will pop-up Dev Tools (Lighthouse) on your browser (chromium-based). These allow you to evaluate desktop and mobile performance and the metrics are interchangeable. This allows direct comparison between the results, using the same metrics Google uses, making this a no-brainer.

You are going to want a mobile pagespeed of 60 or better (desktop pagespeed 90 or better) before any caching if you’re going to reach 100/100. There are other tools such as Webpagetest for more in-depth analysis if required when trying to identify a specific problem.

Step 3, you need to select a theme.

Fishing lures are not designed to catch fish. They are designed to catch fishermen (pc). The WP themes are much the same, so be forewarned.

A good theme should maximize the magician’s trick of misdirection. The theme should allow for a minimalistic landing page “above the fold”. Something to hold the user’s attention while the bulk of the work is done asynchronously “below the fold”. In this fashion, the site appears much faster than it really is. For example, Easy’s website is designed in this fashion.

What you don’t want is a single big long high-res graphic for your webpage because there is no opportunity to optimize this. Until this graphic loads, the user doesn’t know if your site is broken. If the load takes more than just a few seconds the user will assume your site is broken and leave. This sort of solution can look great on a desktop but can be a disaster for mobile users.

In addition, you need ease of use. What use is a menu or navigational controls that disappear when the user scrolls the page? The theme needs to provide this “native” — “out of the box”. You definitely don’t want to “fix” this later with plugins. For example, Easy’s controls and menus “float” in place while the content scrolls below.

Step 4, consider your content.

Hi-Res graphics take time over a mobile connection. If you are loading these in real-time above the fold you are never going to get a great mobile pagespeed. Keep it simple. Compress and lazy load the expensive graphics below the fold.

Third-party content such as Google AdSense is another problem. Your tools will likely show that these are the slowest items on your website. For performance, you want to lazy load these below the fold as much as possible. Otherwise, the performance hit will kill your pagespeed.

Often overlooked is CLS (Cumulative Layout Shift). Google PageSpeed marks down sites that shift graphics while painting the viewport. This problem is a mix of theme and content. You want a theme that doesn’t resize graphics once painted, and you need to load content top to bottom to avoid shifting graphics to make room for later graphics.

Step 5 is caching.

Often this is combined with various forms of minification and lazy loading. The aim is to load the important information first, and the less important information as time permits, while minimizing wait times. Caching is hardware and software dependent, so there is no “one size fits all”. Caching should get your mobile pagespeed above 80 if you have made good choices along the way.

Unfortunately, caching can also “break” your website. For example, the cache may not recognize that component B needs component A to load first. Instead, it sees that component A is very slow, so it loads B at the same time as A. Which breaks B if it finishes loading before A.

This means you need to test caching extensively, which can be extremely time-consuming if your caching solution has dozens of different options. Even if the cache only has an on/off switch testing can be extremely difficult, because the speed of A and B loading can depend on the cache, user device, network, and content.

At this point, depending on the budget you may go to step 6 or 7. You should be able to reach this point using a low-cost server and free themes and plugins. As such, it is worth skipping step 6 and seeing if you can tweak more performance before throwing money at the problem.

Keep in mind while testing your caching solution that caching is typically turned off for users that are logged in. Allow for this in your test environment. Especially when using the F12 Key. Use a new incognito window to measure performance.

Step 6 is hardware.

The various options are enhanced WordPress servers, CDN, and AMP. Most low-cost hosting relies on shared servers. Easy Software is hosted on shared servers without any problem. However, one way to increase performance when all else fails is to move to dedicated WordPress servers. Often they have specialized caching available, so be sure to revisit step 4.

CDN (content delivery network) is a specialized form of caching, where the cached pages are moved from your host to high-performance servers. Your cached content is delivered not from your host, but from high-performance servers across the Internet. Our experience with CDN is that they work best when your performance is poor. Recently a free CDN for example dropped our pagespeed from 100 to around 95. However, when our mobile pagespeed was 60 testing a paid CDN boosted our pagespeed to 90.

AMP (accelerated mobile pages) is a specialized form of CDN for mobile users. AMP pages are a simplified version of your website cached on high-speed Google servers. Functionality is reduced to minimize traffic on the mobile network. In effect, this is a return to the “dumb terminal” solution and is likely to suffer the same fate long term.

PWAs (Progressive Web Apps) are outside the scope of this discussion.

Step 7, go to step 1.

Realize that performance is an ongoing process. As changes are made to the content and to the competition, this will affect relative performance, requiring you to retune to maintain and/or improve. Also, if you did make use of advanced hardware in step 6, then it is a good idea to retune from the beginning on the new hardware. Expect to loop through step 7 multiple times to reach 100/100.

Summary

These are a list of free tools, themes, and caching plugins to aid in performance optimization.

Free Pagespeed Tools

Free Sticky Themes

Free Cache

Top