WordPress Speed Optimization and why Most Web Pages Are Too Slow

Originally posted at pegasaas.com -- read the full article

If all you had to do was slap a caching plugin into your site to get your site speed up to where it needs to be to be faster than your competition, well, you probably wouldn’t be reading this article.

Why You Need To Be Faster

You probably realize that in order to rank well in the search engines (search engine, because, really, we all know it’s Google or nothing for search), your website needs to be stinking fast, or at least faster than your competition.

If all other ranking factors were the same, and your competition’s website was faster to load, you’ll encounter the following:

• your visitors will find your competition first
• your visitors will stay at your competitions website
• your bounce rate will be higher than your competition
• your conversion rate will be lower than your competition

Because We Care About the User Experience (UX)

Google is all about the role of User Experience when it comes to search engine placement. If your website keeps your visitors happy, and on site, gives them what they’re looking for and your bounce rate is low for your search engine listing, you’re going to do better than if you have a terrible user experience (bad or irrelevant content, bad design, slow site). Google wants to list sites that are providing value and where the User Experience is excellent.

So, where does website speed play into the “user experience”?

Well, if your website takes to long to load, your visitors may bounce (meaning, they don’t visit more than one web page), not stay long, and likely not convert to paying customers.

How Slow Is Slow?

Consider that for every second of load time, the probability of your visitor bouncing (if they even reach your website) increases by 13%. That means that by 15 seconds, the probability of the visitor bouncing increases to 106%!! If they’ve stuck around to actually visit the page, the chances of them visiting a second page are virtually nothing. It doesn’t matter if you have the best thing since sliced bread, or the widget to save the world, your visitors will bounce from a page that takes 15 seconds to load.

On the flip side, for every second you can make your website faster, studies have found that you can improve your conversion rate by 11%. So if you’re somehow converting 2% of your visitors with a 10 second load.

So how do you make your WordPress website optimized for speed?

So How Do We Go Faster?

It’s no secret that adding a caching plugin to your WordPress website is one of the first steps you’re told to do when you’re working on your WordPress speed optimization.

But while using a caching plugin may reduce your “time to first byte”, it only affects the time that the page begins to start to load the rest of your resources.

I’ll explain.

How A Page Is Rendered

When your web browser first makes an attempt to view your web page, it has to first load the HTML. If you’re running a WordPress website, this can take anywhere from 0.5 seconds to 15 seconds or more depending upon the server resources available to you and how many plugins (and what actions those plugins are performing) are installed. If your website has a slow connection to the database, or you’re on a shared hosting environment with 500 other websites which uses old spindle hard drives (rather than the new solid state drives), the time it takes to generate the HTML that gets served to your visitor can suddenly balloon.

Caching the HTML can reduce the the “time to first byte” from a painful 15 seconds down to virtually nothing.

However, this is only a small part of entire page load cycle.

Originally posted at pegasaas.com -- read the full article for more

What A Caching Plugin Doesn’t Do

Once the HTML has been received to your browser, the browser then typically requests the CSS stylesheets, JavaScript files, images, and fonts. Because stylesheets and JavaScript are “render blocking” (meaning, they block the rendering of the page until the final stylesheet and JavaScript file has finished loading), the page doesn’t actually begin rendering for an additional 2-10 seconds. The time it takes to load those resources depend on how many there are, what type of web server your website is on, how large those resources are, and whether any of those resources are hosted with a third party service. Often, third party websites resources can take longer to load, as they require an additional DNS lookup.

Once the render-blocking resources are loaded, then the page can begin “painting”. The terms “first contentful paint” and “first meaningful paint” are used to describe the time it takes to first paint the first bit of content to the page, and then the time it takes to finish the rendering of the most significant part of the page. The higher these values, the more likely your visitor will bounce.

After the styles are rendered, the JavaScript is parsed and the page re-drawn (if there are any dynamically generated components) then the images are loaded. When you hear about “fully loaded time” this is when all resources, be they stylesheets, scripts, images or fonts, are all loaded and the page is done it’s load phase. Additional aspects of the page may be loaded at a later time, however at the “fully loaded time” (which Google PageSpeed Insights refers to as the Speed Index), the CPU typically is done grinding away at getting everything in place.

There is so much going on with just the render phase that plain HTML caching just can’t help with.

This is where we come in.

Originally posted at pegasaas.com -- read the full article for more

What We Do

We built Pegasaas Accelerator WP first as a WordPress speed optimization plugin, and second as a caching plugin. Yes, it has amazing features as a caching plugin such as auto clearing your cache on a specific schedule globally or on a page by page basis, or manually on a page-by-page basis or globally.  Caching is just one small aspect of making sure the WordPress site is optimized for speed.

But where Pegasaas shines the most is in the optimization of the rendering of the page.

Blazing Fast Render

Pegasaas Accelerator WP automatically defers the loading of your stylesheets at the same time as automatically detecting, generating, and inserting critical above the fold to optimize the critical rendering path.  By doing this, Pegasaas can reduce the rendering (also referred to as "First Contentful Paint" and "First Meaningful Paint") down to 1-2 seconds.

Super Low Fully Loaded Time

To keep the fully loaded time (also referred to as the "Speed Index") down, Pegasaas automatically applies foreground and background image lazy loading.  Pegasaas also has the ability to lazy load stylesheets to avoid the “defer unused css” warning in Google PageSpeed Insights. In addition to deferring unused CSS, Pegasaas can lazy load unnecessary scripts to further improve load time and the time-to-interactive metric.

Automatic Image Optimization

To keep the above-the-fold images loading fast, we also automatically optimize your images for you by first detecting the optimal dimensions, resizing your images, and then compressing them. Pegasaas can take un-optimized images and resize and compress them down to 2% of their original file size (for example, 3.6MB down to 65KB).

Originally posted at pegasaas.com -- read the full article for more