跳转到主要内容

章节web.dev 学习文章

Fast

82 页更新于 11 小时前

开始阅读

本章内容82

  1. 01 index layout: collection override:tags: [] date: 2018-11-05 pathName: fast 11 小时前
  2. 02 Adaptive serving based on network quality Loading a website can be a very different experience depending on the network conditions. Everything is usu... 11 小时前
  3. 03 Apply instant loading with the PRPL pattern PRPL is an acronym that describes a pattern used to make web pages load and become interactive, faster: Pre... 11 小时前
  4. 04 Avoid invisible text during font loading Fonts are often large files that take awhile to load. To deal with this, some browsers hide text until the ... 11 小时前
  5. 05 Browser-level image lazy loading for the web Browser-level support for lazy loading images is now supported on the web! This video shows a demo of the f... 11 小时前
  6. 06 Choose the right image format The very first question you should ask yourself is whether an image is, in fact, required to achieve the ef... 11 小时前
  7. 07 Using the Chrome UX Report to look at performance in the field The Chrome UX Report (informally known as CrUX) is a public dataset of real user experience data on million... 11 小时前
  8. 08 Adapt video to image serving based on network quality {% include 'content/devtools-headsup.njk' %} In this codelab, you'll learn how to adapt your content based ... 11 小时前
  9. 09 Art direction {% Instruction 'preview' %} Reload the app using different browser sizes. Notice how different the images a... 11 小时前
  10. 10 Avoid flash of invisible text This code lab shows you how to display text immediately using Font Face Observer. Add Font Face Observer Fo... 11 小时前
  11. 11 Reduce JavaScript payloads with code splitting {% include 'content/devtools-headsup.njk' %} Most web pages and applications are made up of many different ... 11 小时前
  12. 12 Use density descriptors {% Instruction 'preview' %} Reload the page using different devices to see the browser load different image... 11 小时前
  13. 13 Extract and inline critical CSS with Critical {% include 'content/devtools-headsup.njk' %} Whether you use a UI library or handcraft your styles, shippin... 11 小时前
  14. 14 Using Imagemin with Grunt This Glitch already contains grunt, grunt-cli, and the grunt-contrib-imagemin plugin. To add the configu... 11 小时前
  15. 15 Using Imagemin with Gulp This Glitch already contains gulp, gulp-cli, and the gulp-imagemin plugin. To add the configuration for ... 11 小时前
  16. 16 Using Imagemin with webpack This Glitch already contains webpack, webpack-cli, and imagemin-webpack-plugin. To add the configuration ... 11 小时前
  17. 17 Optimize third-party JavaScript {% include 'content/devtools-headsup.njk' %} Third-party scripts impact performance, which is why it's impo... 11 小时前
  18. 18 Codelab: Preload critical assets to improve loading speed {% include 'content/devtools-headsup.njk' %} In this codelab, the performance of the following web page is ... 11 小时前
  19. 19 Preload web fonts to improve loading speed {% include 'content/devtools-headsup.njk' %} This codelab shows you how to preload web fonts using rel="pr... 11 小时前
  20. 20 Remove unused code {% include 'content/devtools-headsup.njk' %} In this codelab, improve the performance of the following appl... 11 小时前
  21. 21 Replace GIFs with video {% include 'content/devtools-headsup.njk' %} In this codelab, improve performance by replacing an animated ... 11 小时前
  22. 22 Serve images with correct dimensions This Glitch is small enough that its images could be inspected by hand. However for most websites, using a ... 11 小时前
  23. 23 Creating WebP Images with the Command Line The webp command line tool has already been installed for you, so you're all set to get started. This tool ... 11 小时前
  24. 24 Serve modern code to modern browsers for faster page loads {% include 'content/devtools-headsup.njk' %} In this codelab, improve the performance of this simple applic... 11 小时前
  25. 25 Setting performance budgets with webpack Webpack combines all your imported files and packages them into one or more output files known as bundles. ... 11 小时前
  26. 26 Specifying multiple slot widths {% Instruction 'preview' %} Reload the app in differently sized browser windows to see the browser load dif... 11 小时前
  27. 27 Minify and compress network payloads with gzip {% include 'content/devtools-headsup.njk' %} This codelab explores how both minifying and compressing the J... 11 小时前
  28. 28 Minify and compress network payloads with brotli {% include 'content/devtools-headsup.njk' %} This codelab is an extension of the Minify and compress networ... 11 小时前
  29. 29 Two ways to prefetch: `<link>` tags and HTTP headers {% include 'content/devtools-headsup.njk' %} In this codelab, you'll implement prefetching in two ways: wit... 11 小时前
  30. 30 Lazy load offscreen images with lazysizes Lazy loading is the approach of waiting to load resources until they are needed, rather than loading them i... 11 小时前
  31. 31 Choose the correct level of compression Images often account for most of the downloaded bytes on a web page and also often occupy a significant amo... 11 小时前
  32. 32 Content delivery networks (CDNs) Content delivery networks (CDNs) improve site performance by using a distributed network of servers to deli... 11 小时前
  33. 33 Best practices for cookie notices This article discusses how cookie notices can affect performance, performance measurement, and user experie... 11 小时前
  34. 34 Debug layout shifts The first part of this article discusses tooling for debugging layout shifts, while the second part discuss... 11 小时前
  35. 35 Defer non-critical CSS CSS files are render-blocking resources: they must be loaded and processed before the browser renders the p... 11 小时前
  36. 36 Efficiently load third-party JavaScript If a third-party script is slowing down your page load, you have two options to improve performance: Remove... 11 小时前
  37. 37 Extract critical CSS The browser must download and parse CSS files before it can show the page, which makes CSS a render-blockin... 11 小时前
  38. 38 Optimizing resource loading with the Fetch Priority API {% BrowserCompat 'api.HTMLImageElement.fetchPriority' %} {% Aside %} This feature was originally called Pri... 11 小时前
  39. 39 Fixing website speed cross-functionally One common myth connected to site speed is that it's only the development team's responsibility. The realit... 11 小时前
  40. 40 Best practices for fonts This article discusses performance best practices for fonts. There are a variety of ways in which web fonts... 11 小时前
  41. 41 How can performance improve conversion? In our other e-commerce guides you have learned about what you should measure to improve performance, and h... 11 小时前
  42. 42 How to measure speed? Real-world performance is highly variable due to differences in users' devices, network connections, and ot... 11 小时前
  43. 43 How to report metrics and build a performance culture Website performance is a key goal towards e-commerce conversions, so it must be a core priority for busines... 11 小时前
  44. 44 How to stay fast? Brands that optimize speed will often find they regress quickly. This is because website performance is a l... 11 小时前
  45. 45 Identify slow third-party JavaScript As a developer, you often don't have control over which third-party scripts your site loads. Before you can... 11 小时前
  46. 46 Use image CDNs to optimize images Image content delivery networks (CDNs) are excellent at optimizing images. Switching to an image CDN can yi... 11 小时前
  47. 47 Incorporate performance budgets into your build process Once you've defined a performance budget, it's time to set up the build process to keep track of it. There ... 11 小时前
  48. 48 Use lazy loading to improve loading speed The portion of images and video in the typical payload of a website can be significant. Unfortunately, proj... 11 小时前
  49. 49 Lazy loading best practices While lazy loading images and video have positive and measurable performance benefits, it's not a task to b... 11 小时前
  50. 50 Lazy loading images Images can appear on a webpage due to being inline in the HTML as <img> elements or as CSS background imag... 11 小时前
  51. 51 Lazy loading video As with image elements, you can also lazy-load video. Videos are commonly loaded with the <video> element ... 11 小时前
  52. 52 Minify CSS CSS files can contain unnecessary characters, such as comments, whitespaces, and indentation. In production... 11 小时前
  53. 53 Assessing loading performance in the field with Navigation Timing and Resource Timing If you've used connection throttling in the network panel in a browser's developer tools (or Lighthouse in ... 11 小时前
  54. 54 Optimize CSS background images with media queries Many sites request heavy resources, like images, that are not optimized for certain screens, and send large... 11 小时前
  55. 55 Optimize WebFont loading and rendering A "full" WebFont that includes all stylistic variants, which you may not need, plus all the glyphs, which m... 11 小时前
  56. 56 Performance budgets 101 Performance is an important part of the user experience and it affects business metrics. It's tempting to t... 11 小时前
  57. 57 Preload critical assets to improve loading speed When you open a web page, the browser requests the HTML document from a server, parses its contents, and su... 11 小时前
  58. 58 Prioritize resources Not every byte that is sent down the wire to the browser has the same degree of importance, and the browser... 11 小时前
  59. 59 Publish, ship, and install modern JavaScript for faster applications Over 90% of browsers are capable of running modern JavaScript, but the prevalence of legacy JavaScript rema... 11 小时前
  60. 60 Measure performance with the RAIL model RAIL is a user-centric performance model that provides a structure for thinking about performance. The mode... 11 小时前
  61. 61 Reduce JavaScript payloads with code splitting Nobody likes waiting. Over 50% of users abandon a website if it takes longer than 3 seconds to load. Sendin... 11 小时前
  62. 62 Reduce JavaScript payloads with tree shaking Today's web applications can get pretty big, especially the JavaScript part of them. As of mid-2018, HTTP A... 11 小时前
  63. 63 Minify and compress network payloads There are two useful techniques that can be used to improve the performance of your web page: Minification ... 11 小时前
  64. 64 Reduce web font size Typography is fundamental to good design, branding, readability, and accessibility. Web fonts enable all of... 11 小时前
  65. 65 Remove unused code Registries like npm have transformed the JavaScript world for the better by allowing anyone to easily downl... 11 小时前
  66. 66 Replace animated GIFs with video for faster page loads Have you ever seen an animated GIF on a service like Imgur or Gfycat, inspected it in your dev tools, only ... 11 小时前
  67. 67 Use WebP images WebP images are smaller than their JPEG and PNG counterparts—usually on the magnitude of a 25–35% reduction... 11 小时前
  68. 68 Serve images with correct dimensions We've all been there: you forgot to scale down an image before adding it to the page. The image looks fine,... 11 小时前
  69. 69 Serve modern code to modern browsers for faster page loads Building websites that work well on all major browsers is a core tenet of an open web ecosystem. However, t... 11 小时前
  70. 70 Serve responsive images Serving desktop-sized images to mobile devices can use 2–4x more data than needed. Instead of a "one-size-f... 11 小时前
  71. 71 Signed Exchanges (SXGs) Signed exchanges (SXG) are a delivery mechanism that makes it possible to authenticate the origin of a reso... 11 小时前
  72. 72 How to set up Signed Exchanges using Web Packager A signed exchange (SXG) is a delivery mechanism that makes it possible to authenticate the origin of a reso... 11 小时前
  73. 73 Third-party JavaScript performance Third-party JavaScript generally refers to scripts embedded in your website that are: Not authored by you S... 11 小时前
  74. 74 Use Imagemin to compress images Uncompressed images bloat your pages with unnecessary bytes. Because images can be candidates for Largest C... 11 小时前
  75. 75 Use Lighthouse for performance budgets Lighthouse now supports performance budgets. This feature, known as LightWallet, can be set up in under fiv... 11 小时前
  76. 76 Using bundlesize with Travis CI Using bundlesize with Travis CI lets you define performance budgets with minimal setup and enforce them as ... 11 小时前
  77. 77 Using Lighthouse Bot to set a performance budget You've done hard work to get fast, now make sure you stay fast by automating performance testing with Light... 11 小时前
  78. 78 The value of speed After a lot of hard work, you've done it. You've made your company's site noticeably faster. Now it's time ... 11 小时前
  79. 79 What is speed? So, speed matters, but what exactly do we mean by it? What does it mean to have a fast site? It's common to... 11 小时前
  80. 80 What should you measure to improve performance? The different steps of a purchase funnel are prone to performance issues in different ways, and therefore n... 11 小时前
  81. 81 Why does speed matter? Consumers increasingly rely on mobile to access digital content and services, and if you look at your site ... 11 小时前
  82. 82 Your first performance budget When you set a personal, business or family budget, you are setting a limit to your spending and making sur... 11 小时前