![Page 2: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/2.jpg)
LOVE2DEV.COM
High Performance Single Page Web Applications Responsive Design Touch Mobile First SPA Extensible, Scalable Architecture
~395 Pages20 Chapters$9.99
http://amzn.to/1a55L89
![Page 3: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/3.jpg)
LOVE2DEV.COM
Slide Deck & Source Code
http://GitHub.com/docluv
slidesha.re/15YTrTT
![Page 4: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/4.jpg)
LOVE2DEV.COM
Loading…
Annoying?
![Page 5: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/5.jpg)
LOVE2DEV.COM
![Page 6: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/6.jpg)
LOVE2DEV.COM
Web Performance OptimizationWeb performance optimization, WPO, or website optimization involves ongoing monitoring and testing of websites to achieve optimum performance under given constraints. Usually optimization is restricted due to lack of complete information and metrics to evaluate the performance of a website.
http://bit.ly/SWEh6E
![Page 7: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/7.jpg)
LOVE2DEV.COM
Matt Cutts"Also take a step back for a minute and consider the intent of this change: a faster web is great for everyone, but especially for users. Lots of websites have demonstrated that speeding up the user experience results in more usage. So speeding up your website isn’t just something that can affect your search rankings–it’s a fantastic idea for your users.“
http://bit.ly/SPPB4k
![Page 8: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/8.jpg)
LOVE2DEV.COM
Faster Sites Rank HigherFaster is Better User Experience http://bit.ly/1Ezmko6
Mobile First Web Applications Rank HigherMobilegeddon http://bit.ly/1JFpsmE
SEO & Web Performance
![Page 9: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/9.jpg)
LOVE2DEV.COM
Faster Sites Have Higher Conversion Rates
http://bit.ly/S1fHSZhttp://bit.ly/WajJbBhttp://bit.ly/S3UoAjhttp://bit.ly/RIQMDM
![Page 10: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/10.jpg)
LOVE2DEV.COM
WalmartOn initial measurement, an item page took about 24 seconds to load for the slowest 5% of users.
24 sec
![Page 11: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/11.jpg)
LOVE2DEV.COM
http://mobile.httparchive.org/viewsite.php?pageid=515720
Walmart – Too Many Page Elements
![Page 12: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/12.jpg)
LOVE2DEV.COM
WalmartSlow third-party scripts
![Page 13: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/13.jpg)
LOVE2DEV.COM
Walmart – Multiple HostsAlmost 50% of page content is served by partners, ads, affiliates, and Marketplace
42 / 87 total requests
http://bit.ly/WajJbB
![Page 14: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/14.jpg)
LOVE2DEV.COM
Google’s ½ SecondHalf a second delay caused a 20% drop in traffic.
Half a second delay killed user satisfaction.
The lesson, Marissa said, is that speed matters. People do not like to wait. Do not make them.
http://bit.ly/TPPhUp
![Page 15: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/15.jpg)
LOVE2DEV.COM
Performance Fast Facts57% Will Abandon a Slow Site After 3 SecondsWe Have to Concentrate 50% Harder for Slow Sites
78% Have Felt Stress or Anger With Slow Sites44% Say Slow Sites Make Them Anxious4% Have Thrown Their Phone
http://bit.ly/SuBLDR
![Page 16: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/16.jpg)
LOVE2DEV.COM
Web Sites Are Fatter and Out of Shape
http://httpArchive.org as of 3/1/2016
100 File Requests – 2.2+MB22 JavaScript Files - 368KB7.7 CSS Files – 77KB54 Images – 1.4MB40 TCP Connections17 Domains49% Cacheable
![Page 17: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/17.jpg)
LOVE2DEV.COM
Web Sites Are Getting Larger
![Page 18: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/18.jpg)
LOVE2DEV.COM
Average Web Page ~2.5 mBIn 1990’s, my Master’s thesis & program fit on single 3.5 floppy diskWith room to spare The most common format was a double-sided, high-density (HD) 1.44 MB disk drive.
![Page 19: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/19.jpg)
http://bit.ly/1zXjWqBLOVE2DEV.CO
M
![Page 20: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/20.jpg)
That's Great But I Work in the Enterprise
LOVE2DEV.COM
![Page 21: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/21.jpg)
LOVE2DEV.COM
Performance IS RelevantDo you want to waste $$$You want to make co-workers hate you?
And Possibly Throw a Phone at YouRemember the Physiological Stats?Slow Web Apps Have Higher Data Entry Error Rates
Due to Increase Cognitive LoadYou Are Going Mobile
And You Already Have, Even If You and Your Boss Does Not Acknowledge It
![Page 22: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/22.jpg)
http://bit.ly/16zFCXLLOVE2DEV.COM
![Page 23: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/23.jpg)
LOVE2DEV.COM
Good Code Is CheaperPerformance Best Practices Lead To:
Well Structured CodeSmaller Code
Easier MaintenanceFewer Bugs
Encourages Development Best PracticesEncourages Discipline
![Page 24: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/24.jpg)
LOVE2DEV.COM
OK, How Do I Fix Things?
![Page 25: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/25.jpg)
LOVE2DEV.COM
Measure
Load TimePage Speed IndexRenderingRun-Time Performance
![Page 26: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/26.jpg)
LOVE2DEV.COM
Set A Performance Budget“This may be a specific load time, but it is usually an easier conversation to have when you break the budget down into the number of requests or size of the page.”
Tim Kadlec http://bit.ly/1CUAfGx
![Page 27: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/27.jpg)
LOVE2DEV.COM
Set A Performance BudgetTypical Load TimeShoot for < 2 Seconds Over Broadband
My Standard< 1 Second
![Page 28: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/28.jpg)
LOVE2DEV.COM
Set A Performance Budget
Page WeightWhat Does My Web Site Cost? - http://whatdoesmysitecost.com/
![Page 29: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/29.jpg)
LOVE2DEV.COM
webpagetest.orgOnline ToolIdentifies Common Performance IssuesMust be Public URL
http://bit.ly/1dibffr
![Page 30: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/30.jpg)
LOVE2DEV.COM
http://bit.ly/1dibffr
![Page 31: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/31.jpg)
LOVE2DEV.COM
webpagetest.org – film strip view
![Page 32: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/32.jpg)
LOVE2DEV.COM
YSlow Rules1. Minimize HTTP Requests2. Use a Content Delivery Network3. Avoid empty src or href4. Add an Expires or a Cache-Control
Header5. Gzip Components6. Put StyleSheets at the Top7. Put Scripts at the Bottom8. Avoid CSS Expressions9. Make JavaScript and CSS External10.Reduce DNS Lookups11.Minify JavaScript and CSS12.Avoid Redirects13.Remove Duplicate Scripts14.Configure ETags
15.Make AJAX Cacheable16.Use GET for AJAX Requests17.Reduce the Number of DOM
Elements18.No 404s19.Reduce Cookie Size20.Use Cookie-Free Domains for
Components21.Avoid Filters22.Do Not Scale Images in HTML23.Make favicon.ico Small and
Cacheable
http://yhoo.it/W7BFIw
![Page 33: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/33.jpg)
LOVE2DEV.COM
Critical Rendering Path
![Page 34: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/34.jpg)
LOVE2DEV.COM
1. Add A Fav Icon – Eliminate 404s
“Most of your scaling problems won’t be glamorous“
Mike Kriegerhttp://bit.ly/QeKZsO
![Page 35: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/35.jpg)
LOVE2DEV.COM
Make FavIcon Small and Cacheable•Don’t Return 404• YSlow Rule #18
•Make Sure Its Compatible• PNG/ICO
• It Carries Cookie Weight
• Instagram Lesson #1http://bit.ly/RUXEiL
![Page 36: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/36.jpg)
LOVE2DEV.COM
2. Use a CDN•Globally Distributes Resources Closer to Client•Was Expensive• Amazon CloudFront & Azure cost pennies a month
![Page 37: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/37.jpg)
LOVE2DEV.COM
3. Far Future Expires Header• Lets the Browser Cache Resources Locally• Eliminates Future Http Requests• The Fastest Http Request is the one not made•Only Updates Resource if Changed on Server
![Page 38: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/38.jpg)
LOVE2DEV.COM
4. Use LocalStorage For Storage & Caching
• Allows You to Keep Data Locally in a Hash Table• localStorage• sessionStorage
• Approximately 5-10MB• Replace Cookies• Great For Caching• Use IndexDB for Larger Data Sets
![Page 39: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/39.jpg)
LOVE2DEV.COM
AJAX Caching• Checks localStorage Before Making AJAX Call• Stores Data in localStorage with Expiration Value• Radically Reduces Http Requests• Radically Improves Performance• The Fastest AJAX Request is the One That is Never Made.
![Page 40: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/40.jpg)
LOVE2DEV.COM
5. No More Cookies
Cookies Add WeightPlace Resources (img/css/js) on Cookie-less DomainsCDNs Are Great For No CookiesConsider Local Storage Instead
![Page 41: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/41.jpg)
LOVE2DEV.COM
SWA & Cookies
![Page 42: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/42.jpg)
LOVE2DEV.COM
Impact of Cookies on Response Time
![Page 43: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/43.jpg)
LOVE2DEV.COM
Is 78ms A Big Deal???• Remember 100 Files• 100 * 78ms = 7800ms or 7.8 Seconds• 1300ms when considering 6 parallel connections
•Does Cause Delay• Parallel Downloads Help Overall Time
•Don’t Use 100 Files, Duh
![Page 44: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/44.jpg)
LOVE2DEV.COM
6. Optimize Images• Images are Too Large• PNGCrush, Kraken.io• Image Sprites•Glyph Fonts•Data URIs• CSS Rules
![Page 45: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/45.jpg)
LOVE2DEV.COM
• CSS Sprites• Consider Gyph/Icon Font• CSS Gradients, Border Radius, Shadows• Text• This is a 30KB Image – Possible Change to 0KB*
![Page 46: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/46.jpg)
LOVE2DEV.COM
7. Bundle & Minify CSS & JavaScript• Eliminate Excess HTTP Requests• Reduces Data Footprint• This is a Release or Production Version• Shoot for a Single JS and a Single CSS file in Production• * Consider Inlining CSS
![Page 47: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/47.jpg)
LOVE2DEV.COM
7a. Inline Critical CSS & Remove Unused CSS• Inlining Critical CSS Enables Instant Rendering Experience• Remove Unused CSS• UNCSS Module• Identify Critical CSS
• Example: Most Bootstrap Sites Use <10% of Bootstrap• Bootstrap Adds up to 600kb to Page Weight
![Page 48: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/48.jpg)
LOVE2DEV.COM
Use A Client Build SystemBundling & Minification is OKGrunt Is Very Easy & Extensive
• Validate Scripts• Combine & Minify Scripts• Validate CSS• Combine & Minify CSS• Critical CSS• UNCSS• Many Other Tasks
Gulp, Broccoli, Webpack, NPM are also good tools• http://bit.ly/1kcrpuo
![Page 49: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/49.jpg)
LOVE2DEV.COM
8. Gzip Text Content• Browsers Support Gzip & Deflate Algorithms• Reduces Text Base Content Size•Makes it Easier to Traverse Intertubes• 14kb Critical Packet Size
• This is due to HTTP’s Slow Start• This is the Goal for Optimal Mobile Performance
![Page 50: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/50.jpg)
LOVE2DEV.COM
Configure Gzip in IIS
![Page 51: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/51.jpg)
LOVE2DEV.COM
Configure Gzip in Amazon S3 | CloudFront
![Page 52: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/52.jpg)
LOVE2DEV.COM
9. Consider A Static Application • Bypasses server-side rendering systems like ASP.NET, PHP, etc • Can be hosted in cloud file storage (S3, Azure Blobs) • Client-side rendering in a SPA
![Page 53: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/53.jpg)
LOVE2DEV.COM
9. Consider A Static Application • Fast – No Server-Side Processing• Scale Better, handle traffic surges• Secure (no pipeline to hack)• Flexible or simpler to develop• Cheap to host (Blobs, S3 for example)
![Page 54: 10 things you can do to speed up your web app today 2016](https://reader036.vdocument.in/reader036/viewer/2022070516/586fd3d91a28ab18428b4635/html5/thumbnails/54.jpg)
LOVE2DEV.COM
10. Be Responsive• Responsive Design • 1 site to rule them all • Responsive Images • Load the right image for the screen