Downloaded 28 times
![Measure
Google Analytics Site
Speed
//default sample rate is 1%
_gaq.push(['_setSiteSpeedSampleRate', 5]);](https://image.slidesharecdn.com/fronteers-120625065455-phpapp01/85/A-little-journey-into-website-optimization-73-320.jpg)
Uploaded byStelian Firez
A little journey into website optimization
The document discusses website optimization with a focus on fast page load times, noting that users often abandon sites that take longer than 3 seconds to load. It provides various strategies for improving performance, such as minimizing HTTP requests, optimizing images, and leveraging caching techniques. Additionally, it emphasizes the significance of maintaining consistent design and reducing file sizes to enhance the user experience.
More Related Content
Similar to A little journey into website optimization
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
A little journey into website optimization
- 1. Fast Fast ER Fast EST a little journey into Website Optimization
- 2. @stelian web designer @digiti believesin optimization
- 3. “People don’t like to wait” - Captain Obvious
- 5. 40% of peopleabandon a website that takes more than 3 seconds to load. - Forrester Research
- 6. online shoppers expect pages to load in 2 seconds - Forrester Research
- 7. on the web 250ms might win you the race - Google & Microsoft studies
- 8. Page load timesaffect online businesses
- 10. +500ms -3% Traffic Page load time
- 11. +500ms -1.2% Revenue Page load time
- 12. +100ms -1% Page load Sales time
- 13. “80-90% of theend-user response time is spent on the front-end” - Steve Saunders, Google
- 14. Objectives Low numberof files Small file size Fast rendering
- 15. Low number offiles
- 16. "Every HTTP requestis a gamble. A chance to fail." - Scott Jehl
- 17.
- 18.
- 20.
- 21. 1 CSS file,ideally
- 22.
- 24. Use @media print instead of print.css
- 25. 1 JS fileper hostname
- 26.
- 28.
- 29. Write semantic HTML avoidingunnecessary elements
- 30.
- 31. Smaller CSS use areset.css file to avoid repetition use shorthand properties *design with consistency remove unused styling * for the designers
- 32. Normal body{ font-family: "LucidaGrande", Lucida, Verdana, sans-serif; font-size: 1em; line-height: 1.5em; font-style: italic; font-weight: bold; } Shorthand body{ font: italic bold 1em/1.5em "Lucida Grande", Lucida, Verdana, sans-serif; }
- 33. Consistency: font-size 23% 10+ 100+ 78% The number of font-size declarations Alexa top 1000 websites
- 34. Consistency: patterns source: stubbornella.org
- 35. Minify the CSS
- 36. Use font subsets if possible
- 37. Choose the right imageformat binary files (images, PDFs, ...) 84% Alexa top 1000 websites
- 38.
- 39. PNG-8 for small dimensionsand no need for true color support; recommended for illustrations
- 40. PNG-8 Alpha Transparency Fireworks
- 41. PNG-8 Alpha Transparency ImageAlpha (Free)
- 42. PNG-24 whenin need for high quality graphics, although it tends to get bigger in size
- 43. Use posterization to reduce the number of colors in a PNG-24 file
- 44. JPEG great for largeimages that contain photographic data
- 45. JPEG tips 80% qualityis usually good enough try to align edges to an 8x8 pixel grid use JPEG selective quality in FW
- 46. JPEG Left square alignedto the 8x8 grid, right one not
- 47. JPEG Selective Quality in Fireworks
- 48. Use ImageOptim to compress images further Alternatives: smush.it, punypng, jpegmini
- 51. Original PNG-8 + Alpha Transparency 1068 KB 263 KB
- 52. Original PNG-8 + Alpha +ImageOptim 1068 KB 228 KB
- 53.
- 54.
- 55. Cache static files forever
- 56. “e fastest HTTP requestis the one not made”
- 57. Using .htaccess Header unsetPragma FileETag None Header unset ETag # cache images for 10 years <FilesMatch ".(ico|pdf|jpg|jpeg|png|gif)$"> Header set Cache-Control "max-age=315360000, public, must-revalidate" Header unset Last-Modified </FilesMatch> # cache html/htm/xml/txt files for 2 hours <FilesMatch ".(html|htm|xml|txt|xsl)$"> Header set Cache-Control "max-age=7200, must-revalidate" </FilesMatch> this is just an example; for best results, use HTML5 Boilerplate
- 58.
- 59. Faster CSS Don't use @import Stay away from * Avoid using a tag as a key body * {...} body > * {...} ul.active li a {...} ul.active > li > a {...}
- 60. Use CSS3 responsibly don’toveruse border-radius, box-shadow, gradients http://perfectionkills.com
- 61. Use domain sharding to increase the number of concurrent connections
- 62. Use a CDN ContentDelivery Network
- 63. Use CDN hosted JS libraries
- 64. Specify the jQueryversion for better caching http://code.jquery.com/jquery-latest.min.js no cache http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js 1 hour http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 1 year
- 65. Always load scripts asyncroniuslyand put them at the bottom of the page
- 66. Compress only compressible resources HTML, CSS, JS, XML, SVG, ICO use GZIP instead of Deflate use lowercase for better compression HTML5 Boilerplate .htaccess recommened
- 67. e favicon have oneto avoid a 404 load it from a subdomain compress it cache it forever
- 68. Avoid mixed content warnings http://code.jquery.com/jquery-latest.min.js //ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
- 69.
- 70. Watch out for404 favicon apple touch icons apple-touch-icon-ZxZ-precomposed (android) crossdomain.xml
- 71.
- 72.
- 73. Measure Google Analytics Site Speed //default sample rate is 1% _gaq.push(['_setSiteSpeedSampleRate', 5]);
- 74.
- 75.
- 76.
- 77. Apple The iPhonesaves a screenshot of every app when it closes. So when you relaunch the app it loads that screenshot first.
- 78.
- 79.
- 80.
- 81. Amazon Priority Loading
- 82. Tools & Resources(1of 2) Tools ๏ ImageOptim ๏ ImageAlpha ๏ HTML5 Boilerplate ๏ Smush.it - PunyPNG - JPEGmini - PNGGauntlet (Win) ๏ Online YUI Compressor ๏ CSS Sprite Generator - CSSsprite Photoshop script ๏ Page Speed - YSlow Resources ๏ Akamai Reveals 2 Seconds as the New Threshold of Acceptability for eCommerce Web Page Response Times ๏ How Loading Time Affects Your Bottom Line (Infographic) ๏ For Impatient Web Users, an Eye Blink Is Just Too Long to Wait ๏ Facebook pages that are 500ms slower result in a 3% drop-off in traffic (PDF) ๏ If Google increased page load by 500ms it would cost them 1.2% of their revenue (Video) ๏ Every 100ms of latency costs Amazon 1% of profit ๏ The Performance Golden Rule
- 83. Tools & Resources(2of 2) ๏ Most Browsers Allow 6 Concurrent Connections per Hostname ๏ Top 5 Mistakes of Massive CSS (Video + Graphs) ๏ How to create CSS objects? Get the granularity right! ๏ HTTP Compression use by Alexa Top 1000 ๏ Profiling CSS for fun and profit. Optimization notes. (CSS3 Performance) ๏ Maximize Your Chances of Caching Your jQuery ๏ Lose the Wait: HTTP Compression ๏ Instagram and Optimizing Favicons ๏ Use Lowercase Markup For Better Compression ๏ Small site? Raise your page load time calculation sample to 100% ๏ The iPhone’s Perceived Performance ๏ The 3 White Lies Behind Instagram’s Lightning Speed ๏ Making a Slow Site Appear Fast