Categories
Frontend Optimizations Web

Website Performance – Optimizations

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?

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: