Introduction to Website Speed Optimization

What Exactly is Page Speed?

The term page speed essentially refers to the length of time at which web pages or media content is downloaded from website hosting servers and displayed onto the requesting web browser. Page load time is the duration between clicking the link and displaying the entire content from the web page on the requesting browser.

There are three core aspects necessary to understand page speed in the context of user experience and website performance:

• The view of time taken in delivering the requested material along with the accompanying HTML content to the browser.
• Browser response to page load requests.
• The view of end-users as the requested web page renders on the browser, this is the ultimate empirical measure of page load speed.

Website performance subsequently impacts rankings in search engines developed under proprietary and undisclosed algorithms, incorporating key factors including page speed, user experience, website responsiveness and a whole lot of other website performance metrics.

Slow? How Slow?

Anything slower than the blink of an eye 400 milliseconds. Engineers at Google have discovered that the barely perceptible page load time 0.4 seconds is long enough to cause users to search less. The technology has come a long way in improving internet experience. The over-crowded cyberworld of the 1990s was often labeled as the World Wide Wait, but innovations in communication and networking technologies have revolutionized the way digital information is transmitted across the internet. The next generation of online businesses have all the resources they need to deliver content instantaneously, but to leverage and complement these resources, businesses need speed-optimized websites that deliver the best user experience.

And what happens when they don’t?

1 in 4 visitors would abandon the website if it takes more than 4 seconds to load. 46 percent of users don’t revisit poorly performing websites. Website owners have a mere 5 seconds to engage visitors before they consider leaving. 74 percent of users accessing the mobile site would leave if it takes longer than 5 seconds to load. Every one-second delay in page load time could lead to  $1.6 billion in annual losses for online merchants as big as Amazon.

47 percent of ecommerce customers expect page load times of less than two seconds before they consider leaving 40 percent of users would abandon the site at the third second of waiting, before a performance analytics tool even captures their presence on the site. The average peak load time for conversions is mere 2 seconds faster than millions of websites out there.

And what happens when they don’t?

When Mozilla increased page speed by 2.2 seconds, Firefox download figures rose by 15.4 percent or  10 million per year! Walmart  saw a 2 percent increase in conversion rates for every 1 second improvement in page load times. The numbers don’t lie!

Acceptable Website Performance The Neuroscience and Rhythm

100 milliseconds. That’s how long the Occipital lobe in our brain stores visual information as a Sensory memory.

Google researchers suggest page load times of less than 100 milliseconds give visitors the illusion of instantaneous website response as the visual Sensory memory processor in our brain works in bursts of 100 milliseconds. The memory store clears itself after 0.1 seconds as photoreceptor cells in the eyes transmit more information to the Occipital lobe.

Acceptable website performance

1 second of page load time does suffice in maintaining a seamless flow of thought users feel in control of their Web browsing activities, and the mental stress is not aggravated unless the website fails to respond as desired.

At 10 seconds of delay, visitor attention is barely kept. The sensation of impatience, frustration, and feeling of abandonment is usually strong enough to keep visitors from revisiting such slow websites again.

The Pragmatic Psychological Conundrum

However, abandoning a website due to slow page speed is not always the quickest path to access the desired information on the web. An average user would spend several extra minutes browsing fast-responding but irrelevant websites, instead of waiting a few more seconds for sluggish relevant websites to respond.

And considering the sea of resources on the web, users eventually find the required information on some website or the other. But the eventual losers are online businesses unable to reach their online customers fast enough, despite hosting the exact information and services being sought.

Strange enough, visitors would rather spend excessive time browsing for the information elsewhere than waiting a few seconds for the right website to load. The experience is similar to the  Houston airport incident from a few years back that led to a clever solution.

Passengers at the airport had to take a 1-minute walk to the baggage claim and waited there for 7 minutes to receive their bags. The customer relations center was ultimately inundated with complaints about the slow service.

So the airport executives came up with a cunning solution to “resolve’ the issue. They moved the arrival gates far away and routed the luggage to the outermost carousel.

Passengers now had to take a  6-minute walk to the baggage claim area where they received their luggage within 2 minutes. The result? Zero complaints. Absolutely no passenger left unsatisfied except with some tired legs.

Similarly, elevators contain mirrors so the passengers keep busy in styling themselves and not thinking about the time spent traveling. This passenger behavior is analogous to that of website visitors in the cyber world. And the same general principle applies for online businesses as well: It is the objective length of wait that defines the experience of waiting.

Now, online businesses can play with human psychology like the Houston airport executives and speed up evolution, but with virtually no specific formula to make website response times bearable for every individual visitor out there. Or they can actually reduce the objective length of wait in delivering the requested content to their online visitors with a fast responding website whichever is possible when the website is designed to deliver instantaneous response and high quality, seamless user experience.

This guide will focus on the latter practice, and will actually help you maximize the potential of your online business by optimizing website performance and thereby enhancing customer satisfaction, retention, and loyalty.

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,  ShortPixel Image Optimizer,  Optimus WordPress Image Optimizer,  WP Smush,  TinyPNG,  EWWW Image Optimizer Cloud. 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.

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!

Conclusion: Website Speed Matters. A lot.