A Beginner’s Guide to Website Speed Optimization

Chapter 2: Website Performance Impacts Business Success

Performance Impacts Sales

Website performance is user experience – the power of page speed, translating into attractive online shopping experience inspires sales figures and eventually determines online business success. The industry kingpin Google began factoring page speed into its proprietary search algorithms ever since it experienced the compelling repercussions of website performance lapses impacting sales. The search engine giant once experienced a 20 percent slump in traffic resulting from half a second delay in page load times.

While Google was quick to resolve the issue that barely crippled its market share, the same is not always the case with online businesses yet to establish their presence in the competitive online marketplace.

Q: So how does website performance affects sales for an average online business?

A: Dramatically, is the only answer!

Forrester consulting firm recently studied the state of consumer online shopping expectations and evaluated how underperforming websites kill business bottom line whereas high-level website performance rapidly boosts sales.

The research finds 88 percent of internet users choose online retailers delivering high-performance and user-friendly website experience, and almost 50 percent abandon websites that fail to load within 3 seconds.

These actions consequently impact sales. 79 percent of dissatisfied customers no longer revisit underperforming websites – except when you’re Google or Amazon. 46 percent of dissatisfied customers develop a lasting negative impression and 44 percent share their shopping experiences with the rest of the world. The implications go well beyond the cyber world as 87 percent of customers shop in online as well as brick-and-mortar retail stores.

While service and product quality apparently has the biggest impact on business sales, converting website visitors into purchasing customers in the cyber world largely depends on developing a positive customer impression. And this is where ecommerce website performance parameters such as ultra-fast page speed and rapid check-out processes come into play, ultimately giving customers a positive psychological impression encouraging sales and customer loyalty.

Performance Impacts Conversion

As the most important and powerful internet metric for online businesses, conversion rates holistically depend on website KPIs in establishing competitive advantages for online retail platforms.

In the cyber world, traditional marketing campaigns alone do not boost conversion rates without improvements in website user experience – comprising of page speed and website responsiveness.

Obama’s fundraising campaign during the 2011 Presidential Elections raised an additional $34 million when the Obama for America website shrunk page load time from 5 seconds to 2 seconds – that’s 14 percent increase in donation conversion with mere 3 seconds of website performance improvement!

Bringing potential customers to the doorstep of brick-and-mortar retail stores often requires a thoroughly planned marketing and advertisement campaign. And once customers enter the shop, they usually don’t leave without a purchase.

It takes far fewer efforts in bringing online customers to visit an online retail store – internet users don’t mind a few wayward clicks to open the Web pages they’ve never visited before. Search engine optimization and social media adverts often do the trick.

Equally convenient for visitors is to leave the site if the required information is not made available within a bearable few seconds – for unimpressed visitors, that doesn’t take a lot more than a few wayward clicks either!

User experience in terms of website performance and responsiveness, therefore, becomes the ultimate factor impacting conversion rates in online marketplaces. Ecommerce is first and foremost all about customer convenience and reaching potential customers efficiently with the right information, products, and services at the right time.

Neither of which is possible without page speeds faster than users abandoning visits due to website performance concerns. Not aware about your website performance impacting conversion rates? Tools like Google’s Test My Site tool can help answer that question (see example below).

Performance Impacts User Engagement

User engagement statistics feed the cauldron of website analytics in developing the best strategies to optimize online sales. Online businesses established in the competitive cyberspace well understand the importance of website performance and tools that analyze and predict next-best actions correlating page speed and revenue.

Enhanced user engagement information with responsive and fast-loading websites is often seen as a proxy for online business success. User engagement is highly dependent upon human limitations in storing short-term memory beyond a few seconds, and human aspirations of feeling in control over the machine under all circumstances.

For underperforming websites – notice underperformance being a relative term – page load times exceed human limitations, whereas failure to process user requests gives the false impression of ignorance or incompetence in delivering the desired response efficiently and accurately.

High-performing websites on the other hand – notice high-performing being a relative term as well – impact three parameters that determine user engagement: user feelings, user mental states, and user interactions. These three aspects create an emotional, cognitive and behavioral connection between human visitors (can’t say much about bots!) and the website.

With this connection in place, online businesses can exploit user engagement characters such as focused attention, motivation and trust in converting visitors into customers, repeat customers and even brand ambassadors generating leads across the social media and outside of the internet world.

Performance Impacts OpEx and Revenue

While investing in website performance optimization adds to the CapEx in favor of shaving off a few seconds in page load times, the return is inevitably seen in the shape of rising revenues and shrinking operational cost and hardware investments.

Ecommerce giant Shopzilla saw a 50 percent reduction in its operational budget by shrinking page load times from 7 seconds to 2 seconds. Performance improvements with a website design overhaul enabled the company to utilize the same hardware resources to efficiently in processing the same amount of website user requests. The improved website responsiveness also increased revenues by 12 percent as the retail store accommodated expanding web traffic without prompting additional investments in consequently expanding hardware resources.

Improvements in website KPI also lead to a better Google AdWords Quality Score and therefore reduce the Cost per Click (CPC). Online businesses with a high-quality score and page speed are able to spend advertisement budget efficiently and effectively, thereby maximizing reach and attracting customers without necessitating additional OpEx.

A slowdown, on the other hand, minimizes resource utilization. Bing conducted an independent study on its website performance affecting revenue and found a 2 seconds delay in delivering search query incurred a revenue loss of 4.3 percent per user.

And customer behavior doesn’t alter drastically when the delays are removed. When Google removed a delay of 0.4 seconds in providing search results, users still made 0.21 percent fewer searches even with the web page performing optimally.

Additional efforts in enhancing website performance may stretch CapEx temporarily, but the tradeoff is ultimately justified as the extra investments translate into higher bottom line, increased revenue streams and minimum operational expenses.

Performance Impacts Usability

Websites with the steepest learning curve achieve the highest customer lock-in. Internet users consider the time taken in learning to use alternate websites as a significant switching cost, which acts as a mechanism to lock them into online services offered via high-performance websites.

