1 / 19

Advanced Front-End Techniques

Advanced Front-End Techniques. Performance, SEO, Accessibility. Ivan Zhekov. Telerik Corporation. www.telerik.com. Table of Contents. Performance Sprites Caching Tools Search Engine Optimization (SEO ) Accessibility. Client-Side Performance.

kipling
Download Presentation

Advanced Front-End Techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Advanced Front-End Techniques Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation www.telerik.com

  2. Table of Contents • Performance • Sprites • Caching • Tools • Search Engine Optimization (SEO) • Accessibility

  3. Client-Side Performance Techniques for optimizingHTML / CSS / JavaScript Performance

  4. Why care about 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 • YSlowand PageSpeedbrowser plug-ins

  5. Performance rule #1 • 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

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

  7. Minimizing file size • 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

  8. Where to place CSS and JS • CSS goes in the <head> • Because the page will be progressively loaded • JS goes before the </body> • Because loading and execution blocks the page load and rendering • Will keep you on a blank page if placed in the <head>, until they get loaded

  9. CSS Performance • 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

  10. HTML Considerations • 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

  11. Search Engine Optimization Getting ahead in search engines

  12. Search Engine Optimization • Search engines use so-called “crawlers” to get the content of the page and index it • The crawlers weigh the data on the page • <title>, 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 <meta> tags

  13. Search Engine Optimization (2) • Search engines love good content • Learn to write for the web • Inverted pyramid (bottom line goes first) • Meaningful link text (no “clickhere”) • No SEO technique will replace good content • "Content is king" • "Build sites for people, not search engines" • https://www.google.com/support/webmasters/

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

  15. Accessibility • 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

  16. Accessibility (2) • 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

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

  18. Advanced Techniques ? ? Questions? ? ? ? ? ? ? ? ? ?

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

More Related