什么是网页的性能?为什么网页性能比较重要?中间有哪些挑战和解决方案?本文从前端工程师的角度,列举了一些架构设计案例,介绍如何提高网站访问性能。比如:合理用力压缩技术,减小http请求数,cdn,延迟等等。

献良发布于2018/10/05 14:11

注脚

1.Intro to Web Performance Ten Ways to a Faster Website Presented by: Sheila Eaton and Mohammad Durrani TechKnowFile, University of Toronto, May 5, 2016

2.Welcome! What is Web Performance? Why is it Important? Challenges and Solutions Questions and Further Reading Agenda

3.What is Web Performance ? Perceived Performance Optimized progressive rendering. Feels fast. Unoptimized Rendering Feels slow. developers.google.com /web/fundamentals/performance/critical-rendering-path /

4.Web Page Performance www.webpagetest.org /result/ 160504_ET_1A6P /1/details/

5.Why is Performance Important ? Puts users first Allows users to accomplish tasks in less than 2 seconds Respect for users builds trust Encourages return visits Reduce time and data costs for mobile users Accounts for international bandwidth Broaden access Small boost to search

6.Why Performance Matters www.akamai.com /us/en/web-and-mobile- performance.jsp 47% expect a web page to load in two seconds or less . 57% will abandon a page that takes 3 seconds or more to load 79% shoppers [students, faculty, donors ] who have trouble with web site performance say they won’t return to the site to buy again See Also: What does my site cost

7.Performance Challenges CHALLENGE 1: Number of HTTP Requests CHALLENGE 2 : Bigger File Sizes CHALLENGE 3 : Improving Perceived Perf . CHALLENGE 4: Latency

8.httparchive.org / trends.php Total Transfer Size & Total Requests

9.CHALLENGE 1: Number of HTTP Requests

10.40 requests Goal: Reduce number of requests How – some quick wins: Image svg sprites Remove Font Awesome and Google font Set one feature img each for news and events feeds Reduce size of banner Blur banner image and crop Reduce CSS* *For new USMC website (in progress) CSS is reduced by 36%

11.Why Reduce Requests A resource is requested Time is spent sending the request to the server and waiting for the server to respond Then downloading the response to add to webpage The less time it takes -- the better CHALLENGE 1: Number of HTTP Requests

12.Five Ways to Cope with Requests Resource Audit Image Sprites JS/CSS Concat Keep Alive Cache Static Files CHALLENGE 1 : Number of HTTP Requests

13.The fastest and best optimized resource is a resource not sent Ilya Grigorik , Google CHALLENGE 1: Number of HTTP Requests > Reducing Requests

14.Resource Audit Question everything: css/js/images/fonts/3rd-party CHALLENGE 1: Number of HTTP Requests > Reducing Requests Resource necessary? Value to user? More performant approach? Blocking page load? Place lower in markup? How is value tracked ?

15.Fonts P erformance costs of fonts? Aesthetic tradeoffs? CHALLENGE 1: Number of HTTP Requests > Reducing Requests Google Sans and Merriweather Bold, normal, italic Performance Hit 194 Arial and Times New Roman All weights No Performance Hit

16.Image Sprites Size of file is bigger but fewer http requests CHALLENGE 1: Number of HTTP Requests > Reducing Requests

17.CHALLENGE 1: Number of HTTP Requests > Reducing Requests JS/CSS Concat What is concat ? Combining like files to reduce the number of HTTP requests