The relationship elements between website usability and customer loyalty are tied down to website KPIs, including page speed, load time and website responsiveness to user requests. A hypothetical model of website speed optimization puts these elements into consideration, with characteristics such as Site Trust, Interactivity and Information relevance considered as a subset of website usability by end-users.

Similarly, web crawlers and search engines measure website performance in terms of page speed, navigability, user experience, responsiveness and reachability to a global audience as a subset of search engine optimization impacting search rankings.

End-users expect the following traits affecting the usability of websites:

• Easy to operate, navigate and understand.
• Directly deliver relevant information and controls being sought.
• Accessible across all device form factors, machines, operating systems, browsers and geographic locations.
• Delivering legitimate, credible and high-quality information, products and services with minimal clicks and browser requests.

Fulfilling these intents is vital to maximizing website performance, usability and customer loyalty, all of which are the overlapping elements of the single system that works as a channel to online business success.

Chapter 3: Speed Optimized Mobile Website Overshadows Desktop

Mobile is the future of everything wired. Adoption is skyrocketing as the mobile device onslaught looks to encompass the entire human race – 2.32 billion smartphone subscriptions, around thirty percent of the global population in 2017. And the booming tides of stimulating repercussions continue to disturb online businesses barely making inroads into the mobile internet marketing segment.

Success in the cyber world depends on the ability to embrace a mobile-first approach in reaching the exploding population of mobile subscribers. And for organizations pushing to reach the massive mobile population effectively, the unimaginable awards emerge just around the corner.

Desktop internet marketing, on the other hand, is so last decade-ish. Google the terms “Post PC Era”, “freefall of PC sales” and the “death of desktop machines”, and what returns is a myriad of journalistic fodder portraying a bleak future for organizations still lingering around the desktop internet user-base only.

For such industry laggards, it’s not too late to embrace a mobile-first strategy, yet. However, this approach doesn’t always pay off for forward-looking online businesses either when they fail to optimize their reach to a mobile user-base.

That’s not as much for taking a false direction in going mobile than missing a few vital steps and not filling the void in reaching mobile customers efficiently and effectively. These gaps center on the lack of responsive and high performing mobile websites.

Mobile vs. Desktop – Why does it Matter?

Because everyone else is doing it, to start with. Competition for the mobile space is intense and back in 2014, the Yahoo CEO labeled it as the “tipping point” for the internet. And she was right! Stone Temple pulled some statistics from Similar Web in 2017 and not to our surprise, but mobile accounted for over 50% of the traffic based on 77 billion website visits.

Here are a few additional statistics:

• 87% of U.S. citizens own mobile devices.
• 45% of these own smartphones.
• 90% of these go online via mobile.
• These mobile users average 1.4 hours of mobile internet browsing every day.
• 74% would abandon mobile websites that don’t load within 5 seconds.

The entire focus should lie on treating the two entities – mobile and desktop – separately, at least from a website design standpoint. Without this strategy, mobile user experience in accessing desktop versions of websites is usually compromised in terms of page load times, usability and functionality. Compromising these core aspects of mobile websites can force online businesses into facing the obvious negative implications including:

• Low Mobile Purchases: Mobile internet shoppers have a shorter attention span and lower patience than desktop internet users.
• Losing Competition: According to a survey of over a thousand U.S. adult smartphone users, almost 75 percent of the respondents said they prefer revisiting mobile ecommerce sites that deliver high-end mobile user experience.
• Losing Brand Value: Poorly designed mobile websites that simply shrink the HTML of full desktop website version for visitors to zoom in and out in navigating through mobile Web pages makes users less likely to engage with the company in the future.

These consequences negate the following primary objectives of reaching customers via mobile internet:

• Expanding customer-base.
• New advertisement options.
• Offering quality services efficiently at user convenience.
• And most concerning, the inevitability in productively embracing mobile web for business development.

Desktop and mobile differ in technology resources, form factor and user interface – all aspects governing website performance optimization implementations. Without optimizing mobile websites separately to deliver the best mobile website performance, several website KPIs degrade and negatively impact mobile user-experience.

And since mobile technologies give users the ability to search the web on-the-go, while standing, walking or even lying comfortably on the couch, the hunger to feel in control of website operations drives user expectations beyond conventional standards applicable only in the desktop arena. The ability to deliver mobile website content within this short attention span of around 2 seconds makes all the difference in winning customer loyalty and long-term business relationship with mobile internet users.

High-Performance Mobile Website and the Competitive Space of High Conversions

Considering the high volume of internet traffic using mobile devices for ecommerce purchases, high-performing mobile websites is an evident priority for ecommerce organizations. A recent research study reveals ecommerce businesses could miss out on millions of mobile shoppers with the potential aggregate revenue per conversion of mobile shoppers averaging around 80 percent of the same among desktop users purchasing online.

The conversion rate among small ecommerce businesses operating on low-performance mobile websites is typically 0.6 percent in comparison with the 1.6 percent conversion rate of desktop ecommerce providers in the same size segment.

Tablet users, on the other hand, spend 20 percent more than desktop users. By capturing this audience, online businesses making inroads into the mobile internet marketing segment can expect high revenue streams that could potentially replace desktop audience one day – although that day currently seems to be a bit too far into the future.

Nevertheless, the demand to satisfy the needs of mobile users will continue to rise exponentially. Search Engine Optimization of mobile websites is now a separate trade – and so is mobile website speed optimization, which constitutes of:

• High page speed
• Low page load times
• Efficient delivery of media-rich content
• Download speed
• Optimal site format
• Easy navigation and usability across the website
• And a fully functional website requiring minimal user-input in performing an otherwise complex task of mobile internet usage.

By addressing these issues, micro-sites in the mobile internet sector can hope to compete with their larger counterparts enjoying up to 1.2 percent conversion rates (that’s twice as much as desktop-site conversion rates!), and well over 80 percent of revenue per conversion achieved with the desktop versions of their sites.

Fastest to the Finish Line Stand Tallest on the Podium

