in Frontend Tech, Tips |

Initial Page Load – FE Performance Tuning

1. Introduction

Why is the site performance so important? The poor site performance impacts company’s revenue and user’s engagement.

  • Shopzila: 5 seconds speed up resulted in a 25% increase in page views, 10% increase in revenue, a 50% reduction in hardware, and a 120% increase traffic from Google.
  • Amazon: every 100ms of latency cost them 1% in sales
  • google: extra .5 seconds in search page generation time dropped traffic by 20%
  • a broker could lose $4 million in revenues per millisecond if their electronic trading platform is 5 milliseconds behind the competition.
  • facebook: regardless of site speed, users spend around the same amount of time on facebook, which means if the site is running slowly users are going to be seeing fewer pages in the same amount of time.

So the conclusion is that fast site is better.


2. Site performance is Latency experienced by users

It’s measured from a guest request to the presentation of the page at the browser. There are many factors that contribute to the site performance. Facebook has defined 3 factors and those are:

  • network transfer time – time from the user’s browser to the server.
  • server generation time – time spent on the server
  • client render time – time the browser spends on parsing the HTML, loading JavaScript/css/images and rendering contents.

80-90% of the end-user response time is spent on the frontend according to Todd hoff. Therefore, it is a logical decision that it is better to focus on the frontend before jumping into other areas for the site performance.

(Site benchmark is also important, When the site cannot serve as many guests as it should, FE optimization won’t matter.)

3. Page Speed & YSlow Tips

We have heard about them so many times already and are well aware of those tips. However, few tips from Page speed are worthy to look at.

3.1 Optimize the order of styles and scripts

Many browsers block the downloading of resources referenced in the document after scripts until those scripts are downloaded and executed. On the other hand, if other files are already in the process of being downloaded when a JS file is referenced, the JS file is downloaded in parallel with them

The recommendations from google Page Speed are :

  1. Put external scripts after external stylesheets if possible
  2. Put inline scripts after other resources if possible.

For more details, go to the source link specified in the section.

Source: http://code.google.com/speed/page-speed/docs/rtt.html#PutStylesBeforeScripts

3.2 Defer Loading of JavaScript

Deferring loading of JavaScript functions that are not called at startup reduces the initial download size, allowing other resources to be downloaded in parallel, and speeding up execution and rendering time.

Source: http://code.google.com/speed/page-speed/docs/payload.html#DeferLoadingJS

Defer loading of JavaScript has been one of my focuses for the site performance in fact.

4. Focus on the viewable area

[diagram here]

It’s recommended to focus on the portion of the page that guests see first as they come to the site. This concept is very similar to the news feed on the facebook home page. 15 stories are loaded at first as the initial load. After that, additional 15 stories appear as user scrolls down.

What Yang found, however, is that when people do scroll beyond the initial 15 stories they’re shown, they’re happy to wait the extra second or two for 30 new stories to load, which results in a significant boost in engagement.

5. Deferload everything if possible

According to the research done by clicktale blog :

  • between 64% to 68% of the page views are likely to reach the 1k pixel line and 15% to 20% will reach the bottom of the page.
  • Below 540 pixels, both visitor attention and page exposure decline exponentially.
  • The most valuable web page real-estate is located near the page top, between 0 and 800 pixels. Visitor attention and page exposure peak at about the 540 pixel-line.

That could translate into this: the page components below the viewport are not likely to be downloaded for 32% to 36% of users if the defer loading technique were implemented. If the entire page’s file size were 200KB and then file size of the page components (mainly images and flash media file) out of viewport were 50KB, our target size for the initial load would be 150KB (potentially 33% less download for users). Although there might be guests that scroll down to all the way bottom, there are guests that click away from the first screen.

Source: http://blog.clicktale.com/2007/10/05/clicktale-scrolling-research-report-v20-part-1-visibility-and-scroll-reach/ & http://blog.clicktale.com/2007/12/04/clicktale-scrolling-research-report-v20-part-2-visitor-attention-and-web-page-exposure/

References

– More To Come –

Published