Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Helgi Þormar Þorbjörnsson, profile picture
Uploaded byHelgi Þormar Þorbjörnsson
5,923 views

Frontend caching

The document presents key principles of frontend performance optimization discussed by Helgi Þormar Þorbjörnsson at a PHP conference in Nashville. It covers concepts such as the Pareto principle, caching strategies, reducing HTTP requests, and techniques for minimizing file sizes and delays. Additionally, it emphasizes the importance of user perception and provides recommendations for using various tools and practices to improve web performance.

Technology◦
Frontend Caching Helgi Þormar Þorbjörnsson PHP Community Con, Nashville, 21st April 2011 Friday, 22 April 2011
Who am I? VP of Engineering at Orchestra.io Developer at PEAR From Iceland @h on Twitter Friday, 22 April 2011
Pareto Principle 20% 80% Friday, 22 April 2011
80 / 20 Rule 20% 80% 20% of sales people produce 80% of sales Friday, 22 April 2011
80 / 20 Rule 20% 80% 20% of the population receives 80% of the income Friday, 22 April 2011
80 / 20 Rule 20% 80% 20% of causes produce 80% of the effects Friday, 22 April 2011
80% of response time is spent downloading resources Friday, 22 April 2011
4 Rules of Web Performance Friday, 22 April 2011
Weight Time Processing Perception Friday, 22 April 2011
Perception Friday, 22 April 2011
Make people think your site is fast Friday, 22 April 2011
When people can interact with the site Friday, 22 April 2011
Friday, 22 April 2011
“It all depends on how we look at things, and not how they are in themselves.” - Carl G. Jung Friday, 22 April 2011
Perception 50% of users arrive on an empty cache Friday, 22 April 2011
Perception Empty Cache Full Cache 28.0K 1 HTML Document 1.9K 1 Style Sheet File 59.5K 4 Javascript Files 28.0K 1 HTML Document 78.7K 24 Images 0.1K 2 Images 168.1K Total Size 28.1K Total Size 30 HTTP Requests 3 HTTP Requests 2.4s Response Time 0.9s Response Time Friday, 22 April 2011
Weight Friday, 22 April 2011
HTTP Requests Friday, 22 April 2011
HTTP Requests Less is more Friday, 22 April 2011
HTTP Requests Less is more Fewer HTTP Requests Friday, 22 April 2011
HTTP Requests Less is more Fewer HTTP Requests Easy to improve on Friday, 22 April 2011
Cookies Friday, 22 April 2011
Cookies Sent with static content Friday, 22 April 2011
Cookies Sent with static content Slow upstream speed Friday, 22 April 2011
Cookies Sent with static content Slow upstream speed Big cookies Friday, 22 April 2011
Experiment Time! Cookie Size Response Time (Delta) 0 bytes 78 ms ( 0 ms) 500 bytes 79 ms ( +1 ms) 1000 bytes 94 ms (+16 ms) 1500 bytes 109 ms (+31 ms) 2000 bytes 125 ms (+47 ms) 2500 bytes 141 ms (+63 ms) 3000 bytes 156 ms (+78 ms) Friday, 22 April 2011
Cookies Friday, 22 April 2011
Cookies Friday, 22 April 2011
Cookies Remove unnecessary cookies Friday, 22 April 2011
Cookies Remove unnecessary cookies Appropriate domain level Friday, 22 April 2011
Cookies Remove unnecessary cookies Appropriate domain level Keep size low Friday, 22 April 2011
Cookies Remove unnecessary cookies Appropriate domain level Keep size low Set Expires Friday, 22 April 2011
Parallel Downloads Friday, 22 April 2011
Parallel Downloads Be aware of max connection limits Friday, 22 April 2011
Parallel Downloads Be aware of max connection limits CNAME to point multiple sub domains to the same IP Friday, 22 April 2011
Parallel Downloads Be aware of max connection limits CNAME to point multiple sub domains to the same IP Friday, 22 April 2011
Parallel Downloads Borrowed from BrowserScope.org Friday, 22 April 2011
Parallel Downloads Borrowed from BrowserScope.org Friday, 22 April 2011
Parallel Downloads One domain = 2 Parallel connections Friday, 22 April 2011
Parallel Downloads One domain = 2 Parallel connections HTML Image Image Image Image Image Image Image Image 0.4 0.8 1.2 1.6 2 2.4 Secs Friday, 22 April 2011
Parallel Downloads Two domains = 4 Parallel connections HTML Image Image Image Image Image Image Image Image 0.4 0.8 1.2 1.6 2 2.4 Secs Friday, 22 April 2011
Parallel Downloads Too many hostnames can cause complications Friday, 22 April 2011
Parallel Downloads Too many hostnames can cause complications 2 – 4 sub domains is a good average Friday, 22 April 2011
Combine Files Combining 6 scripts into 1 eliminates 5 requests Friday, 22 April 2011
Combine Files Combining 6 scripts into 1 eliminates 5 requests Challenges: develop as separate modules combinations vs. loading more than needed Friday, 22 April 2011
Javascript Doesn’t comply with parallel download rules Friday, 22 April 2011
Javascript Doesn’t comply with parallel download rules HTML JS Image Image Image Image Image Image Image 0.4 0.8 1.2 1.6 2 2.4 Secs Friday, 22 April 2011
Javascript script defer attribute is not a solution Friday, 22 April 2011
Javascript script defer attribute is not a solution Solution - move them as low in the page as possible Friday, 22 April 2011
Processing Friday, 22 April 2011
Processing Friday, 22 April 2011
Processing Fake the delivery Friday, 22 April 2011
Processing Fake the delivery Lazy Loading Friday, 22 April 2011
Processing Fake the delivery Lazy Loading Above the fold Loading Friday, 22 April 2011
Processing Fake the delivery Lazy Loading Above the fold Loading Delay Javascript Loading Friday, 22 April 2011
Processing http://www.appelsiini.net/projects/lazyload Friday, 22 April 2011
Processing Bonus - async attribute http://www.appelsiini.net/projects/lazyload Friday, 22 April 2011
JS Minification Friday, 22 April 2011
JS Minification Crushes the file Strips out all cruft Voodoo Magic! Friday, 22 April 2011
JS Minfication UglifyJS Google Closure YUI Compressor Dojo Shrinksafe JSMin Friday, 22 April 2011
JS Minfication UglifyJS Google Closure YUI Compressor Dojo Shrinksafe JSMin http://bit.ly/compression-rates Friday, 22 April 2011
CSS Minification YUI Compressor minifycss.com OOCSS Friday, 22 April 2011
GZip GZip can be used on JS CSS XML JSON Friday, 22 April 2011
GZip GZip should not be used on Images Document formats Already compressed Friday, 22 April 2011
404 robots.txt favicon Friday, 22 April 2011
Images Friday, 22 April 2011
Images favicon Friday, 22 April 2011
Images favicon CSS Sprites Friday, 22 April 2011
Images favicon CSS Sprites Friday, 22 April 2011
Sprites Friday, 22 April 2011
Sprites Reduces HTTP Requests Friday, 22 April 2011
Sprites Reduces HTTP Requests Uses CSS Position magic Friday, 22 April 2011
Sprites Reduces HTTP Requests Uses CSS Position magic Hard to maintain long term Friday, 22 April 2011
Sprites Reduces HTTP Requests Uses CSS Position magic Hard to maintain long term Time sink Friday, 22 April 2011
Sprites Reduces HTTP Requests Uses CSS Position magic Hard to maintain long term Time sink Too much magic Friday, 22 April 2011
Resource Packages Friday, 22 April 2011
Resource Packages JAR file that contains everything Friday, 22 April 2011
Resource Packages JAR file that contains everything Compresses Friday, 22 April 2011
Resource Packages JAR file that contains everything Compresses Accesses individual resources Friday, 22 April 2011
Resource Packages JAR file that contains everything Compresses Accesses individual resources Easy to maintain Friday, 22 April 2011
Resource Packages JAR file that contains everything Compresses Accesses individual resources Easy to maintain New Proposal in the works Friday, 22 April 2011
Images Badly optimised Thumbnails PNGs compressed up to 50% Friday, 22 April 2011
PNG Optimise OptiPNG pngwolf pngcrush jpegtran Friday, 22 April 2011
Time Friday, 22 April 2011
SSL Friday, 22 April 2011
SSL Extra roundtrips Friday, 22 April 2011
SSL Extra roundtrips More resources for servers Friday, 22 April 2011
SSL Extra roundtrips More resources for servers Worth it, tho! Friday, 22 April 2011
Tread the users’ path Test on slower connections Slow proxies Friday, 22 April 2011
Tread the users’ path Tables / Phones Airline connections Public places Friday, 22 April 2011
CDN Single domain Smart routing Data is closer to end user Friday, 22 April 2011
CDN Friday, 22 April 2011
CDN Friday, 22 April 2011
CDN on a Budget S3 Friday, 22 April 2011
Expires Headers Last-Modified Appropriate Dates Cache far in the future Change file names Friday, 22 April 2011
ETags Hash Tag Cache vs Server More flexible than dates Good for Single Server Friday, 22 April 2011
Problems Friday, 22 April 2011
Problems Typically unique per server Friday, 22 April 2011
Problems Typically unique per server Disable if not used Friday, 22 April 2011
Farms Use options that are not unique per server Friday, 22 April 2011