It, therefore, is no surprise that Fortune 100 companies average 5 seconds in page load times for their mobile websites – that’s two seconds faster than the average acceptable standards (7 seconds max).

For ecommerce merchants, however, 5 seconds of page load time is perhaps sufficient to put visitors off toward a faster alternative. And in the retail segment, some websites load as fast as Google – page load times as low as 1 second!
Strikingly fast, perhaps a bit Google-like focus on page speed and website responsiveness. That, however, is the average page load time of 16 of the top 100 multichannel retailers reaping the rewards of an insanely-fast mobile website and thereby yielding multi-billion dollar revenue figures from mobile customers.

Google describes a number of changes (here and here) in mobile website design to render Web pages on mobile screens well within 1 second – that’s even if you’re not a Fortune 100 company or a Top 100 ecommerce retailer!
For those uber-geeks taking mobile Web development matters into their own hands, the non-profit World Wide Web Consortium (W3C) provides a handful of best practices (here and here). It’s a long read, demonstrating how important and intensive mobile website optimization really is!

And for business owners employing Web developers to design highly responsive and speed-optimized mobile websites (here are 60 Awesome Web Development Tools that may help you), the improvements should be sought in the following three ingredients of mobile website anatomy:

• Fluid grids
• Flexible images
• Media queries

And a design focus on the following mobile website elements:

• Masthead
• Image gallery
• Product description
• Auxiliary information
• Footer

Customers appreciate fast responding websites and ultra-low page load times. Mobile technology and the innovation coming along with increasing reliance on smartphones and tablets are showing no signs of slowing down. Top online retailers understand the need to deliver website content efficiently from Web servers to the tiny real estate of mobile screens. Getting it right with thoroughly designed websites dedicated to mobile platforms enables customers to make quick and educated purchase decisions that ultimately create never-ending revenue streams for online businesses.

60 percent of consumers use mobile devices exclusively to make quick purchase decisions. Mobile devices and desktop computers or laptops are considered equally important as the media source of information – 42 percent of internet users favor of mobile as opposed to 43 percent for PC/laptop – but the convenience in accessing the Web via mobile devices is driving mobile internet usage and business opportunities.

And if you still plan to overlook mobile website performance, you might want to reconsider the opportunities and success otherwise achievable mostly with a dedicated, speed-optimized mobile website.

Chapter 4: Common Business Mistakes that Kill Website Performance

Online marketplaces – like battlegrounds of the ancient Greeks – are high-stake competitive platforms where only the most diligent survive. And as with all high-stakes battles, human factors (decision errors, blunders, and ignorance) contribute significantly toward the outcome of online business competitions.

Yet, online businesses and webmasters responsible for maintaining high-performance and fully-optimized websites tend to overlook crucial web design elements that cripple site load times. And the consequences are usually as hazardous as the Trojan Horse penetrating through fortified defenses and taking full control over the City of Troy, despite the size and dominion of the Trojan Army.

Competition for online business success is just as intense if only a bit less violent. The fight for customer attention boils down to delivering the requested content most efficiently and accurately, irrespective of the company size and past laurels. And just like human blunders and ignorance dictating the outcome of the Trojan War, common mistakes killing website performance tend to determine the outcome of online business competition – fastest to the finish line wins the race!

The aptly named Gap of Death, the interval between expected page load time of under 2 seconds and average site load time of 5 seconds expands or contracts due to surprisingly neglected website optimization tactics and business decisions. Contrary to the popular sentiment, speed optimization is ideally implemented across all stages of website development, and not just after building the entire site, which is only when website owners realize the need to push for website performance optimization.

Final tweaks and speed optimization add-ons implemented after developing websites does improve page speed though, bringing down the load time to at least reach the Gap of Death. But even within this performance zone, conversion rates go down by 7 percent for each second of delay after the expected page load time of 2 seconds.

On the other hand, website owners wary of speed optimization tactics can aim for higher website performance by avoiding the following deadly mistakes as well:

Mediocre Web Hosting Service

The mistake of opting for a mediocre Web hosting service can live forever. With over 1.8 billion websites online as of 2020, the web hosting space is both crowded and fractured. Global availability of a vast array of hosting options is pushing businesses and hobbyists to establish their presence in the cyber world. The demand for cost-effective web hosting services is rising exponentially, and hosting providers are more than willing to compromise service quality in accumulating market share with low-cost tiers.

Mediocre web hosts selling cost-effective services continue to maximize profitability by hosting thousands of websites on single instances of bloated Apache stacks. Un-optimized servers running thousands of public websites on a single server stack is particularly harmful to ecommerce websites characterized by uncontrollable web traffic spikes, multimedia content and large website files.

Web hosting and development companies with a common response to speed optimization concerns that “everyone’s got broadband these days” translates directly into financial losses and damaged brand reputation for online businesses. Attractive website performance is critical to the success of ecommerce businesses since websites taking more than 3 seconds to load immediately lose 40 percent of the traffic. 79 percent of dissatisfied visitors almost never return to slow ecommerce sites!

Perhaps then, investing time and money in pursuing the highest quality web hosting services is key to maintaining high-performance websites generating vast revenue streams by attracting visitor attention efficiently and accurately.

Giving Way to Bandwidth Thieves

Website speed optimization is an ongoing and evolving process and goes well beyond subscribing to the best web hosting services in the world. Some business decisions intended to maximize revenue by altering website design and features adversely affect website performance by stealing size-able chunks from the bandwidth allotted to each individual visitor.

Too Many Widgets or Plugins

Additional features and functionality always pleases website owners and developers. Widgets and plugins enable convenient changes to existing websites along with a slight burden on website performance. Even with the smallest of widgets such as the Google+ button box, the burden to website performance in terms of page load time can increase by as much as 2 seconds in some instances.

The Facebook like box is another common slow down as it has been known to easily add 40+ HTTP requests (as seen below). On a clients site, we saw that it added 700 KB to the overall page weight, which is not good!

Keeping add-ons limited to a bare minimum is essential to maintaining optimum website performance – even plugins installed to the same website core compete in delivering the quickest response to browser requests, ultimately draining bandwidth.

