Category: Frontend

Categories
Frontend Optimizations Web

Website Performance – Real Speed vs Apparent Speed

Real vs Apparent Speed

Even if we optimize all the aspects, we might still have a website that’ll take longer than we wished for. We can make use of several techniques to make the site apparently faster

We’ve seen in Website Performance Optimizations how we can make the website load faster. But there are times we can combine these improvements with others that will help to make the site apparently load faster. Even if the website is still loading, the user visualises most of the page in the shortest time possible, which translates in a good user experience and the perception that the site is fast.

Introducing webpagetest.org Speed Index

The Speed Index is the average time at which visible parts of the page are displayed. It takes the visual progress of the visible page loading and computes an overall score for how quickly the content painted. The lower the number the better.
Speed Index

Let’s say the following website takes 6s to load. We can see the difference of a good apparent speed, by rendering 93% of the content in 1s and load the remaining 7% in 5s, and a not so good speed index, in which after 1s only 18% was loaded in 1s and only at 5s it loaded around 90%.
Comparison of two strip films speed index

If we plot the completeness of a page over time, we will end up with something that looks like this:
SpeedIndex
The progress is then converted into a number by calculating the area under the curve:
Speed index Comparison Chart

Case-study shopcade.com

When I worked at shopcade.com, as part of a decision to provide a better user experience and also rank higher in search results, we’ve decided to tackle the page loading time (real and apparent). These improvements lead to higher conversion rates, but also, we started getting more and more indexed pages by Search Engines, and more frequently indexed. This eventually brought a lot of organic traffic to the website, along with other specific SEO improvements.
So, by applying the already mentioned performance optimizations (we also tweaked the backend framework, to get a much faster response time – Time to First Byte), we got these results:
Comparison chart
The DOM content loaded was triggered just after 0.6s, and we still triggered some scripts asynchronously, after the Content Download trigger. Check the before and after results on Webpagetest.org.
N.B. Just 1.3 seconds were to download a web font.

Below we can see an example of poorly optimized website:
Bad requests chart
And here a better one:
Good requests chart

What have I missed? Feel free to comment.

Continue Reading:

Resources:
Categories
Frontend Optimizations Web

Website Performance – Optimizations

Website Performance

After you’ve read about Why Should We Care about Website Performance? I’ve come up with a list of potential optimizations:

  • Cleanup Code

Remove comments, remove unnecessary HTML, JS and CSS.

  • Combine and Minify Assets (JS and CSS)

Combine the JS files and libraries into one JS file and minify. The same for CSS to reduce number of requests.

  • Load CSS on the <head> and JS just before </body>

Loading CSS first, prevents additional repaints and reflows, and will make the page look much better from the beginning and JS in the end to allow for the page to be rendered without being blocked while loading the scripts.

  • Try to load scripts as asynchronous

This way, the page rendering won’t be blocked and triggers the Document loaded event (e.g., $(document).ready()), much sooner. All social media plugins and analytics should be loaded asynchronously.

  • Make use of sprites whenever possible

This way we avoid excessive number of requests. Each request has costs from DNS Lookup, SSL negotiation, content download. If the image is small enough, the cost of DNS and SSL is higher than the asset itself.

  • Cache

Make an effective use of cache. Enable caching for assets, DB queries, templates / pre-render templates, but also implement Cache Busters to allow invalidating the cache when the assets are updated. One preferred URL fingerprint is /assets/9833e4/css/style.css, as some of the other solutions might have problems with proxies and CDNs (e.g., some CDNs ignore the query string parameters).

  • Download assets from cookieless domains

It may save a lot of time, since the cookies are sent for every request and may be as much as 4Kb of overhead per request.

  • Download assets from multiple subdomains / CDNs

e.g., static.domain.com, static1.domain.com, etc, as browsers usually have a limit on how many concurrent connections they establish with each domain, which means, the first set of assets, needs to be downloaded before starting new connections.

  • Consider using Google CDN for common libraries

Google CDN is usually very fast, and physically close to the client. And the client might already have the asset cached.

  • Enable Compression

Enabling compression (e.g. GZIP) to make the file size much smaller to download. With jQuery ou can get a gain of 88% when compared to the original size – jQuery (273K), Minified (90k), Compressed (32K).

  • Remove inline scripts and styles

Move them into files to make them cacheable. *Depending on each specific case.

  • Serve adequately sized images

If we only need a 50x50px image, just serve that image. Don’t rely on the browser to resize, as it will still download the full size image.

  • Optimize images

Remove unnecessary data from images (strip irrelevant information), compress, and if it is a JPEG, make use of the progressive version, as this will make the image start appearing sooner.

  • Prevent excessive redirects

Each redirect costs time, so avoid unnecessary redirections.

  • Consider using Nginx for serving static content

Nginx is very fast and optimized to serve static content.

  • Consider using techniques like lazy loading

If the content is not important for SEO or another reason, consider triggering the load, only after the page is served.

  • Consider hosting images, web server and database server in a different machines

This reduces the load on each server, which translates in faster response times.

Continue Reading:

Resources:
Categories
Frontend Optimizations Web

Why Should We Care About Website Performance?

Acceleration speedometer on night road

Nearly half of the web users expect a site to load in 2 seconds or less, and they tend to abandon a site that isn’t loaded within 3 seconds, according to Akamai and Gomez.com

The performance of websites is critical for the success of businesses. A well-performing website improves a lot the user experience. It’ll keep your audience coming back, staying longer and converting a whole lot better. It is also one of the measured signals for search results rankings, and usually appears higher than less performing websites. Mobile devices have become so significant today that a website should always consider the limitations of those devices.

Disclaimer
Just to mention that these optimizations should be considered on a project per project basis. Some improvements might not be worth considering, depending on budget, project duration, time schedules, available resources, etc.

A few facts and stats

  • 47% of consumers expect a web page to load in 2 seconds or less
  • 40% of people abandon a website that takes more than 3 seconds to load
  • 75% of the 1,058 people asked would not return to websites that took longer than four seconds to load
  • A 1 second delay in page response can result in a 7% reduction in conversions
  • If an e-commerce site is making £100,000 per day, a 1 second page delay could potentially cost you £2.5 million in lost sales every year
  • The average weight of a web page today is 1.9MB
  • Page speed in one of the SEO measured signals and can affect conversion rate
  • The average web page size in 2014 was 1,953Kb and had 95 HTTP pull requests per page

Most Common Reasons For a Poor Performance

  • Bloated CMS Templates

Typical WordPress themes are crammed full of features. Many will be third-party plugins, styles and widgets the author has added to make the theme more useful or attractive to buyers. Many features will not be used but the files are still present.

  • HTML5/CSS3 Boilerplates

A boilerplate may save time but it’s important to understand they are generic templates. The styles and scripts contain features you’ll never use and the HTML can be verbose with deeply-nested elements and long-winded, descriptive class names. Few developers bother to remove redundant code.

  • Carelessness

Developers are inherently lazy; we write software to make tasks easier. However, we should always be concerned about the consequences of page weight.

  • Too many requests

Each request takes time to process, as it includes time for DNS Lookup, SSL negotiation, Server Response, Content Size, Connection Speed, etc. Also, broswers impose a limit on simultaneous connections.

  • Extremely large images

High quality images may look very nice, but we should consider the cost of downloading them in slow connections and/or mobile devices

  • Websites not optimized for mobile users

Websites not optimized for mobile users usually suffer from issues like bloated graphics, non-playable videos and irrelevant cross-linking. Google recently implemented a change on the ranking algorithm that favours mobile optimized websites on mobile searches.

Continue Reading: