10 things you can do to speed up your web app today 2016

  • Published on
    07-Jan-2017

  • View
    560

  • Download
    0

Embed Size (px)

Transcript

10 Things You Can Do To Speed Up You Web App Today

10 Things To Speed Up Your Web App TodayChris Love@ChrisLoveLove2Dev.comLOVE2DEV.COM

1

High Performance Single Page Web ApplicationsLOVE2DEV.COM Responsive DesignTouch Mobile FirstSPAExtensible, Scalable Architecture~395 Pages20 Chapters$9.99http://amzn.to/1a55L89

2

Slide Deck & Source Code

http://GitHub.com/docluvLOVE2DEV.COM

slidesha.re/15YTrTT

3

LOVE2DEV.COM

LoadingAnnoying?

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

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 isnt just something that can affect your search rankingsits a fantastic idea for your users.http://bit.ly/SPPB4k

LOVE2DEV.COM

Faster Sites Rank HigherFaster is Better User Experience http://bit.ly/1Ezmko6

Mobile First Web Applications Rank HigherMobilegeddon http://bit.ly/1JFpsmESEO & Web PerformanceLOVE2DEV.COM

Faster Sites Have Higher Conversion Rateshttp://bit.ly/S1fHSZhttp://bit.ly/WajJbBhttp://bit.ly/S3UoAjhttp://bit.ly/RIQMDMLOVE2DEV.COM

WalmartOn initial measurement, an item page took about 24 seconds to load for the slowest 5% of users.

LOVE2DEV.COM

24 sec

http://mobile.httparchive.org/viewsite.php?pageid=515720Walmart Too Many Page Elements LOVE2DEV.COM

WalmartSlow third-party scriptsLOVE2DEV.COM

Walmart Multiple HostsLOVE2DEV.COMAlmost 50% of page content is served by partners, ads, affiliates, and Marketplace

42 / 87 total requests

http://bit.ly/WajJbB

Googles SecondLOVE2DEV.COM

Half 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

Performance Fast Facts57% Will Abandon a Slow Site After 3 SecondsWe Have to Concentrate 50% Harder for Slow Sites78% Have Felt Stress or Anger With Slow Sites44% Say Slow Sites Make Them Anxious4% Have Thrown Their Phone

LOVE2DEV.COMhttp://bit.ly/SuBLDR

Web Sites Are Fatter and Out of ShapeLOVE2DEV.COMhttp://httpArchive.org as of 3/1/2016100 File Requests 2.2+MB22 JavaScript Files - 368KB7.7 CSS Files 77KB54 Images 1.4MB40 TCP Connections17 Domains49% Cacheable

Update these #s before the presentation as they are always updating16

Web Sites Are Getting LargerLOVE2DEV.COM

Update chart from latest httpArchive stats17

Average Web Page ~2.5 mBLOVE2DEV.COM

In 1990s, my Masters 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.

Update chart from latest httpArchive stats18

http://bit.ly/1zXjWqBLOVE2DEV.COM

That's Great But I Work in the EnterpriseLOVE2DEV.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 RatesDue to Increase Cognitive LoadYou Are Going MobileAnd You Already Have, Even If You and Your Boss Does Not Acknowledge It

LOVE2DEV.COM

http://bit.ly/16zFCXLLOVE2DEV.COM

Good Code Is CheaperPerformance Best Practices Lead To:Well Structured CodeSmaller CodeEasier MaintenanceFewer BugsEncourages Development Best PracticesEncourages Discipline

LOVE2DEV.COM

OK, How Do I Fix Things?LOVE2DEV.COM

MeasureLoad TimePage Speed IndexRenderingRun-Time PerformanceLOVE2DEV.COM

Set A Performance BudgetThis 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 Kadlechttp://bit.ly/1CUAfGxLOVE2DEV.COM

Set A Performance BudgetTypical Load TimeShoot for < 2 Seconds Over Broadband

My Standard< 1 SecondLOVE2DEV.COM

Set A Performance Budget Page WeightWhat Does My Web Site Cost? - http://whatdoesmysitecost.com/LOVE2DEV.COM

webpagetest.orgOnline ToolIdentifies Common Performance IssuesMust be Public URLLOVE2DEV.COMhttp://bit.ly/1dibffr

http://bit.ly/1dibffr

LOVE2DEV.COM

webpagetest.org film strip viewLOVE2DEV.COM

YSlow RulesLOVE2DEV.COMMinimize HTTP RequestsUse a Content Delivery NetworkAvoid empty src or hrefAdd an Expires or a Cache-Control HeaderGzip ComponentsPut StyleSheets at the TopPut Scripts at the BottomAvoid CSS ExpressionsMake JavaScript and CSS ExternalReduce DNS LookupsMinify JavaScript and CSSAvoid RedirectsRemove Duplicate ScriptsConfigure ETagsMake AJAX CacheableUse GET for AJAX RequestsReduce the Number of DOM ElementsNo 404sReduce Cookie SizeUse Cookie-Free Domains for ComponentsAvoid FiltersDo Not Scale Images in HTMLMake favicon.ico Small and Cacheable

http://yhoo.it/W7BFIw

Critical Rendering PathLOVE2DEV.COM

1. Add A Fav Icon Eliminate 404sMost of your scaling problems wont be glamorous

Mike Kriegerhttp://bit.ly/QeKZsOLOVE2DEV.COM

Make FavIcon Small and CacheableDont Return 404YSlow Rule #18Make Sure Its CompatiblePNG/ICOIt Carries Cookie Weight

Instagram Lesson #1http://bit.ly/RUXEiL

LOVE2DEV.COM

2. Use a CDNGlobally Distributes Resources Closer to ClientWas ExpensiveAmazon CloudFront & Azure cost pennies a monthLOVE2DEV.COM

3. Far Future Expires HeaderLets the Browser Cache Resources LocallyEliminates Future Http RequestsThe Fastest Http Request is the one not madeOnly Updates Resource if Changed on ServerLOVE2DEV.COM

4. Use LocalStorage For Storage & CachingLOVE2DEV.COMAllows You to Keep Data Locally in a Hash TablelocalStoragesessionStorageApproximately 5-10MBReplace CookiesGreat For CachingUse IndexDB for Larger Data Sets

AJAX CachingChecks localStorage Before Making AJAX CallStores Data in localStorage with Expiration ValueRadically Reduces Http RequestsRadically Improves PerformanceThe Fastest AJAX Request is the One That is Never Made.LOVE2DEV.COM

5. No More Cookies

LOVE2DEV.COMCookies Add WeightPlace Resources (img/css/js) on Cookie-less DomainsCDNs Are Great For No CookiesConsider Local Storage Instead

SWA & CookiesLOVE2DEV.COM

Impact of Cookies on Response Time

LOVE2DEV.COM

Is 78ms A Big Deal???Remember 100 Files100 * 78ms = 7800ms or 7.8 Seconds1300ms when considering 6 parallel connectionsDoes Cause DelayParallel Downloads Help Overall Time

Dont Use 100 Files, DuhLOVE2DEV.COM

6. Optimize ImagesImages are Too LargePNGCrush, Kraken.ioImage SpritesGlyph FontsData URIsCSS RulesLOVE2DEV.COM

CSS SpritesConsider Gyph/Icon FontCSS Gradients, Border Radius, ShadowsTextThis is a 30KB Image Possible Change to 0KB*

LOVE2DEV.COM

7. Bundle & Minify CSS & JavaScriptEliminate Excess HTTP RequestsReduces Data FootprintThis is a Release or Production VersionShoot for a Single JS and a Single CSS file in Production* Consider Inlining CSSLOVE2DEV.COM

7a. Inline Critical CSS & Remove Unused CSSInlining Critical CSS Enables Instant Rendering ExperienceRemove Unused CSSUNCSS ModuleIdentify Critical CSSExample: Most Bootstrap Sites Use