Sometimes the quality and functionality of plugins installed matters far more than the number itself. Plugins that query large streams of data to perform complex operations should do this off-server, and not within website hosting environments such as WordPress.

Too Many Ads and External Services

Tempting as it may seem, selling too much real estate to third-party advertisers drastically degrades website performance. Too many ads or slow loading ads drive bounce rates and negatively impact online marketability. The financial losses that come with high bounce rates outweigh the monetary benefits of handing over vast website spaces to advertisers.

External services typically bring with them two problems. One is brought about by sheer volume, the other has to do with waiting until they load.

• If you have a lot of external services, you need to load all of them and wait for information from them on each page load. The more calls you have, the more you wait, the higher the load on your own server and the higher chance you have of bumping into the second issue.
• In some cases, the page load will wait until the data transfer is completed between your site and the external service. If the service is called in the header and there is a service interruption your page will simply refuse to load.

According to one research study, the cost of generating revenue with a banner advertisement is almost 33 percent of additional latency. Intrusive pop-up ads further aggravate visitors into abandoning websites at even higher rates.
Affiliate code, even just those few additional lines of script take up valuable memory space on the hosting environment and require additional processing cycles in delivering the content to end-users.

Nevertheless, online advertisement is the primary source of income for many online businesses (think Google and Facebook!), and an optimal website advertisement model goes a long way in increasing website revenue while minimizing the cost of latency and page load delays.

Bloated Design Theme and Incompatible Multimedia

Tempting website design themes and multimedia content are head turners for online traffic. That is if the content even reaches the eyes of impatient visitors fast enough. High-quality images and videos (large pixels, large file size) take longer in downloading onto requesting browsers, whereas low quality, lightweight graphics barely capture user attention despite their lower load times.

However, graphics intensive content is not always the deciding factor in driving conversions and sales. This is especially true for ecommerce websites that must contain fast-loading product images and videos describing the value of products, and not necessarily their visual beauty.

Compatibility issues also affect multimedia and application performance for certain browsers and geographic locations. Take Google Chrome and Shockwave Flash as an example. The two rarely play nice to each other. Similarly, government restrictions can also prevent specific multimedia content from reaching local visitors.

Websites with non-functional multimedia content take excessive client-server communication cycles to reach requesting browsers, ultimately deteriorating website performance. It is, however, up to website owners to ensure streamlined serviceability across all browser platforms, device form factors and geographic locations as government policies and browser compatibility potentially changes over time, and most often, unpredictability as well.

Fast loading and fully functional multimedia content is necessary for ecommerce merchants to keep hold of website visitors. Every second of delay in page load time leads to frustrated visitors abandoning slow websites, and drawing along 7 percent loss in conversion rates, 11 percent fewer page views and 16 percent decrease in customer satisfaction.

And a Bit More of that Code – Sign Up Forms and Analytics

Sign up forms and analytics code add only a few lines to website core files. But when too many single-lines of code take space on the website back-end, web content assets and plugins with lengthy code end up competing for tiny memory spaces in short processing cycles. As a result, the popular physics phenomenon of non-linearity kicks in, and each component performs unpredictably, usually consuming more processing cycles than expected.

From the perspective of end users, excessive services are often unnecessary or at most, considered secondary to the actual content portrayed by the website. Many websites host more than 80 assets (images, plugins, add-ons and other multimedia content), and all of this content is not necessarily delivered to requesting browsers as per user preferences. Additional investments in developing media-rich websites ultimately backfire when the information actually requested to reach end-users is held by irrelevant sign-up forms, analytics code and other content adding unnecessary weight to the website.

Mobile Mistakes and Misguided Redirects

Global smartphone subscription is expected to surpass the 2.7 billion mark by 2019, when 83 percent of internet users will access the internet via mobile devices. 30 percent of ecommerce website traffic in 2016 came from mobile, and this number continues to rise exponentially with the exploding smartphone user-base.

The competition to capture the attention of mobile users is even more intense due to slow loading mobile websites and lower visitor patience levels. 60 percent of mobile users expect mobile websites to load within 3 seconds. And on average, 3 in 4 people will abandon a mobile website if it takes any longer than 5 seconds to load, whereas an average mobile takes even longer periods of 6-10 seconds to load.

Excessive delays in mobile page load time occur mostly when websites are not specifically optimized and designed to deliver high performance on a mobile device interface. Even with dedicated smartphone-optimized pages, mobile users are not always redirected to the intended mobile-versions of desktop website pages requested from mobile browsers.

Redirects are instructions that send users seeking one website URL to another one that (supposedly) contains the exact information requested by users. Redirects are most effective for mobile users searching for desktop versions of website pages that must be mapped well to equivalent mobile versions in delivering the best mobile website experience.

Doing so inaccurately keeps users from switching between unwanted website files until they reach the right one. This causes unnecessary delays in loading the information actually sought by end-users.

This is analogous to finding an empty parking spot in a large, crowded parking lot, and reaching the apparently empty space only to find out it’s occupied by a small vehicle that wasn’t visible from the distance. The process continues until a free space is finally reached – that is if the driver even continues searching for the empty space and isn’t frustrated enough to leave the parking lot altogether.

Website owners are eventually responsible for losing competitive advantages in the mobile space when the mobile web traffic is simply redirected toward irrelevant desktop website version, instead of delivering a speed-optimized mobile solution for mobile visitors.

Websites not speed-optimized for mobile devices suffer from common issues hampering mobile user experience. Issues such as faulty redirects, unplayable videos, bloated images and graphics, irrelevant cross-linking and unnecessary assets delivered to mobile visitors degrade website performance and ultimately drive bounce rates.

Only 10 percent of the waiting period is defined by the HTML response to browser requests, and the remaining 90 percent of the delay is caused in rendering pages, parsing HTML, executing code scripts and retrieving embedded assets. Website performance overhaul with optimization tools and script tweaks can scrape off sizeable chunks from page load times, but perhaps not as effectively as developing a speed optimized website from scratch. And the latter is more of a marketing strategy, a business decision and slight awareness in avoiding the most common mistakes that can potentially ruin online businesses by killing website performance.

Chapter 5: Website Speed Testing – Identify Performance Bottlenecks!

Web traffic and search engine ranking is primarily a vanity metric for website performance. Important as they are, neither is more indicative of online business success than sales figures and conversion rates. Putting things into perspective, ecommerce websites with (almost) zero percent bounce rate, 15 percent conversion rates and 10,000 unique website visitors from low search engine rankings fare far better than high ranking sites enjoying 100,000 unique visits with only 0.01 percent conversion rate.

The debate of conversion rate optimization can carry on for encyclopedic lengths, and implementing business best-practices on Frankensteinish websites can take tons of investments with efforts of patient execution spanning across months before any significant conversion rate improvement is yielded.

And there’s more to convincing impatient citizens of the cyber world into purchasing online products and services than implementing passive business strategies to enhance marketability. Online businesses focusing on improving website performance experience immediate results in the form of higher conversion rates and sky-rocketing sales.

Page speed, in particular, fills the void in enhancing marketability by improving website user experience to keep impatient online customers engaged and satisfied. A recent research report published by O’Reilly concludes improvements in website end-user experience by reducing page load time boost sales and conversion rates significantly. The staggering statistics are as follows:

• +3%conversions per second with page load time improvement from 15 seconds to 7 seconds.
• +2%conversions per second with page load time improvement from 7 seconds to 5 seconds.
• +1%conversions per second with page load time improvement from 4 seconds to 2 seconds.

These statistics only describe how page speed impacts business success in the competitive cyberspace. Complicated as it seems, slicing off large chunks of page load time from slow loading websites is a relatively low-hanging fruit IF speed optimization tactics are implemented in the right direction – that’s a huge IF when performance bottlenecks are unknown, too complex or simply too vast and diverse to identify.

The pursuit for speed optimized website begins with identifying critical front-end issues most apparent under standard website performance testing processes. Google’s Head Performance Engineer Steve Souders advises on this matter, saying “80-90% of the end-user response time is spent on the front-end. Start here”.

What to Test?

Before the exploration for page speed bumps begins, understanding the behavior of the most impactful website speed performance indicators helps to accurately identify performance loopholes in websites.

Initial Page Speed

Downloading tons of memory hogging website content within milliseconds of initiating browser requests is not entirely possible without a thorough revamp and speed optimization of slow websites. In many cases, visitors only seek the primary information in the form of content or product information portrayed by Web pages. Add a lot of complementary graphics and website features, and page rendering times rise beyond measure.

Keeping the initial page speed high keeps visitors engaged even when the entire website content including bulky graphics take ages to render completely. Monitoring high initial page speed by tracking parameters such as Time to First Byte (TTFB) or performing ping requests from website servers accurately describe initial page load times and page speed statistics. If these take too long, work needs to be done at the back-end in the form of server-side and website core optimization.

Full Page Load Time

Monitoring the time consumed in rendering entire page content onto requesting browsers is an integral element of end-user website experience testing. This information drives strategic IT decisions in deploying and optimizing hardware infrastructure to maximize website performance.

Regularly monitoring this performance indicator enables website owners to realize how the website performs as it scales in terms of size and content type. With this information, webmasters can cache static content in separate locations such as Content Delivery Network (CDN) while maintaining dedicated back-end servers to efficiently deliver dynamically-loaded content.

Geographic Performance

One of the perks of operating an online business is the ever-expanding global market reach. But this reach is not always equally efficient – and hence effective – across the globe due to the very factors that limit client-server communication. Government policies, bandwidth and technology limitations prevent optimum website performance around the world, so website speed and availability tests should be conducted across disparate locations to determine global website performance results impacting world-wide business reach.

Load Tolerance

Website performance varies with fluctuations in web traffic. Hosting servers handling the normal load at peak performance may lose page speed under excessive loads. Conducting stress tests, ramp tests, load tests and other performance tests on websites creates an accurate picture of how much web traffic the website can handle before losing performance or going down altogether. Compare the results with the website’s actual usage patterns to determine whether the website needs hardware upgrades to handle peak load as efficiently as possible.

Web Server CPU Load

Shared hosting providers running thousands of websites on single Apache servers fail to deliver high performance even when the website is well-designed with a clean and speed-optimized code. Performance issues intensify during peak load times when insufficient server computing power fails to process website download requests efficiently. Monitoring server CPU load enables hosting companies and IT staff running locally hosted websites to keep a check on back-end hardware capabilities in handling unpredictable web traffic deluge.

Website Database Performance

Database performance is critical for websites maintaining dynamic content pulled from back-end databases. A mechanism should be in place to detect and alert for inaccuracies in data transmission. Keeping an eye on free disk space on servers hosting websites locally helps avoid errors and data losses that lead to broken links and eventually degrade website performance.

How to Test

Website owners can leverage an array of free and premium website performance testing services to analyze web pages and generate tailored solutions to fill the deepest of performance loopholes hampering page speed.

Page speed testing tools powered by search engine giant Google, website monitoring specialists Pingdom and GTMetrix yield valuable insights into website performance indicators for free, and programmatically generate scores and suggestions to educate non-geeky website owners. Check out these in-depth guides to help you get started.

How These Tools Work

These tools use a bunch of browsers to load websites and replicate end-user website experience across disparate geographic locations. Performance bottlenecks are monitored across various elements of the web page under scrutiny including file size, load time, response time and requests pertaining to various website parts (JavaScript, CSS files, HTML, images, etc.).

The tools generate performance scores based on a set of rules developed in the context of Web page performance and user priorities. The principles include resource caching, client-server round-trip times, data download and upload size, and a host of rules impacting end-user website experience in terms of page speed.

Suggestions are generated in anticipation of page speed improvements that should occur by implementing appropriate performance optimization rules. For example, if a large image file is served uncompressed, monitoring tools would recommend implementation of various measures to compress the bulky file. Such issues otherwise go unnoticed due to human errors or plain ignorance, neither of which can be completely eliminated. At the same time, page speed monitoring tools would at least empower website owners to identify the issues and take appropriate steps in eradicating hidden website performance bottlenecks.

