In this blog I want to re-raise the awareness for very basic WPO (Web Performance Optimization). Whether you use the browser built-in diagnostics tools or extensions such as Firebug, YSlow or PageSpeed, it doesn’t matter. These tools are available for every developer, web designer and tester and HAVE TO be used as a final sanity check before checking in or releasing code.
1. Key Metrics: Size, # Resources, Load Times
- 5 secs until first render event. 12 secs to load page
- 4.6MB Page Size & 196 Resources on Home Page
- 124 Items coming from the same domain - leading to high Wait time
Please remember to follow the basic golden rules of WPO: Reduce Roundtrips, Reduce Content Size, Leverage CDNs, Minify and Merge Content, Use Proper Caching.
NOTE: Basic WPO Violations: Too many resources severed from a single domain lead to bad page load times.
2. Timeline/Waterfall: Learn how your pages are architected
- Clustered of resource from a single domain
- Very slow CSS file requests
- Great to learn When Which Elements are loaded from Where
- Lots of long running JavaScript
Most every WPO tool out there provides a Timeline or Waterfall Chart. It is great to learn how your page actually gets loaded by the browser. Which resources are depending on each other, how does JavaScript impact page load and how much rendering is going on. For me there are always two main focus areas: Network Waterfall and JavaScript Executions. I always try to spot long running network requests, find “blocks” of network requests coming from the same domain, find visual dependencies between requests as well as looking at long running and excessive JavaScript execution.
NOTE: The Timeline & Waterfall visualization is perfect to spot hotspots and bad resource dependencies during page load.
3. JavaScript hotspots
- Very slow unload event handler. 1 sec in total time with 100% CPU
- For Loop iterates through 107k times accessing the window and Date elements in each iteration!
In most web sites JavaScript plays a very important role. As you don't know how powerful the JavaScript engine is going to be that your users are using it is important to optimize your JavaScript to provide good user experience and performance regardless of the used browser version, OS or underlying hardware. In our case we found a very inefficient for-loop that iterated 107k times in the unload event handler. When somebody navigated from one page to the next this JavaScript code blocked the browser for 1s with 100% CPU utilization. That’s something to optimize.
NOTE: Different browsers vary a lot in JavaScript performance: Watch out for bad coding and excessive DOM access.
4. Bad Caching and No Merging
- 89 Images + 64 JS Files on your page. Merge (CSS Sprites), Minify and Cache properly
Most static content (Images, JavaScript, CSS files) can be cached on the browser so that re-visiting users don’t have to download your company logo, product images or jQuery library every time they visit your page. Another point is merging multiple JavaScript and CSS files together to reduce elements on the page. Both are common techniques to optimize first and revisiting user’s experience with your web sites.
NOTE: Images can be sprited, CSS and JS can be merged to reduce roundtrips. Bad or not well defined Cache headings cause browser to re-download content that hasn’t changed
5. Server-Side Performance
In our Performance Clinic, we only analyzed the frontend performance of any website but I found "The Classics" on the backend: too many database roundtrips, bad server-side coding, multi-threading issues with blocking resources, …
So – this is a shout-out to all of out there to look beyond what’s happening in the browser and use tools to also look behind the scenes.
NOTE: Expand your diagnostics horizon and also look what’s happening in your backend implementation!
Do you see these problems?
Even after years of talking & preaching about Web Performance Optimizations I am still seeing the same basic mistakes almost daily. If you have examples or best practices on how you got yourself or your team to become better with analyzing and preventing these problems let me know and post a comment!
No comments :
Post a Comment