Open Source RDBMS - Seamless, Scalable, Stable and Free

한국어 | Login |Register

Current Events
Join our developers event to win one of the valuable prizes!
posted 3 years ago
viewed 7498 times
Share this article

Velocity 2011, recent trends on improving Web performance

Velocity Conference (www.velocityconf.com), hosted by O’REILLY and sponsored by various enterprises, was first launched by web developers and operators of Silicon Valley in 2008. Now, Velocity has become a representative event as a venue for sharing ideas on how to "efficiently" develop and "seamlessly" operate mega web sites.

At NHN we have been participating in this conference since 2010. And this is my report on this year’s Velocity.

Velocity 2011

This year Velocity hosted over 2000 developers and operators which was more than last year. I think it is a reflection of ever-changing web-environment. Most of the participants were folks from Silicon Valley, while some from European countries as well as companies from Asian region such as Baidu, China's search engine monopolist. The number of sponsors was doubled (35) when compared to last year, which demonstrates that Velocity now is one of the important conferences.

While participating, I was able to get a glimpse of recent trends in web community, which can be categorized into 4 sectors

  1. Web Performance Optimization (WPO)
  2. Cloud Solutions
  3. Mobile Web
  4. JavaScript

Notably, WPO is gaining more importance due to its competitive edge in business sense. In other words, faster websites lead to more users and then to more revenues. Also with cloud solutions such as AWS (Amazon Web Services) and OpenStack, easier ways of establishing and using IT infrastructure is emerging, and it is obvious that JavaScript is now on the brink of its heyday. Furthermore, many issues regarding mobile, which has already become a trend, were discussed as well.

In this article I am going to introduce WPO, Mobile, and JavaScript trends which have a relevance to “improving service speed”.

Optimization tools for Web-performance

The key component for WPO is a tool for measuring and monitoring web performance. This year at Velocity there were many talks about such tools. I had a chance to familiarize myself with the tools which provide added functions as well as some other tools that I am not well-aware of. Here are some of them.

Web Page Test

webpagetest.png

Homepage: http://webpagetest.org

Conventionally webpagetest.org was a website for testing the performance of only a single page. Now it has been upgraded to enable testing of several pages consecutively using script function in "advanced" tab. Also there is a function for filling and submitting form as well as for inserting JavaScript code.

YSlow

yslow-ss.png

Homepage: http://developer.yahoo.com/yslow/

YSlow is a tool for providing information in order to improve Performance after thorough analysis on Yahoo-developed Web page. Before, only Firefox plug-in was available, however now it can also be used on Google Chrome. It is a new function for testing web-performance optimization.

Pagespeed

pagespeed.png

Homepage: http://pagespeed.googlelabs.com/

Pagespeed is a tool to measure how fast a page loads. It can be used both online just like webpagetest.org, or on other sites through Page Speed API.

Chrome Developer Tool

Homepage: http://code.google.com/chrome/devtools/

Chrome Developer Tool has undergone many changes. New performance-related index(performance.memory.*) is now being provided, and heap profiler has been added for debugging JavaScript. Also there is a function for remote debugging.

Showslow

slowslow.png

Homepage: http://www.showslow.com/

Slowslow is a website for viewing performance index of YSlow, pagespeed and dynaTrace all at once. A new function allows the users to compare above index with Google analytics. Now it is possible to compare performance index and business index.

HTTP archive

httparchive.png

Homepage: http://httparchive.org

HTTP archive is a website for recording past and present web performance index of numerous websites utilizing documents on webpagetest.org. You may see the recent trends of Web. For instance, with this you will be able to know that the images in website are getting bigger these days. On top of this, there were more other interesting statistical results.

Weinre

weinre.png

Homepage: http://phonegap.github.com/weinre/

Nowadays, PC browsers allow inspection of HTML, CSS and javascript of webpage using developer tool. Weinre is also a tool for inspecting webpage in a similar way on mobile platform. It works by letting remote inspection on PC if you re-load Weinre Javascript on mobile page.

Other than above mentioned topics, Velocity presenters covered how to automatically test webpage using Selenium, how to emulate mobile network and extract Har file using BrowserMob proxy/Charles proxy. Also they introduced tools for collecting and analyzing Har file using Harpoon.