Testing Tutorial

The following test was conducted using the free Pingdom website speed test tool. Visit Pingdom and conduct the test selecting various geographic locations according to the options provided, and compare the end-results. Enter your website and hit the Test Now button.

It will then return a summary of your site, including a performance grade, a total load time, the total page size, and the number of requests you have on your website.

The performance insights section of the Pingdom speed test tool is very helpful. These are all based on the Google PageSpeed Insight rules. Generally, if you improve these on your site, you should see a decrease in your overall load times.

The tool lists all downloaded files in a waterfall chart form, sorting it in terms of load order, load time, size, type or URL.

Analyze the performance of each file download by reading results against the key chart provided within the tool:

The tool helps to identify the next-best actions for website speed optimization tactics. In the sample test shown above, the tested website needs to fix some errors for requests that aren’t being found. However, it’s important to understand that optimizing these website design elements is an ongoing and evolving process that starts from the ground-level of website development and implemented across all new pages as the website scales.

If you need more help troubleshooting your site’s performance on Pingdom, check out our deep dive into the tool.

Which Tool to Pick?

Different tools – Google’s Page Speed Insights, Pingdom and GTMetrix, among others – identify different issues, test different performance parameters and indicators in different ways, from different browsers and geographic locations. Performance ratings and test results are therefore bound to be different, and no single tool identifies every single performance bottleneck in website designs. It is however recommended that you stick with one tool as you make improvements to better monitor your progress.

However, testing across multiple tools, analyzing different website design elements and comparing multiple test results provides reasonable insights for online business owners to devise speed optimization strategies for their websites.

Chapter 6: How to Improve Website Speed?

Developing a great website takes great work. Leading online businesses leverage industry-proven experience, supernatural web development skills and a killer web hosting service to develop websites boasting top-notch performance figures and user experience. But for those who miss this starting point in their pursuit of speed-optimized websites, employing a minimalistic approach in executing simple DIY page speed optimization tactics works (almost) well enough to patch slow websites.

The knowledge of investing in the right set of website speed optimization solutions and services, website management and perhaps downright coding trickery is essential to yield maximum website performance. Strategic business decisions based on this knowledge contribute directly toward enhancing website performance that in turn, lead to better online sales, leads, conversions and ultimately business success.

Optimization is the buzzword of success in the cyber world. Cyberspace, like the real physical world of planets, stars and galaxies is itself in flux – a state of continuous change and evolution. In fact, change is the only consistent process across both the real and the cyber world. Survival in these spaces depends on how well the inhabitants can adapt to varying resources and environmental circumstances.

And the same goes for website owners competing for online business success amid varying market trends, changing the behavior of internet visitors, advancements in cyber technologies at breakneck speeds under Moore’s Law and varying website performance standards set forth by search engine giants.

DIY Speed Optimization

Online business owners and webmasters adapt their websites to maintain optimal results under the consistent impression of change by improvising and optimizing key elements of website design that make or break page speed.

Image Optimization

As a general rule of thumb, larger files take longer to download than smaller files. Web page download time, also known as the Page Load Time depends on the total size of content assets being downloaded from hosting servers to the requesting browser. High-quality bulky images are the largest contributors to web page size, degrading page speed and agitating visitors eagerly waiting for the web page to load.

According to HTTP Archive, as of December 2017, images make up on average 66% of a total webpage’s weight. The following image optimization best-practices go a long way in reducing the negative impact of images on website speed:

• Format Selection: Use JPGs or WEBPs when quality is a high priority and image modifications are not required before uploading it. JPGs can take limited processing and modifications before image quality degrades sharply. For images with icons, logos, illustrations, signs, and text, use PNG format. Use GIFs only for small or simple images and avoid BMPs or TIFFs.
• Proper Sizing: Save valuable bytes of image payload and match the dimensions (width) of your Web page template. Use browser resizing capabilities to make images responsive by setting fixed width and auto-height instructions.
• Compression: Image compression should be a thoughtful tradeoff between image size and quality. For JPGs, a compression of 60-70 percent produces a good balance. For retina screens, increase (JPGs) image size by 150-200 percent, compress by 30-40 percent and scale it down again as per the required dimensions.
• Fewer Images: Keep the number of images to an absolute minimum.

WordPress Solutions:

Leverage image optimization plugins such as Imagify, Optimus WordPress Image Optimizer, WP Smush, TinyPNG. It’s even better if you go with the ones that compress and optimize images externally, which reduces the load on your own site.

And for more tips check out our in-depth image optimization guide.

Optimize CSS Code and Delivery

Not so long ago, 30 KB was considered as the ideal web page size. And that included images, content, graphics, and code making the entire page. The popularity of CSS and JavaScript ripped apart the ceiling of 30 KB page size in delivering enriched website user experience.

Yet, modern websites coded in CSS are better at downloading content from hosting servers to requesting browsers efficiently and accurately. Optimization, therefore, isn’t all about minifying file size. The following best practices ensure a speed-optimized CSS delivery:

• Shorthand Coding: Cut down the size of your code by using fewer declarations and operators. Fewer lines of code mean fewer processing cycles and efficient delivery of website files to requesting browsers.
• Axe Browser Specific CSS Hacks: CSS is in danger from endlessly complicated browser specific hacks – or correctional declarations as they’re called – adding unnecessary weight to CSS script files. Speed optimized CSS code is both light and simple for servers to process efficiently.
• Minify CSS: Almost all website speed monitoring tools give a common suggestion of reducing the weight of CSS code to improve speed. Lightweight and compact code helps to speed up downloading, parsing and execution to drastically reduce page load time.
• Code Positioning: Load CSS code inside the <head> and JavaScript inside the body, as referencing CSS outside of this section prevents Web browsers displaying CSS content immediately after downloading it.
• CSS Delivery Best Practices:
  • Do not use @import call.
  • Remove unused CSS.
  • Do not use CSS in HTML such as H1 and DIV tags.
  • Use inline small CSS.

