Blackboard DevCon 2011 - Performance Considerations for Custom Theme Development
0 likes845 views
This document discusses performance considerations for customizing Blackboard themes using CSS. It introduces CSS and provides best practices like avoiding unused selectors, overqualified selectors, and the :hover pseudo-selector. Images should use appropriate formats like JPEG and PNG, and be optimized. CSS and images should be minified for faster loading. Tools like Firebug and PageSpeed can analyze performance and identify issues.
Blackboard DevCon 2011 - Performance Considerations for Custom Theme Development
- 1. Performance Considerations for Custom Theme Development Kevin Weisser Noriaki Tatsumi
- 2. Overview • Introduction to Themes • Blackboard Customization Approach • Introduction to CSS • CSS Performance Considerations • Image Performance Considerations • Front-end Analysis Tools
- 5. Blackboard Custom Themes • Blackboard 9.x contains a flexible user interface which can be easily branded to have the look and feel of your institution • This can be accomplished by changing any of the following: – Themes/Color Palettes – Images – Customizing Login Page
- 6. Blackboard’s Recommended Customization Approach 1. Access Learn as System Administrator 2. Navigate to System Admin tab 3. Click on Brands and Themes 4. Click on Theme and Palette Catalog 5. Click icon beside BbLearn Theme 6. Download the theme and save it to your desktop
- 7. Blackboard’s Recommended Customization Approach 7. From Theme and Palette Catalog, select Create Theme 8. Provide the required fields (Theme Name and Reference Name) and click Browse My Computer 9. Select the recently downloaded theme 10. Click Submit 11. Open the file on the application server (Bb root- >content->vii->BBLEARN->branding->themes- >Your Theme Folder) in your favorite editor and proceed to make your changes
- 9. Performance Stories From the Field • Customized login page loads slowly – Mitigated by limiting the requests to those used by the browser • Drag and drop functionality appears choppy – Mitigated by cleaning up poor performing CSS selectors • Pages load slowly in areas with limited connectivity – Mitigated by leveraging browser cache and ensuring that requests were compressed/minified
- 10. Introduction to CSS • Imagine the following block: ... ul#summer-drinks li { font-weight: normal; font-size: 12px; color: black; } … <ul id="summer-drinks"> <li>Whiskey and Ginger Ale</li> <li>Wheat Beer</li> <li>Mint Julip</li> </ul> …
- 11. Introduction to CSS • You want to designate a favorite: … ul#summer-drinks li { font-weight: normal; font-size: 12px; color: black; } .favorite { color: red; font-weight: bold; } … <ul id="summer-drinks“> <li class=“favorite”>Whiskey and Ginger Ale</li> <li>Wheat Beer</li> <li>Mint Julip</li> </ul>
- 12. Introduction to CSS Selector Specificity * 0,0,0,0 li 0,0,0,1 ul li 0,0,0,2 ul ol li.red 0,0,1,3 li.red.level 0,0,2,1 #x34y 0,1,0,0 style=“display:none” 1,0,0,0
- 13. Introduction to CSS • Higher specificity selectors are applied • Last style declared is applied when a tie exists • !important overrides the specificity
- 15. CSS Performance Considerations • Anti-patterns – Unused Selectors – Universal Selectors – Over Qualified Selectors – :hover Pseudo Selector – Descendant Selectors – @import Usage • Optimization – Minification
- 16. Unused Selectors • What are unused selectors? – Declared selectors which are not applied to any element of the DOM • How does this impact performance? – CSS is blocking – More Styles = Larger Files = Longer download times – More Styles = More Parsing – More Styles = More Evaluations
- 17. Unused Selectors • Mitigation techniques – Split external CSS into smaller files grouped by related functionality/styles – When adding styles: • Be aware of already defined styles • Be aware of selector specificity • Be aware of which attributes are available various DOM elements
- 18. Universal Selector • What is a universal selector? – Universal selectors are denoted by the ‘*’ symbol • Example: .itemGallery *{zoom:1;} • How does this impact performance? – Right to left evaluation – Reflow in interactive pages • Mitigation techniques – Be specific
- 21. Over Qualified Selectors • What is an over qualified selector? – ID selectors denoted by ‘#’ that has a preceding element tag • Example: div#lightboxContent h2{position:relative}; – Class selectors denoted by ‘.’ that has a preceding element tag • Example: div.stopped p img{background:#fff -180px;}
- 22. Over Qualified Selectors • How does this impact performance – One more comparison is required during evaluation • Mitigation techniques – Don’t specify the element before the ID/Class selector – IDs should be unique – Classes can be unique
- 23. :hover Psuedo Selector • What is the :hover pseudo selector? – Elements that specify a different style when the mouse hovers over the element element • Example: – tr.S {background-color:#000000} – tr.S:hover {background-color:#FFFFFF} • How does this impact performance? – IE degradation on non-anchor elements – IE9 may correct this problem
- 24. :hover Psuedo Selector • Mitigation techniques <style type="text/css"> tr.S {background-color:#000000} tr.S:hover {background-color:#FFFFFF} </style> <table> <tr class="S"> <td>foo bar</td> </tr> </table> <table> <tr style="background-color:#FFFFFF" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#FFFFFF'"> <td>foo bar</td> </tr> </table>
- 25. Descendant Selector • What are descendant selectors? – Descendant selectors filter based criteria • Example: treehead treerow treecell {…} • How does this impact performance? – More evaluations
- 26. Descendant Selector • Mitigation techniques – Use of child selectors prevent DOM traversal • treehead > treerow > treecell {…} – Class selector is preferred • .treecell-header {…} – Use caution this approach can reduce reusability
- 27. @import Usage • What does @import do? – Allows stylesheets to include other stylesheets • How does this impact performance? – Set number of connections available to request resources – Eliminates parallelism • Mitigation techniques – <link> tags alllow for parallel CSS download
- 28. CSS Minification • Process which removes comments, return characters, and unnecessary white space • Sacrifices readability for smaller file sizes • Free tools available (ex. YUICompressor) • Themes uploaded from the System Admin tab are immediately compressed
- 29. CSS Minification
- 30. Image Performance Considerations • Anti-patterns – Inappropriate image format – Unreachable images – Unused Images
- 31. Inappropriate Image Format: JPEG • Recommended for realistic pictures with smooth gradients and color tones • Not lossless • Sacrifice compression for resolution • JPEGTran optimization
- 32. Inappropriate Image Format: PNG and GIF • PNG and GIF should be used for solid color images (charts or logos) • Use PNG over GIF unless – Image contains animation – Image is extremely small (a few hundred bytes), because GIF tends to be smaller than PNG • PNG is superior because – Copyright free – More efficient compression – Stores all bit depths • OptiPNG, PNGCrush for optimization
- 33. Unreachable Images • Make sure path to image is correct • 404 status on any request is a wasted request – Request may be blocking – Reduces parallelism • Verify all images are reachable via browser profile tools, such as Firebug
- 34. Unused Images • Request to unused images creates unnecessary delays • Longer download times • Reduced parallelism
- 35. Front End Analysis Tools • Firebug (http://getfirebug.com/) – Inspect HTML and modify style/layout in real-time – Debug JavaScript – Analyze network usage and performance • PageSpeed (http://code.google.com/speed/page-speed/) – Optimize with Web performance best practices – Rules of particular interest • Avoid bad requests • Avoid CSS @import • Combine external CSS • Minify CSS • Optimize Images • Use efficient CSS Selectors
- 37. Please provide feedback for this session by emailing [email protected]. The title of this session is: Performance Considerations for Custom Theme (CSS) Development
Editor's Notes
- #3: Goal is to prevent the user from getting themselves into trouble
- #4: Look familiar? What’s a theme?
- #6: ThemeUnifying idea that is a recurrent elementIncludes layout, color, fonts, navigation, and buttonsColor PaletteExtensions to the themeSets color schemes for the entire siteOverride any color specifications found in themePoll audience
- #7: Template helps to avoid most of the common problems
- #9: Demonstration on how to disable the “Manage My Announcements Module”Disable the Manage My Announcements Module Settings image .edit_controls img[alt="Manage My Announcements Module Settings"]{display:none;}
- #10: The template isn’t enough, one can still get themselves into trouble when not following best practices.
- #11: http://css-tricks.com/specifics-on-css-specificity/What does the C stand for?Browser parses the CSS fileSome optimized browsers group selectors into several MapsID MapClass MapTag MapMiscellaneous MapRight to Left evaluationIf a match is found, the CSS Engine must determine the specificity of the selector before applying the declaration blockIf a mismatch is found, the CSS Engine moves to the next selector to evaluateAll selectors in the file are evaluated
- #12: What font color will your favorite drink be?
- #13: The CSS Specification calculates specificity as follows:A equals 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwiseB equals the number of ID attributesC equals the number classes, pseudo-classes, and attributes D equals the number of elements and pseudo-elementsConcatenating the four numbers A-B-C-D gives the specificity
- #14: ul#summer-drinks li has specificity of 0,1,0,2.favorite has specifity 0,0,1,0
- #15: Some repeated pattern of action, process or structure that initially appears to be beneficial, but ultimately produces more bad consequences than beneficial resultsA refactored solution exists that is clearly documented, proven in actual practice and repeatable. -Definition from WikipediaExperiment showing load times across different browsers when different selectors are used (~6,000 DOM Elements)
- #17: http://www.w3.org/TR/CSS21/cascade.html#specificityDOM either because the elements/classes/styles don’t exist or another higher priority style has been declared
- #19: http://webworksconsultant.com/frontend/what-is-wrong-with-universal-css-selector/
- #20: Create replication
- #21: Create replication
- #23: DemoFind a complex page (Course module?)Apply changeset 766696
- #33: http://www.slideshare.net/stoyan/high-performance-web-pages-20-new-best-practices
- #36: Call Out Rules