Web Performance

Web Performance

README

Internet is a complicated environment when we have a website without optimization, because generally the users can only wait for our content a few seconds before click on another link and leave our website; this is a very good point to start, think that we have a website with many interesting documents or services but the minimum load time of a page is over 10 seconds, obviously not good, some people could wait that time if really want our contents but not all the time; we need to start thinking in the performance of our websites.

Steps

  • Cache: keeping your application’s data and logic off the network altogether.
  • Round-trip times: reducing the number of serial request-response cycles.
  • Request overhead: reducing upload size.
  • Payload size: reducing the size of responses, downloads, and cached pages.
  • Browser rendering: improving the browser’s layout of a page.
  • Mobile device: tuning a site for the characteristics of mobile networks and mobile devices.

Why

There are many tips and tricks we can put in practice to get better our websites, some of them are basic practices like image optimization, browser caching and request overhead, and other with some complexity like round-trip times minimization, payload size minimization and browser rendering.

Here we’ll evaluate performance from the client point of view, typically measured as the Page load time, this is a lapsed time between the moment a user requests a new page and the moment the page is fully rendered by the browser; the best practices cover many of the steps involved in page load time, including:

  • Resolving DNS names,
  • Setting up TCP connections,
  • Transmitting HTTP requests,
  • Downloading resources,
  • Fetching resources from cache,
  • Parsing and executing scripts,
  • and Rendering objects on the page.

How

Web performance is essentially how well our pages either eliminate these steps altogether, parallelize them, and shorten the time they take to complete. Here we will use basically two tools well known, YSlow from Yahoo! and Page Speed from Google; and a very good documentation resource made by the Google web performance team called Make the Web Faster.

When we profile a web page with a performance tool, it evaluates the page’s conformance to a number of different rules; these rules are generally front-end best practices you can apply at any stage of web development. These tools give us specific tips and suggestions for how we can best implement the rules and incorporate them into our development process.

Web performance best practices in Make the Web Faster Google’s project.

Resources

Do you have a project idea? Let's make it together!