WordPress Solutions:

Tools such as Autoptimize, WP Rocket, Cache Enabler, CloudFlare CDN, and W3 Total Cache are some of the most popular tools available for minifying JavaScript and CSS.

Minification – JavaScript, CSS, HTML

Indeed, speed optimization isn’t (just) about shrinking page size. Reducing the number of client-server requests in delivering website content to Web browsers is an integral part of website speed optimization. Webmasters can achieve this by not making too many folks with CSS, HTML and JavaScript requests. Although the number of requests isn’t as important as they used to be thanks to improvements with HTTP/2. That is to say, optimize, minify and squish all unnecessary and compressible code lines.

Minification is particularly important for inline JavaScript and external files not cached. Google recommends minifying all JavaScript files over 4096 bytes of size, and a shaving off a minimum of 25 bytes to produce any noticeable difference toward page load time.

A rigorous approach toward designing speed optimized website would incorporate a strong intent on eliminating unnecessary bytes from the code. Utilizing all the coding space available, deleting extra spaces, indentation and line spaces while maintaining readability of the code reduces the overall size of website core and front-end files. And for websites already developed without this strategy in perspective, combining multiple server requests (for HTML, JavaScript, and CSS) into single ones effectively slashes sizeable chunks from page load times.

However, overindulgence in HTML Minification potentially leads to loss of fidelity of the website code, with user agents taking excessive memory cycles and CPU power in “guessing” the missing resources required to parse HTML files. Monitoring page load performance changes in response to implementing each minification process individually ensure that only the unnecessary code and spaces are deleted.

Minification of CSS, JavaScript, and HTML share common benefits: reduced network latency, fewer HTML requests, enhanced compression, faster browser downloading and execution, ultimately boosting page speed and yielding higher scores on website speed measuring tools.

Plugins – Less is More!

Additional website functionality with plugins comes at a price: performance degradation. Unfortunately, webmasters deploy a myriad of plugins to add attractive but often unnecessary features such as gravatar, profile tools, website stats and font tools – some even use 10 different plugins for social media integration. The only benefit here is successfully avoiding manual coding.

Many popular websites carry as much as 80 plugins. Yet, the number is not entirely a concern if the installed plugins are developed well to avoid complex actions and expensive server processing.

Four major areas to look at when it comes to selecting high-quality plugins:

• Does it perform complex operations?
• Does it load many content assets and scripts?
• Does it increase the number of database queries to each page request?
• Does it perform requests to external APIs?

If the answer to all these questions is YES, your reaction to the plugin in question should be a huge NO!

Now to the big question, how many plugins is too many?

While there’s no comprehensive answer to this question, limitations are unique to every website and plugin. A lot of WordPress experts recommend not using too many plugins. But many well-performing websites host over 80 plugins, until they install one low-quality plugin that adds half a second to page load time.

Similarly, using 10 plugins for simple and unique tasks is much better than deploying one plugin to perform all of the complex tasks by itself. Exceptions include high-quality SEO plugins by credible developers, such asYoast SEO, All In One SEO Pack (free WordPress SEO plugins) and the likes.

WordPress Solutions:

Use the following solutions to keep a check on WordPress plugins performance:

• Kinsta APM – built-in application performance profiling solution
• Query Monitor

Limit/Disable WordPress Revisions

Revision management is one of the perks that WordPress has to offer. The CMS automatically keeps track of the content created on the CMS and makes all of it available for future changes. To the server, this costs unnecessary processing through additional database entries not actually required in the first place. Controlling the number of revisions stored relieves the website core of useless burden.

Writing the following code snippets in the wp-config.php file helps to get around this issue:

Disable Revisions:

define( 'WP_POST_REVISIONS', false );

Limit Revisions:

define( 'WP_POST_REVISIONS', 10 ); // limited to 10 revisions

Check out our in-depth guide on how to optimize WordPress revisions for faster performance.

Optimize Databases

WordPress CMS stores posts, comments, pages and other forms of textual and encrypted data within a single database – except for images and videos that are stored in the ‘wp_content’ folder instead. This database gets crowded over time, not only with unnecessary content and post revisions, but also with garbage data.

Garbage content includes:

• Comments in the spam queue
• Unapproved comments
• Post revisions
• Trashed items such as posts and pages

Database optimization revolves around getting rid of garbage data and useless content from cluttered databases, shrinking them in size and making it easier for website hosting servers to fetch requested content efficiently, within minimum processing cycles. This can also involve ensuring that you are using InnoDB for your MySQL database tables, as opposed to MyISAM. Learn how to convert myISAM to InnoDB.

The wp_options table is also often overlooked when it comes to overall WordPress and database performance. Especially on older and large sites, this can be the culprit for slow query times on your site due to autoloaded data that is left behind from third-party plugins and themes. Check out our guide on how to cleanup your wp_options table.

WordPress Solutions:

• Limit, disable and delete post revisions.
• Automatically purge trash by adding the following code in the wp-config.php file:

  define('EMPTY_TRASH_DAYS', 10 );

  10 is the number of days before garbage data is automatically deleted. Change as appropriate.

Compression

According to Google, every day the cyber world sees 99 years of human years wasted due to uncompressed Web content. And although most of the latest Web browsers support content compression capabilities, not every website delivers compressed contents. Visitors to these bandwidth-hogging websites experience insanely slow interactions with Web pages. Primary reasons for this unfavorable (and mostly unintentional) website behavior include misconfigured hosting servers, Web proxies, old or buggy browsers and antivirus software.

Uncompressed content hurts bandwidth-constrained users receiving the Web content in agonizingly lengthy page load times. Here’s the transcript of a common browser-server communication in delivering uncompressed content:

Browser: Hey, GET me /HeavyWeightChampion.html!

Server: On it! *server skims through the server and finds the file*

Server: There you go, 250 KB of response code.

Browser: Ouch! *end-user sweats, ultimately receiving the requested content in a few tens of seconds*. (Okay, client-server communication is perhaps a bit more formal and less dramatic than the above narrative.)

