performance, seo, accessibility ivan zhekov telerik corporation
TRANSCRIPT
![Page 1: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/1.jpg)
Advanced Front-End Techniques
Performance, SEO, Accessibility
Ivan ZhekovTelerik
Corporationwww.telerik.com
![Page 2: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/2.jpg)
Table of Contents Performance
Sprites Caching Tools
Search Engine Optimization (SEO) Accessibility
2
![Page 3: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/3.jpg)
Client-Side Performance
Techniques for optimizingHTML / CSS / JavaScript
Performance
![Page 4: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/4.jpg)
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
![Page 5: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/5.jpg)
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
![Page 6: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/6.jpg)
Sprites Combine multiple images into one
Use background-position to show only part of the composite image
Color considerations
6
![Page 7: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/7.jpg)
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
![Page 8: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/8.jpg)
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
![Page 9: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/9.jpg)
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
![Page 10: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/10.jpg)
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
![Page 11: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/11.jpg)
Search Engine OptimizationGetting ahead in search
engines
![Page 12: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/12.jpg)
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
![Page 13: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/13.jpg)
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
![Page 14: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/14.jpg)
Accessibility“A person’s a person,no matter how small”
Dr. Seuss
![Page 15: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/15.jpg)
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
![Page 16: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/16.jpg)
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
![Page 17: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/17.jpg)
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
![Page 18: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/18.jpg)
Advanced Techniques
Questions? ?
?? ? ?
???
?
?
![Page 19: Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation](https://reader035.vdocuments.mx/reader035/viewer/2022062716/56649dce5503460f94ac28b8/html5/thumbnails/19.jpg)
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