」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 提升 Web 效能:前端開發人員指南

提升 Web 效能:前端開發人員指南

發佈於2024-11-08
瀏覽:634

Boosting Web Performance: A Guide for Frontend Developers

大家好!自从我上次写博客以来已经有一段时间了,我承认,这让我有点难过。现实是,有太多东西需要学习,有时感觉永远没有足够的时间来深入了解所有内容。我在跟谁开玩笑呢?事实是,我最近拖延得很厉害。

但最近,我一直在探索网络性能——这对于任何前端开发人员来说都是一个至关重要的话题——我很高兴分享我所学到的东西。 性能优化是其中之一,如果做得正确,可以使用户体验您的网站或网络应用程序的方式发生巨大变化。它不仅可以改善用户体验,还可以提高搜索引擎优化,甚至可以影响转化率。

那么,让我们开始吧!

为什么 Web 性能很重要

在当今快节奏的世界中,用户期望网站能够快速加载并顺利交互。如果您的网站速度很慢,用户就会离开——就这么简单。研究表明,即使是几秒钟的延迟也会导致更高的跳出率和更低的参与度。作为前端开发人员,我们有责任确保我们的应用程序不仅看起来不错,而且在各种条件下都表现良好。

在衡量性能方面,Google 通常被认为是黄金标准。 Google 提供了一组称为 Core Web Vitals 的关键指标,可帮助开发人员跟踪和提高其网站的性能。让我们来分解一下:

按照大人的说法Google这些事情对性能很重要

  • FCP(首次内容绘制)
  • LCP(最大内容涂料)
  • CLS(累积布局偏移)
  • TTI(交互时间)
  • INP(与下一个绘画的交互)

让我们更仔细地探索它们

FCP(首次内容绘制)

测量内容: FCP 测量用户导航到您的页面后第一个内容(文本、图像等)出现在屏幕上所需的时间。这是一个关键指标,因为它向用户提供页面正在加载的反馈。 FCP越快,用户体验越好。

如何改进 FCP:

最小化渲染阻塞资源:减少或消除阻塞页面渲染的资源,例如同步 JavaScript 或 CSS。对关键资源使用

延迟非关键 JavaScript: 对非必要脚本使用 deferasync 属性,以确保它们不会阻止初始绘制。

*使用服务器端渲染 (SSR):* SSR 有助于更快地交付初始 HTML,特别是对于动态内容,以便用户可以更快地看到有意义的内容。

优化CSS交付:最小化CSS和内联关键CSS的大小,以便浏览器可以更快地渲染内容。

使用内容交付网络 (CDN): 从 CDN 提供静态资产以减少延迟并加快资源交付。

LCP(最大内容涂料)

测量内容: LCP 重点关注最大元素(通常是英雄图像、大文本块或视频)在视口中完全渲染所需的时间。这是感知加载速度的一个很好的指标,因为一旦加载了最大的内容,用户就会认为页面已准备好。旨在将 LCP 保持在 2.5 秒以下 以获得快速体验。

如何改进 LCP:

优化和压缩图像:使用WebP等现代图像格式,压缩图像,并确保使用srcset和sizes属性提供正确的图像尺寸。

延迟加载首屏图像:对不能立即可见的图像实施延迟加载,以优先加载首屏内容。

预加载重要资源:使用标签更快地加载重要资源,如字体、英雄图像或大型媒体文件。

最小化阻碍渲染的 CSS: 就像使用 FCP 一样,尽量减少使用可能阻碍渲染的大型 CSS 文件。

减少第三方脚本:第三方广告、分析或其他脚本可能会减慢 LCP 的速度。推迟或异步加载非必要的脚本。

CLS(累积布局偏移)

测量内容: CLS 测量页面的视觉稳定性。您是否曾经在阅读某些内容时,突然布局发生变化,导致您迷失了位置或点击了错误的按钮?这是一个糟糕的 CLS 分数。 CLS 跟踪加载过程中页面上有多少元素发生意外移动。低 CLS 对于流畅的用户体验至关重要,尤其是在移动设备上。

如何改进 CLS:

设置图像和视频的尺寸:始终在图像上包含宽度和高度属性,或使用 CSS 宽高比框在加载媒体元素之前为其保留空间。

避免在现有内容之上插入内容:除非绝对必要(例如广告),否则避免在现有内容之上动态添加内容。

使用字体加载策略:加载自定义字体时,使用font-display: swap;以避免字体加载引起的布局变化。

避免在没有空间的情况下注入新广告或弹出窗口:确保在布局空间中考虑动态加载的广告、横幅或弹出窗口,以避免意外的变化。

使用与图像相同空间的图像占位符或加载器