Applications of Web Performance Optimization

Google Instant Search

At Velocity 2011 Google introduced its Instant Search. One of the most brilliant idea was Prefetching capability by leveraging Hover-to-Click delay time. It is said that there is 200ms to 300ms of delay time from overring our mouse pointer to a certain link until we click and remove our finger. This fascinating idea was basically pulling HTML or image on the targeted link in a delay time.

Display Ad of Yahoo! Mail

yahoo-mail-ad.png

Yahoo presented a case study on how to seamlessly present display ads on Yahoo mail (Web 2.0) without any business clash and still maintaining decent web performance. I was surprised to find out that after taking out advertisement from Yahoo mail (Web 1.0) temporarily, page loading speed enhanced by 73%. After discovering the fact, Yahoo had advertisers and agencies to use libraries necessary for running ads in order to load such ads more effectively. They also improved the logic of showing ads.

Mobile

Here are the tips to optimize mobile Web. Optimizing mobile web is trickier than that of PC web. Since mobile devices come in various kinds and have considerably lower hardware performance, it is hard to optimize sites in such a way so that they are universally common on all devices. These reasons pushed to discover various optimization techniques. The following list provides some important tips for optimization.

  • Downsizing to necessary HTML code, using semantic tip (header, footer, nav tag) of HTML5.
  • Reducing request counts to server using inline images.
  • Using ‘ontouchend’ event. 300 to 500 miliseconds faster than click event.
  • Using css3 and transition for animation instead of using Javascript.
  • Implement hidden parts to be lazy-loading.
  • Use localStorage as cache.

All in all, the seminar on mobile concluded that it is best to run various tests on development stage for every device since mobile devices differs from one another. I believe, this was the reason for so much promotion of automatic solution for performance tests.

Android

There were many optimization technology introduced for Android, an open source operating system for smartphones. I found the seminar on optimizing Android’s performance given by Qualcomm the most interesting.

When 3G network is not in use it automatically shuts down and takes more than 1 second to activate.

There are 4 threads processing HTTP transaction on entire Android. (As in the case of Nexus S).

Adopting HTTP pipelining sometimes leads to unexpected outcomes. Persistent cache (cache saved to flash) of Android devices operates cache eviction algorithm based on stated expiration data when receiving the object from a server.

I was able to find out that the performance of mobile device is not only affected by Webkit engine, the browser core, but also by network performance and the policies of operating system. This session implied that from now on in order to improve web performance, it is necessary to improve customers’ operating system along with browser.

PhantomJS

phantomjs.png

At Velocity 2011 there was an interesting talk about PhantomJS, a tool which is a combined version of Javascript engine to Webkit. This was a cool program used when accessing website or DOM; rendering a certain part and sending in image file format; and for debugging and test automation without GUI.

Javascript

Many mentioned issues regarding Javascript. I have heard from many people that although the speed of Javascript engine had accelerated rapidly it is very slow when accessing DOM via Javascript. Thereby, many suggest using Javascript variables instead of tagging on DOM when saving new data. And I was able to find out several coding guides.

  • Avoid using eval and with (too slow).
  • Do not create object within loop. Use Dense area.
  • Make Type-stabilized codes – One type of variable needs to be fixed for Javascript engine to be executed to JIT compiler. For instance, if you change variable a by putting string and integer, then it gets harder to execute.
  • You need to see not only the size of Javascript itself but how much memory it uses after being loaded.
  • Besides the client side JS, server side JS using Node.JS was covered.

Outlook on Web Performance Optimization

In my perspective, the issues of web speed and performance have just begun to evolve. I felt a sense of relief and pride to find out that web-speed concerns, which I had often talked about and contemplated on with Service Speed Improvement Lab, Front-end Performance TF and many other teams at NHN, are equally dealt with in Silicon Valley, a home to Web. Even at this moment, many ideas and plans emerge. And Korea is not different. I also felt a grave sense of responsibility as NHN’s employee since I believe idea and planning for improving web speed is one of our responsibilities in this environment when IE users take up more than 90% of the total Internet users in Korea.

By Jae-wan Jang, Performance Engineering Lab, NHN Corporation.



comments powered by Disqus