Bookmarklets for Speed

666
-1

Published on

Popular bookmarklets you can use to improve your website's performance

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
666
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Bookmarklets for Speed

    1. 1. Bookmarklets For Speed Dan DeFelippi
    2. 2. WTF is a Bookmarklet?
    3. 3. WTF is a Bookmarklet?An app stored in the URL of a bookmark.
    4. 4. The Bookmarklets Mobile Perf
    5. 5. The Bookmarklets Mobile Perf• Firebug Lite
    6. 6. The Bookmarklets Mobile Perf• Firebug Lite• Docsource
    7. 7. The Bookmarklets Mobile Perf• Firebug Lite• Docsource• DOM Monster
    8. 8. The Bookmarklets Mobile Perf• Firebug Lite • Storager• Docsource• DOM Monster
    9. 9. The Bookmarklets Mobile Perf• Firebug Lite • Storager• Docsource • SpriteMe• DOM Monster
    10. 10. The Bookmarklets Mobile Perf• Firebug Lite • Storager• Docsource • SpriteMe• DOM Monster • CSSess
    11. 11. Mobile Perf
    12. 12. Mobile Perf• Bundle of performance bookmarklets• http://bit.ly/mobileperf
    13. 13. Firebug Lite
    14. 14. Firebug Lite• JS version of Firebug
    15. 15. Firebug Lite• JS version of Firebug• Console, HTML inspection, CSS, DOM
    16. 16. Firebug Lite• JS version of Firebug• Console, HTML inspection, CSS, DOM• Missing Features
    17. 17. Firebug Lite• JS version of Firebug• Console, HTML inspection, CSS, DOM• Missing Features • JS debugging
    18. 18. Firebug Lite• JS version of Firebug• Console, HTML inspection, CSS, DOM• Missing Features • JS debugging • Network monitoring
    19. 19. Firebug Lite• JS version of Firebug• Console, HTML inspection, CSS, DOM• Missing Features • JS debugging • Network monitoring• http://bit.ly/firebuglite
    20. 20. Docsource
    21. 21. Docsource• View page source easily on mobile browsers• http://bit.ly/viewdc
    22. 22. DOM Monster
    23. 23. DOM Monster• Analyzes the DOM
    24. 24. DOM Monster• Analyzes the DOM• Performance issues / bottlenecks
    25. 25. DOM Monster• Analyzes the DOM• Performance issues / bottlenecks• Recommends fixes
    26. 26. DOM Monster• Analyzes the DOM• Performance issues / bottlenecks• Recommends fixes• http://bit.ly/dom-monster
    27. 27. Storager• Manipulate and view localStorage and sessionStorage• http://bit.ly/storager
    28. 28. SpriteMe
    29. 29. SpriteMe• Automated sprite creation
    30. 30. SpriteMe• Automated sprite creation• Merges images and creates CSS
    31. 31. SpriteMe• Automated sprite creation• Merges images and creates CSS• http://spriteme.org
    32. 32. CSSess
    33. 33. CSSess• Check for unused CSS across multiple pages• http://cssess.com
    34. 34. Questions? @ExpertDandan@driverdan.com Rate me: http://spkr8.com/t/7268
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×