Front end-performance
•
0 likes•706 views
The document discusses ways to improve front-end performance and reduce page load times. It describes measuring load times and using tools like YSlow and Firebug to identify issues. Specific techniques mentioned include reducing the number of HTTP requests by combining CSS/JS files, using sprites for images, enabling compression, leveraging a CDN, setting long cache expiration headers, keeping CSS/JS files at the top/bottom of pages, and serving static assets like images from a cookie-free subdomain.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Front end-performance
Similar to Front end-performance (20)
Recently uploaded
Recently uploaded (20)
Front end-performance
- 1. Faster Page Loads with Front End Performance prajwala@azrisolutions.com Azri
- 2. AGENDA Me and my company Tools & Measurement Improve page load time Azri
- 3. ‘Me’ My village HUZURABAD Azri
- 4. More about ‘Me’ • I build applications on Drupal • I am an active contributor of code on Drupal, jQuery and PHP communities • One of my projects, a real-time collaboration suite was showcased at TechCrunch 50 in SF • I build Facebook Applications • ... Azri
- 5. My Company We are based in We code on We build products & solutions using Azri
- 6. Web Page CSS IMAGES HTML + + Flash XHR Javascript Azri
- 7. 80 % of load time Come from CSS + JS + Images Azri
- 8. 5 CSS Requests 27 JS Requests 29 Image Requests Azri
- 9. Measure Overal load time Page size Time until DOM is loaded Time until Page is rendered Time until Page is functional Azri
- 10. Azri
- 12. YSlow Azri
- 13. Waterfall Chart Starrt Connect First byte transfer Last byte transfer Azri
- 14. Reduce Requests Compress Styles and JS Built into Drupal http://drupalmodules.com/module/ad vanced-cssjs-aggregation Sprites Many images into one file Shift into view with background- position Azri
- 15. Reduce Requests No Redirects Use CSS Instead of Images -moz-border-radius:4px; -webkit-border-radius:4px; -border-radius:4px; Data: URLs in style sheets background: white url('data:image/png;base64,iVBORw0KGgoAA AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/// +l2Z/dAAAAM0l EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/ A6 P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') Azri
- 16. Use CDN Content Delivery Network Servers Scattered around world Reduces roundtrip time Some providers Akamai Simple CDN Panther Express Azri
- 17. Cache Use Exprires header for http request Browser caches content Browser checks whether content is fresh For images, js, css set expires header far future Change filename/URL when updating Azri
- 18. Compress Content Use apache mod_deflate module to compress content Reduces page size more than 50% Compress script and styles Azri
- 19. Keep CSS TOP Put <style> or <link> tags in <head> Page renders when all css loaded Loading CSS later causes re- rendering Azri
- 20. Keep JS Bottom Just before </body> Loading scripts in the head will block page rendering Scripts load sequentially Azri
- 21. Cookie Free Domain Use cookie-free domain for static content (images, css, js) Create sub domain that point to same server Use CDN module to serve static content with the new domain Serve static content with nginx or lighttpd servers Azri
- 22. Smush.it Run smush.it Will reduce the size of images Removes white space from the images Keeps the quality of the image Azri
- 23. Parallelization Browser has limitation of 2 requests per domain User multiple domains to serve static content Use CDN module to serve content from multiple domains Azri
- 24. Questions? Questions? prajwala@azrisolutions.com asif@azrisolutions.com Azri