Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation

 Performance  Sprites  Caching  Tools  Search Engine Optimization (SEO)  Accessibility 2

Techniques for optimizing HTML / CSS / JavaScript Performance

 Why should anyone care?  80% of response time is spent on the client  Slow speed = less sales (Amazon)  Faster websites = more users (= $$$) (Google)  Smaller page sizes = less bandwidth (cut costs)  Best practices guide you all the way  Yahoo Best Practices on Web Performance Yahoo Best Practices on Web Performance Yahoo Best Practices on Web Performance  YSlow and PageSpeed browser plug-ins 4

 Minimize HTTP requests  Each request is a round-trip to the server  How to minimize the request count?  CSS and JS: Combine files  Images  Use sprites  Consider embedding them with data: URIs  Content Delivery Network (CDN) - allows more simultaneous downloads by the browser 5

 Combine multiple images into one  Use background-position to show only part of the composite image  Color considerations 6

 CSS & JS: minify  Tools: Uglify.js, YUI compressor, Closure compiler  Images  Use PNG8 where applicable  Crush PNGs: PNGCrush, pngquant, optiPNG  Reduce the number of colors in a GIF or the JPEG quality 7

 CSS goes in the  CSS goes in the  Because the page will be progressively loaded  JS goes before the  JS goes before the  Because loading and execution blocks the page load and rendering  Will keep you on a blank page if placed in the, until they get loaded 8

 Browsers evaluate CSS selectors from right to left . parentClass >.childClass { … }  Avoid (in order of importance)  Universal selectors  Type (tag) selectors  Descendant selectors (prefer child ones)  Child selectors  9

 HTML is not cached, so its size should be taken care of as well. Things to avoid:  Inline styles  Inline JavaScript  Long dynamic client IDs  Excessive HTML  Long class names if used a lot 10

Getting ahead in search engines

 Search engines use so-called “crawlers” to get the content of the page and index it  The crawlers weigh the data on the page , page URL and headings have great weight  Links from highly valued pages to your page increase its value (Google Page Rank)  Add alt text to images  Use relevant keywords in the content and tags 12

 Search engines love good content  Learn to write for the web Learn to write for the web Learn to write for the web  Inverted pyramid (bottom line goes first)  Meaningful link text (no “click here”)  No SEO technique will replace good content  "Content is king"  "Build sites for people, not search engines" 

“A person’s a person, no matter how small” Dr. Seuss

 Craft content minding disabled users  Blind - include text equivalents of images, use labels in forms  Colorblind - do not convey information using color only  Visually impaired - avoid small font sizes  Epileptic - avoid flashing content (3Hz or more)  Physical disabilities - avoid functionality that relies only on the mouse or keyboard 15

 Why implement accessibility?  Some accessibility features are mandatory for government sites in some countries (US, NL, SW)  “Everyone gets visited by a very important blind user, named Google”  Some SEO and accessibility considerations overlap 16

 Standards  Web Content Accessibility Guidelines (WCAG)  Section  Tools  Will never replace manual testing, but may help  WAVE

Questions?

1. Optimize given HTML and CSS code (see Advanced- Techniques-Homework.rar). Advanced- Techniques-Homework.rarAdvanced- Techniques-Homework.rar 2. Apply a CSS style to given HTML page (see Advanced-Techniques-Homework.rar). Advanced-Techniques-Homework.rar 3. Combine given CSS files (see Advanced-Techniques- Homework.rar). Advanced-Techniques- Homework.rarAdvanced-Techniques- Homework.rar 4. Create a sprite with set of icons (see Advanced- Techniques-Homework.rar). Advanced- Techniques-Homework.rarAdvanced- Techniques-Homework.rar 5. Write and publish few SEO articles (see Advanced- Techniques-Homework.rar). Advanced- Techniques-Homework.rarAdvanced- Techniques-Homework.rar 19