1. Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation www.telerik.com

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

3. Techniques for optimizing HTML / CSS / JavaScript Performance

4.  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

5.  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

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

7.  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

8.  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

9.  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  http://snook.ca/archives/html_and_css/css-parent-selectors http://snook.ca/archives/html_and_css/css-parent-selectors 9

10.  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

11. Getting ahead in search engines

12.  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

13.  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"  https://www.google.com/support/webmasters/ https://www.google.com/support/webmasters/ 13

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

15.  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

16.  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

17.  Standards  Web Content Accessibility Guidelines (WCAG) - http://www.w3.org/WAI/intro/wcag http://www.w3.org/WAI/intro/wcag  Section 508 - http://www.section508.gov http://www.section508.gov  Tools  Will never replace manual testing, but may help  WAVE - http://wave.webaim.org/ http://wave.webaim.org/ 17

18. Questions?

19. 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