TTI(交互时间)

测量内容: TTI 测量页面完全交互所需的时间。这意味着所有按钮、输入和链接都可用,并且主线程可以自由响应用户输入。快速的 TTI 可确保用户可以快速与您的内容互动,而不会感觉网站缓慢或无响应。

如何提高 TTI:

减少 JavaScript 执行时间: 分解大型 JavaScript 包并仅加载第一次交互所需的必要脚本。在 React 中使用代码拆分(使用 React.lazy())或在 JavaScript 中使用动态导入。
使用 Web Workers: 将繁重的非 UI 阻塞任务卸载给 Web Workers,以保持主线程响应。
延迟长任务: 将长 JavaScript 任务拆分为较小的任务,以避免阻塞主线程太长时间。
预加载关键资源: 确保预加载交互所需的基本资源(脚本、样式),以避免 TTI 延迟。
优化 CSS 和 JavaScript: 缩小、压缩基本代码并确定其优先级。使用树摇动来消除死代码并确保更快的脚本执行。使用GZIP或BROTLI压缩机制

INP(与下一个绘画的交互)

测量内容: INP 是一个相对较新的指标,它跟踪页面响应用户交互(如单击按钮、滚动或键入)并相应更新 UI 所需的时间。它有助于衡量初始负载之外的整体交互性,确保您的应用程序在整个用户会话期间保持敏捷。

如何提高INP:

减少输入延迟: 通过避免阻塞主线程的长 JavaScript 任务,确保快速处理用户输入(点击、按键)。

优先考虑输入响应性:使用 requestAnimationFrame 或 requestIdleCallback 在空闲时间处理非紧急工作,让主线程保持开放状态以进行交互处理。

使用去抖动和限制:处理频繁的用户交互(如滚动或打字)时,对事件处理程序进行去抖动或限制以防止 UI 变得无响应。

延迟加载非关键代码: 将非关键功能的加载推迟到初始交互之后。
例如,您可以使用 React.lazy() 和 Suspense 在 React 中延迟加载组件。

通过遵循这些策略,您可以显着改进这些关键指标并提供更快、响应更灵敏的用户体验。这些优化(尤其是一起应用时)有助于确保您的网站不仅通过 Google 的 Core Web Vitals 测试,而且为您的用户提供卓越的体验

我希望您发现此博客有用,并且您能够从中获得一些关键见解,以帮助您制定下一个绩效改进策略。

有关性能、网络安全、React、Angular、Vue 的更多精彩博客请继续关注我