18.CHALLENGE 1: Number of HTTP Requests > Reducing Requests JS/CSS Concat File1.js { //content file 1 } FileAll.js { //content file 1 //content file 2 //content file 3 } File2.js { // content file 2 } File3.js { // content file 3 }

19.CHALLENGE 1: Number of HTTP Requests > Reducing Requests Keep Alive http:// stackoverflow.com /questions/12550973/http-header-keep-alive-misunderstanding

20.CHALLENGE 1: Number of HTTP Requests > Reducing Requests Caching Static Files Assets don’t change often (css, images, js) Reduce number of requests by storing assets on client’s machine for a defined period of time Not spending time fetching resources Will only affect subsequent visits Test with webpagetest.org

21.CHALLENGE 2: Bigger File Sizes

22.Why Reduce Size of Resources Smaller the resource = the faster it will load Get files to the browser as fast as possible so it can start building the page CHALLENGE 2: Bigger File Sizes

23.Three Ways to Reduce File Sizes Images Right Size Right Format Compression Minification Gzip CHALLENGE 2: Bigger File Sizes

24.Image Compression Images count for just over 63% of page weight CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Images

25.Choosing the right file format CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Images

26.Serving the right size CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Images Don’t serve a 500x500 image intended as a 150x150 thumbnail

27.Image Compression Caveat: Strips meta data CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Images Lossless compression allows original image to be perfectly reconstructed from compressed data. Lossy compression reconstructs an approximation of original data

28.Image Compression CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Images 69% savings (right) in compressed png. No perceptual difference in quality . tinypng.com /

29.Image Compression CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Images Tools Popular web tools Plugins for wp / drupal Task runners

30.Minification HTML/CSS/JS Dev Code Human readability, comments, whitespace Minified Code Remove extra characters, comments, whitespace CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Minification

31.Minified: 150 characters. Reduced by 63% Source: Google Dev Development: 406 Characters

32.Minification HTML/CSS/JS Context Matters HTML <pre> tags Combining CSS rules CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Minification

33.Minification HTML/CSS/JS Tools Web based Task runner Plugins for CMS CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Minification

34.GZIP Can be applied to any type of data Performs best on text-based assets: css, js, html Compression rates 70-90 % for larger files. Little to no benefit for images Modern browsers support GZIP compression CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > GZIP

35.GZIP Implementation depends on server configuration. Ask your host Apache can be done via . htaccess CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > GZIP

36.GZIP CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > GZIP Library Size Compressed size Compression ratio jquery-1.11.0.js  276 KB     82 KB   70% jquery-1.11.0.min.js  94 KB  33 KB  65% angular-1.2.15.js  729 KB  182 KB  75% angular-1.2.15.min.js  101 KB  37 KB   63% bootstrap-3.1.1.css   118 KB      18 KB   85% bootstrap-3.1.1.min.css   98 KB  17 KB   83% foundation-5.css  186 KB  22 KB  88% foundation-5.min.css   146 KB  18 KB   88%

37.Reducing Page Weight Notes We talked about image and text compression Do an audit of the different content types you serve your clients and consider what kinds of content-specific optimizations you can apply PDFs, Audio, Video can be compressed too! CHALLENGE 2: Bigger File Sizes > Reducing File Sizes

38.CHALLENGE 3: Improving Perceived Performance

39.How we load resources matters just as much as how many resources we’re loading . ​ Scott Jehl , Filament Group CHALLENGE 3: Improving Perceived Performance

40.What is it? Techniques used so far improve total load time Perceived performance is more important to user experience “Critical” content loaded first CHALLENGE 3: Improving Perceived Performance

41.What is critical? Above the fold CHALLENGE 3: Improving Perceived Performance https:// www.filamentgroup.com /lab/weight- wait.html

42.Two Ways to Improve Perceived Performance Deferring non-critical JS/CSS Identifying critical css – automated tools Identifying critical js – done manually Lazy Loading below the fold images CHALLENGE 3: Improving Perceived Performance

43.Two Ways to Improve Perceived Performance Deferring non-critical JS/CSS Identifying critical css – automated tools Identifying critical js – done manually Lazy Loading below the fold images CHALLENGE 3: Improving Perceived Performance

44.CHALLENGE 4: Latency

45.What is it? CHALLENGE 4: Latency https:// www.keycdn.com /support/what-is-latency/

46.CDN CHALLENGE 4: Latency https:// gtmetrix.com /why-use-a- cdn.html

47.How does a CDN work? CHALLENGE 4: Latency https:// gtmetrix.com /why-use-a- cdn.html

48.Summary Reducing Number of HTTP Requests Resource Audit Image Sprites JS/CSS Concat Keep Alive Cache static files Managing Bigger File Sizes Image Compression Minification GZIP Improving Perceived Perf Defer non-critical Lazy Loading Latency CDN

49.Improve. Test. Repeat.

50.Further Reading Page Speed and Dev Tools tools.pingdom.com / fpt / developers.google.com /speed/ pagespeed /insights / www.webpagetest.org / www.browserstack.com Additional Reference developers.google.com /web/ fundamentals/performance/ gtmetrix.com /why-use-a- cdn.html varvy.com / pagespeed / www.filamentgroup.com /lab/ performance- rwd.html www.filamentgroup.com /lab/load-css-and- js.html www.youtube.com /watch? v= whGwm0Lky2s Builtwith.com What Your Site Costs Users timkadlec.com /2015/03/ what-your-site-costs/ whatdoesmysitecost.com / Sprites / Image Compression Grumpicon / Grunticon Spritecow tinypng.com Performance Budgets Tim Kadlec tinyurl.com / hqywuk5 Etsy codeascraft.com / Smashing Mag tinyurl.com / haghreg HTML5 Rocks www.html5rocks.com /en/ features/performance Brad Frost Perf Budget Builder bradfrost.com /blog/post/performance-budget-builder/

51.Thank You! Questions?

user picture
  • 献良
  • 非著名互联网公司工程师

相关Slides