Rails Frontend Optimisations (part 2)

Improve your site pageload time compressing your images before deploying to production, cache your node elements and use semantic html to improve readability

Transcript

1. Rails Frontend Optimisations PART II
2. Frontend Optimisations PART II
4. • Compress images with a third-party service • Compile: • Sass • Slim • Coffeescript • Watch for changes in your files and compiles them for you • Run jasmine/qunit/whatever tests • Minify Javascript • Concatenate CSS/JS files
6. $ grunt [smushit]
7. Document Fragments
8. Minimize Browser Reflow
9. Avoid DOM Manipulation
10. 19.38% SLOWER
11. SLOWER
12. SELECTOR CACHING IN JQUERY
13. Javascript has a low entry barrier
14. Redundant selectors $(“#selector”) 1. Search matching element 2. Wrap in jQuery object 3. New instance of same object
15. The solution var $selector = $(“#selector”); Cache jQuery objects
16. What about $(this)? $(document).on(“click", “#selector", function(){ $(this).val(parseInt($(this).val()) + 1); });
17. What about $(this)? $(document).on(“click", “#selector", function(){ var $this = $(this); $this.val(parseInt($this.val()) + 1); });
18. BENCHMARKS!
19. HTML
20. <article> Defines an article in the document
21. <aside> Defines content aside from the page content
22. <details> Defines additional details that the user can view or hide
23. <summary> Defines a visible heading for a <details> element
24. <dialog> Defines a dialog box or window
25. <figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
26. <figcaption> Defines a caption for a <figure> element
27. <footer> Defines a footer for the document or a section
28. <header> Defines a header for the document or a section
29. <main> Defines the main content of a document
30. <nav> Defines navigation links in the document
31. <menuitem> Defines a command/menu item that the user can invoke from a popup menu
32. <meter> Defines a scalar measurement within a known range
33. <progress> Defines the progress of a task
34. <section> Defines a section in the document
35. <time> Defines a date/time
36. <audio> Defines sound or music content
37. <video> Defines video or movie content
38. <source> Defines sources for <video> and <audio>
39. <track> Defines tracks for <video> and <audio>
40. <time> Defines a date/time