Addy OsmaniVerified account

@addyosmani

Engineering Manager working on • Husband & Dad • Make the web fast ⚡• Lighthouse, PageSpeed Insights, DevTools • Founder TeeJungle

Mountain View, CA
Joined April 2009

Tweets

You blocked @addyosmani

Are you sure you want to view these Tweets? Viewing Tweets won't unblock @addyosmani

  1. Pinned Tweet

    Native <img> lazy-loading is coming to the web! <img loading=lazy> defers offscreen images until the user scrolls near them. Shipping in Chrome ~75

    Undo
  2. Tip: has a CSS Animations inspector! Modify timing, delays, durations and more.

    Undo
  3. Browsers can animate at least 4 things cheaply: position, scale, rotation & opacity. is still useful for checking if CSS triggers re-layouts or reflows.

    Undo
  4. Tip: highlight images missing alt text with img:not([alt])

    Using img:not([alt]) to highlight images missing alt text. You can also use Lighthouse or editor plugins to detect the same.
    Undo
  5. Retweeted
    Jan 6

    *Works on fixing a bug for 3 hours with no progress and a multitude of contempt for programming* ... *Wakes up the next morning and fixes the bug in 2 minutes* 🤦‍♀️

    Undo
  6. ~"We think old code is a mess because of a cardinal law of programming: It’s harder to read code than to write it":

    Undo
  7. Idea: Turn off animations if users are on a slow device. Demo with React (Next.js), Framer Motion & react-adaptive-hooks: (forces low-memory mode)

    Undo
  8. "If you can't measure it, you can't improve it" covers how to measure modern web performance metrics & optimize for them.

    Undo
  9. Tip: can take full size screenshots of websites. Press Cmd + Shift + P and type "Capture full size screenshot"

    Undo
  10. Bubble sort visualization (by u/pedrovhb)

    Undo
  11. Tip: has a Shadow Editor built in!

    Undo
  12. Cool interactive CSS Grid builder: Supports template areas, line names and outputs to !

    Undo
  13. eBay had a big year of performance optimization: ~ smaller payloads, smart prefetching & edge-caching had an impact. For every 100ms improvement in search page loading time, they saw a 0.5% increase in Add to Cart count! ⚡️

    Undo
  14. Breadth-first search visualization (by /u/pedrovhb)

    Undo
  15. Tips on debugging React performance with: * Chrome DevTools * React DevTools * React Profiler API and

    Undo
  16. Tip: With open, click/hold the Reload button for bonus Empty Cache & Hard Reload options:

    Undo
  17. Adaptive Media Loading with React & Next.js: 🐌 Slow network? Low-memory? > Light experience. 💨 Fast network? High-memory? > Full experience. 🔧 Built with Client Hints (server) & react-adaptive-hooks (client)

    Undo
  18. Learn how and *why* things work the way they do. Scratch beyond the surface. This prepares you to use knowledge in a lot more situations.

    Undo
  19. The life of a project

    Undo
  20. Yearly reminder: "Is this element in view?" can be efficiently solved with Intersection Observer: ~ You probably don't want getBoundingClientRect()

    Undo
  21. Q: Why's our page's Time-to-Interactive high? 🤔 A: It's often Long (JavaScript) Tasks keeping the main thread busy ⏳ visualizes Long Tasks, making it easier to see what to optimize:

    Undo

Loading seems to be taking a while.

Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.

    You may also like

    ·