HOW TO improve the front-end performance of a website

Steve Souders, Chief Performance Yahoo! has shared his key learnings on improving front-end performance in the book High Performance Web Sites. These are based on his experience leading the Exceptional Performance group at Yahoo!. Excerpts from the book are available at Yahoo! Developer Network.

Here's a quick list of his very practical & useful recommendations:

  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network (CDN) to reduce network hops
  3. Add an Expires Header to make page components cacheable
  4. Gzip page components
  5. Put Stylesheets at the Top
  6. Put Scripts at the Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External, especially those which are re-used across pages.
  9. Reduce DNS Lookups by using Keep-Alive and fewer domains
  10. Minify JavaScript with a Compressor.
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Reconfigure or remove ETags
  14. Make Ajax Cacheable
Related links:

Comments

Post a Comment

Popular posts from this blog

Things Near Me – Find & Learn About Landmarks Nearby

Image
Back in 2012, I was planning to build a location-aware app that would tell me about interesting sights & news-worthy facts about places that fall in the way of a train journey. I discovered that Web Dev guru Chris Heilmann ( @codepo8 ) had built a nifty app on a similar theme and shared the JavaScript code under the BSD license.  Things Around You used the browser's geolocation feature to find Wikipedia articles on nearby landmarks via the GeoNames API & list them with a brief description. For a Windows 8 app hackathon, I utilized the Geolocation detection idea to build a little app that I called GeoBuzz & posted it on the Windows 8 App Store. It's been on the back of my mind to extend it with more features. Now that GitHub Copilot is here, there was no need to procrastinate. I had a friendly chat with GitHub Copilot ( Gemini Flash model ). In under an hour, I customized @codepo8's original sample to include a map directly on the web page instead of linking t...
Read more

What is the difference between Browser Mode & Document Mode in IE

Image
If you're a web developer and your job actively involves building web pages that work the same in all browsers including the last three versions of IE, you'll be no stranger to Browser  & Document Mode in Internet Explorer These options are available with IE Developer Tools (F12 keyboard shortcut). In IE9, these modes let you emulate older versions of IE8 & IE7. Microsoft provides these modes so that websites that were built to target IE7 & lower versions don't fail hopelessly in the newer & more standards-based versions. IE provides a fallback in the form of the Compatibility View button which allows content designed for older web browsers to render well in newer versions of Internet Explorer 9.  Here are the differences between Browser Mode & Document Mode - Browser Mode determines the User Agent sent to the server & the Document Mode IE defaults to. Document Mode determines the layout (rendering engine) and the JavaScript engine. Document...
Read more