Most of the problem lies in the way client-server communication goes in the HTML world. HTML files (making almost the entire Web content) includes several redundant code instances. <Tags>, <Alts>, <HTML> and the likes are all the same stuff materializing repeatedly.

Google recommends the following compression tactics to deliver website content efficiently:

• Minify JavaScript, HTML and CSS
• Ensure consistency in CSS and HTML code with the following techniques:
  • Consistent casing – mostly lowercase.
  • Consistent quoting of HTML tag attributes.
  • Specify HTML attributes in the same order.
  • Specify CSS key-value pairs in the same order by alphabetizing them.
• Enable GZIP compression. GZIP finds similar strings and code instances, replaces them temporarily with shorter characters. Browsers decompress gzipped files, bringing them back to their original shape.

A few words of caution though:

• Do NOT GZIP (already compressed) images, PDF or other binary data.
• GZIP data only in the range of 150-1000 bytes in size. The speed of compression must be faster than the time taken in delivering the content uncompressed.
• Do NOT compress content for old browsers.

Not following the above recommendations actually increases file size and page load times due to the overhead of compression and decompression.

WordPress Solutions:

• Enable GZIP compression using W3 Total Cache plugin.
• The best way to enable GZIP compression is at the server-level of Apache or Nginx. Check out our GZIP compression guide.

Cache

Developers crave simplicity in website design code. Website code easier to create, read and maintain leads to efficient website development processes. This includes using the available code functions frequently to cut short extensive coding for specific website functionality.

However, adding too many extraneous loops and unnecessary code lines increases page rendering times by a few milliseconds. Influx a torrent of website traffic, and the milliseconds compound to plunge page speed well below acceptable standards.

Webmasters can reduce these response times by delivering cached copies of the requested content instead of rendering it repeatedly in response to every single user request that pings their server. Web cache is the mechanism of temporarily storing copies of web content to satisfy subsequent user requests from the cache database when specific conditions are met. This process reduces the number of client-server round trips taken in delivering (static) website content to requesting browsers.

Website owners can enable caching with the following add-ons and configurations when hosting service providers do not provide server-side caching:

• W3 Total Cache
• Cache Enabler
• WP Rocket
• FastCGI Cache for Nginx and Drupal servers.

Along with static cacheable content, websites also host dynamic information containing unique attributes changing regularly for every end-user. Storing cached copies of non-reusable dynamic content, therefore, doesn’t make sense, even though rendering non-cached content is a painstakingly slow process.

Fragment Caching

This is the art of caching smaller elements of non-cacheable dynamic website content. When Web pages containing static and/or dynamic content are loaded, hosting servers process PHP code and query MySQL databases to fetch the requested content. These time-and-resource consuming processes are circumvented by delivering the desired output stored as a cached copy.

Fragment caching stores the output of some code blocks that remain unchanged across varied versions of the dynamic content. When the code runs and reaches the code block cached for a predetermined time, the server queries and delivers the cached output of this code instead of executing it repeatedly until the time limit reaches.

The end result is a cache-optimized website content for maximum page speed even for ecommerce and membership-based websites handling intensely dynamic content. Kinsta actually provides four different types of caching, all of which are all automatically done at the software or server-level. So there is no need to mess with third-party plugins.

Content Delivery Networks (CDN)

CDN is an extension of cache optimization designed to supercharge website performance aimed specifically at globally dispersed web traffic. CDNs consist of a network of servers hosting cached copies of web pages. Internet visitors requesting this information are directed to the nearest server within this network based on their geographic location.

Traditional benefits of CDN including performance boost, high availability, and page rank collectively lift business bottom line. Check out all the reasons why you should be using a CDN. Kinsta includes a free HTTP/2 and IPv6-enabled WordPress CDN for all clients on WordPress Hosting plans!

Switch to Managed Hosting!

WordPress essentially democratized the web by empowering citizens of the cyberworld to create their own blogs and launch products and services online with minimal investments. In general, website owners leverage one of the following hosting services to keep their websites up and running:

• Free hosting: Favorite to hobbyists.
• Shared hosting: Favorite to individuals developing an online business presence at the lowest cost.
• Dedicated hosting or managed hosting: Favorite to serious individuals and small and midsize firms setting up an online presence.
• Collocated hosting: Favorite to large enterprises or government institutions with in-house IT teams to manage websites.

Among these, employing managed WordPress hosting for end-to-end website development and management services is the most cost-effective and productive option for maintaining an ultra-high performance website. Features of managed hosting services impacting page speed and website performance include:

• Performance optimization – compression, server-side caching, etc.
• Cache optimization.
• Content optimization for performance – image optimization, controlling garbage data, etc.
• Search engine optimization.
• Regular software updates.
• Plugin compatibility and deployment for best performance.
• Database optimization.
• Content delivery networks.
• Performance testing and monitoring.
• Lightweight and speed optimized servers.
• Server and website configuration and maintenance to minimize client-server roundtrips.
• Latest versions of PHP and MariaDB

WordPress is Faster With PHP 7

With the release of PHP 7 came huge performance gains! So big in fact, that it should be a priority over a lot of the small optimizations you might play around with on your WordPress site. The following benchmarks demonstrate significant performance improvements with PHP 7 over its previous iterations. PHP 7 allows the system to execute twice as many requests per second in comparison with the PHP 5.6, at almost half of the latency.

We also ran our own PHP benchmarks. And similarly to the benchmarks above, we saw that PHP 7.3 could execute almost three times as many transactions (requests) per second as compared to PHP 5.6. PHP 7.3 is also on average 9% faster than PHP 7.2.

• WordPress 5.0 PHP 5.6 benchmark: 91.64 req/sec
• WordPress 5.0 PHP 7.0 benchmark results: 206.71 req/sec
• WordPress 5.0 PHP 7.1 benchmark results: 210.98 req/sec
• WordPress 5.0 PHP 7.2 benchmark results: 229.18 req/sec 
• WordPress 5.0 PHP 7.3 benchmark results: 253.20 req/sec 🏆