performance, seo, accessibility ivan zhekov telerik corporation
TRANSCRIPT
Advanced Front-End Techniques
Performance, SEO, Accessibility
Ivan ZhekovTelerik
Corporationwww.telerik.com
Table of Contents Performance
Sprites Caching Tools
Search Engine Optimization (SEO) Accessibility
2
Client-Side Performance
Techniques for optimizingHTML / CSS / JavaScript
Performance
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 Perfor
mance YSlow and PageSpeed browser
plug-ins
4
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
5
Sprites Combine multiple images into one
Use background-position to show only part of the composite image
Color considerations
6
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
7
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
8
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
9
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
10
Search Engine OptimizationGetting ahead in search
engines
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
12
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 “click here”)
No SEO technique will replace good content "Content is king" "Build sites for people, not search
engines" https://www.google.com/support/webma
sters/
13
Accessibility“A person’s a person,no matter how small”
Dr. Seuss
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
15
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
16
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/
17
Advanced Techniques
Questions? ?
?? ? ?
???
?
?
Exercises1. Optimize given HTML and CSS code (see
Advanced-Techniques-Homework.rar).
2. Apply a CSS style to given HTML page (see Advanced-Techniques-Homework.rar).
3. Combine given CSS files (see Advanced-Techniques-Homework.rar).
4. Create a sprite with set of icons (see Advanced-Techniques-Homework.rar).
5. Write and publish few SEO articles (see Advanced-Techniques-Homework.rar).
19