版本聲明 本文轉載於:https://dev.to/__junaidshah/boosting-web-performance-a-guide-for-frontend-developers-fhk?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • Go web應用何時關閉數據庫連接?
    Go web應用何時關閉數據庫連接?
    在GO Web Applications中管理數據庫連接很少,考慮以下簡化的web應用程序代碼:出現的問題:何時應在DB連接上調用Close()方法? ,該特定方案將自動關閉程序時,該程序將在EXITS EXITS EXITS出現時自動關閉。但是,其他考慮因素可能保證手動處理。 選項1:隱式關閉終...
    程式設計 發佈於2025-07-03
  • 如何干淨地刪除匿名JavaScript事件處理程序?
    如何干淨地刪除匿名JavaScript事件處理程序?
    刪除匿名事件偵聽器將匿名事件偵聽器添加到元素中會提供靈活性和簡單性,但是當要刪除它們時,可以構成挑戰,而無需替換元素本身就可以替換一個問題。 element? element.addeventlistener(event,function(){/在這里工作/},false); 要解決此問題,請考...
    程式設計 發佈於2025-07-03
  • 如何從PHP中的數組中提取隨機元素?
    如何從PHP中的數組中提取隨機元素?
    從陣列中的隨機選擇,可以輕鬆從數組中獲取隨機項目。考慮以下數組:; 從此數組中檢索一個隨機項目,利用array_rand( array_rand()函數從數組返回一個隨機鍵。通過將$項目數組索引使用此鍵,我們可以從數組中訪問一個隨機元素。這種方法為選擇隨機項目提供了一種直接且可靠的方法。
    程式設計 發佈於2025-07-03
  • Java字符串非空且非null的有效檢查方法
    Java字符串非空且非null的有效檢查方法
    檢查字符串是否不是null而不是空的 if(str!= null && str.isementy())二手: if(str!= null && str.length()== 0) option 3:trim()。 isement(Isement() trim whitespace whites...
    程式設計 發佈於2025-07-03
  • HTML格式標籤
    HTML格式標籤
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    程式設計 發佈於2025-07-03
  • 為什麼在我的Linux服務器上安裝Archive_Zip後,我找不到“ class \” class \'ziparchive \'錯誤?
    為什麼在我的Linux服務器上安裝Archive_Zip後,我找不到“ class \” class \'ziparchive \'錯誤?
    Class 'ZipArchive' Not Found Error While Installing Archive_Zip on Linux ServerSymptom:When attempting to run a script that utilizes the ZipAr...
    程式設計 發佈於2025-07-03
  • Android如何向PHP服務器發送POST數據?
    Android如何向PHP服務器發送POST數據?
    在android apache httpclient(已棄用) httpclient httpclient = new defaulthttpclient(); httppost httppost = new httppost(“ http://www.yoursite.com/script.p...
    程式設計 發佈於2025-07-03
  • 如何將多種用戶類型(學生,老師和管理員)重定向到Firebase應用中的各自活動?
    如何將多種用戶類型(學生,老師和管理員)重定向到Firebase應用中的各自活動?
    Red: How to Redirect Multiple User Types to Respective ActivitiesUnderstanding the ProblemIn a Firebase-based voting app with three distinct user type...
    程式設計 發佈於2025-07-03
  • 如何在鼠標單擊時編程選擇DIV中的所有文本?
    如何在鼠標單擊時編程選擇DIV中的所有文本?
    在鼠標上選擇div文本單擊帶有文本內容,用戶如何使用單個鼠標單擊單擊div中的整個文本?這允許用戶輕鬆拖放所選的文本或直接複製它。 在單個鼠標上單擊的div元素中選擇文本,您可以使用以下Javascript函數: function selecttext(canduterid){ if(d...
    程式設計 發佈於2025-07-03
  • 如何在GO編譯器中自定義編譯優化?
    如何在GO編譯器中自定義編譯優化?
    在GO編譯器中自定義編譯優化 GO中的默認編譯過程遵循特定的優化策略。 However, users may need to adjust these optimizations for specific requirements.Optimization Control in Go Compi...
    程式設計 發佈於2025-07-03
  • 為什麼我的CSS背景圖像出現?
    為什麼我的CSS背景圖像出現?
    故障排除:CSS背景圖像未出現 ,您的背景圖像儘管遵循教程說明,但您的背景圖像仍未加載。圖像和样式表位於相同的目錄中,但背景仍然是空白的白色帆布。 而不是不棄用的,您已經使用了CSS樣式: bockent {背景:封閉圖像文件名:背景圖:url(nickcage.jpg); 如果您的html,cs...
    程式設計 發佈於2025-07-03
  • 為什麼我在Silverlight Linq查詢中獲得“無法找到查詢模式的實現”錯誤?
    為什麼我在Silverlight Linq查詢中獲得“無法找到查詢模式的實現”錯誤?
    查詢模式實現缺失:解決“無法找到”錯誤在Silverlight應用程序中,嘗試使用LINQ建立LINQ連接以錯誤而實現的數據庫”,無法找到查詢模式的實現。”當省略LINQ名稱空間或查詢類型缺少IEnumerable 實現時,通常會發生此錯誤。 解決問題來驗證該類型的質量是至關重要的。在此特定實例...
    程式設計 發佈於2025-07-03
  • 如何有效地選擇熊貓數據框中的列?
    如何有效地選擇熊貓數據框中的列?
    在處理數據操作任務時,在Pandas DataFrames 中選擇列時,選擇特定列的必要條件是必要的。在Pandas中,選擇列的各種選項。 選項1:使用列名 如果已知列索引,請使用ILOC函數選擇它們。請注意,python索引基於零。 df1 = df.iloc [:,0:2]#使用索引0和1 ...
    程式設計 發佈於2025-07-03
  • 左連接為何在右表WHERE子句過濾時像內連接?
    左連接為何在右表WHERE子句過濾時像內連接?
    左JOIN CONUNDRUM:WITCHING小時在數據庫Wizard的領域中變成內在的加入很有趣,當將c.foobar條件放置在上面的Where子句中時,據說左聯接似乎會轉換為內部連接。僅當滿足A.Foo和C.Foobar標準時,才會返回結果。 為什麼要變形?關鍵在於其中的子句。當左聯接的右側...
    程式設計 發佈於2025-07-03
  • 將圖片浮動到底部右側並環繞文字的技巧
    將圖片浮動到底部右側並環繞文字的技巧
    在Web設計中圍繞在Web設計中,有時可以將圖像浮動到頁面右下角,從而使文本圍繞它纏繞。這可以在有效地展示圖像的同時創建一個吸引人的視覺效果。 css位置在右下角,使用css float and clear properties: img { 浮點:對; ...
    程式設計 發佈於2025-07-03

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3