Xóa javascript nuxtjs không sử dụng

Trong bài đăng này, tôi sẽ chỉ cho bạn các mối quan tâm chính về hiệu suất web mà tôi gặp phải khi xây dựng trang web của mình và cách kiến ​​trúc Jamstack sẽ giúp chúng tôi giải quyết chúng

Để xây dựng trang web của mình, tôi đã sử dụng các công nghệ như. Nuxt, trình tạo trang tĩnh của tôi, Storyblok, là CMS không đầu của tôi với nhà cung cấp dịch vụ hình ảnh và Netlify để lưu trữ trang web tĩnh đầy đủ của tôi

Tôi đang sử dụng Lighthouse làm công cụ cho chúng tôi thấy tất cả các cơ hội mà chúng tôi có để cải thiện hoặc khắc phục hiệu suất dự án của mình

xử lý tài nguyên

1. Tải trước yêu cầu khóa

Chúng tôi sẽ luôn cân nhắc sử dụng liên kết rel=preload để ưu tiên tìm nạp tài nguyên hiện được yêu cầu sau khi tải trang

Giải pháp (sử dụng tải trước rel) → Tải trước nội dung quan trọng để cải thiện tốc độ tải

Khai báo các liên kết tải trước trong HTML của bạn để hướng dẫn trình duyệt tải xuống các tài nguyên chính càng sớm càng tốt

Những gì tôi sử dụng → Khi tôi sử dụng Nuxt làm trình tạo trang tĩnh của mình, nó đã tận dụng hiệu suất của tôi bằng kỹ thuật này, hãy kiểm tra để tìm hiểu thêm về cách nó hoạt động cho chúng tôi

2. Kết nối trước với nguồn gốc bắt buộc

Cân nhắc thêm các gợi ý tài nguyên kết nối trước hoặc tìm nạp trước dns để thiết lập các kết nối ban đầu với nguồn gốc quan trọng của bên thứ ba

Giải pháp (sử dụng kết nối trước rel) → Thông báo cho trình duyệt về ý định của bạn cũng đơn giản như thêm thẻ kết nối trước liên kết vào trang của bạn

Điều này cho phép trình duyệt biết rằng trang dự định kết nối với example com và truy xuất nội dung từ đó

Nói chung, tốt hơn nên sử dụng link rel="preload" vì đây là một tinh chỉnh hiệu suất toàn diện hơn, nhưng chúng tôi có thể giữ lại link rel="preconnect" cho các trường hợp cạnh như

Liên kết dns-prefetch là một loại khác liên quan đến kết nối. Điều này chỉ xử lý tra cứu DNS, nhưng nó có hỗ trợ trình duyệt rộng hơn, vì vậy nó có thể đóng vai trò là một dự phòng tốt. Bạn sử dụng nó theo cùng một cách

.

Những gì tôi sử dụng → Một ví dụ điển hình về điều này có thể là một liên kết đến phông chữ google, trong trường hợp của tôi, vì tôi có các tệp phông chữ bên trong dự án của mình nên tôi không cần tính đến điều này

Nhưng Nuxt đã tính đến điều này cho bạn và họ đã tạo một mô-đun để cải thiện hiệu suất tải phông chữ của bạn. @nuxtjs/google-phông chữ

3. Tải chậm tài nguyên của bên thứ ba với mặt tiền

Một số nội dung nhúng của bên thứ ba có thể tải chậm. Cân nhắc thay thế chúng bằng mặt tiền cho đến khi chúng được yêu cầu

Giải pháp (mặt tiền của bên thứ ba) → Thay vì thêm phần nhúng của bên thứ ba trực tiếp vào HTML của bạn, hãy tải trang bằng phần tử tĩnh trông tương tự như phần tử được nhúng của bên thứ ba. Mô hình tương tác sẽ trông

• Đang tải. Thêm mặt tiền vào trang (làm bìa của video)
• Khi di chuột qua. Mặt tiền kết nối trước với tài nguyên của bên thứ ba
• Trong một cái nhấp chuột. Mặt tiền tự thay thế bằng sản phẩm của bên thứ ba

Những gì tôi sử dụng → Đối với video Youtube, tôi bắt đầu sử dụng gói lite-youtube-embed, theo lời khuyên của Debbie O'brien và web. nhà phát triển

Sự khác biệt về thời gian tải trang của bạn là rất lớn, chưa kể ban đầu bạn không có nhiều iframe kéo dài thời gian tương tác

4. Giảm tác động của mã bên thứ ba / Giảm thiểu việc sử dụng bên thứ ba

Mã của bên thứ ba có thể ảnh hưởng đáng kể đến hiệu suất tải. Hạn chế số lượng nhà cung cấp bên thứ ba dư thừa và thử tải mã của bên thứ ba sau khi trang của bạn tải xong về cơ bản

Giải pháp () → Nếu ​​tập lệnh của bên thứ ba làm chậm quá trình tải trang của bạn, bạn có một số tùy chọn để cải thiện hiệu suất

• Tải tập lệnh bằng thuộc tính async hoặc defer để tránh chặn phân tích cú pháp tài liệu
• Tự lưu trữ tập lệnh nếu máy chủ bên thứ ba chậm
• Cân nhắc xóa tập lệnh nếu tập lệnh không thêm giá trị rõ ràng cho trang web của bạn
• như link rel=preconnect hoặc link rel=dns-prefetch để thực hiện tra cứu DNS cho các miền lưu trữ tập lệnh của bên thứ ba

Những gì tôi sử dụng → Tôi đang sử dụng Google Analytics, một bên thứ ba, nhưng gói có tên vue-gtag giúp tôi chỉ tải khi có sự đồng ý của người dùng và sau khi hoạt động, gói này sẽ kết nối trước với googletagmanager và tải phân tích không đồng bộ

Vì tôi đang sử dụng nhà cung cấp dịch vụ hình ảnh Storyblok, tôi đã kết nối trước với nó, để nó có thể cải thiện thời gian tải hình ảnh

5. Loại bỏ các tài nguyên chặn hiển thị

Tài nguyên đang chặn màu sơn đầu tiên của trang của bạn. Cân nhắc cung cấp nội tuyến JS/CSS quan trọng và trì hoãn tất cả các kiểu JS/không quan trọng

Bạn có thể giảm kích thước trang của mình bằng cách chỉ gửi mã và kiểu mà bạn cần. Nhấp vào một URL để kiểm tra tệp đó trong bảng Nguồn. Các kiểu trong tệp CSS và mã trong tệp JavaScript được đánh dấu bằng hai màu

• Màu xanh lá cây (quan trọng). Phong cách được yêu cầu cho sơn đầu tiên;
• Màu đỏ (không quan trọng). Các kiểu áp dụng cho nội dung không hiển thị ngay lập tức;

Giải pháp (tài nguyên chặn hiển thị) → Chúng ta hãy tìm hiểu sâu về cách loại bỏ các tập lệnh hoặc biểu định kiểu hiển thị chặn tải trang của chúng ta

• Cách loại bỏ tập lệnh chặn hiển thị

  Khi bạn đã xác định mã quan trọng, hãy di chuyển mã đó từ URL chặn hiển thị sang thẻ tập lệnh nội tuyến trong trang HTML của bạn

  Nếu có mã trong URL chặn hiển thị không quan trọng, bạn có thể giữ mã đó trong URL rồi đánh dấu URL bằng thuộc tính không đồng bộ hoặc trì hoãn

  Mã không được sử dụng nên được gỡ bỏ

• Cách loại bỏ biểu định kiểu chặn kết xuất

  Các kiểu quan trọng nội tuyến cần thiết cho lần vẽ đầu tiên bên trong một khối kiểu ở đầu trang HTML. Sau đó tải phần còn lại của các kiểu không đồng bộ bằng liên kết tải trước

  Cân nhắc tự động hóa quy trình trích xuất và nội tuyến CSS "Trong màn hình đầu tiên" bằng công cụ Quan trọng

  Những gì tôi sử dụng → Trong Netlify, chúng tôi có một plugin dành cho css quan trọng có tên là netlify-plugin-inline-critical-css

  Một kỹ thuật thú vị khác là chia kiểu thành các tệp khác nhau, được sắp xếp theo truy vấn phương tiện. Sau đó, thêm thuộc tính phương tiện vào mỗi liên kết biểu định kiểu. Khi tải trang, trình duyệt chỉ chặn lần sơn đầu tiên để lấy các biểu định kiểu phù hợp với thiết bị của người dùng

Giữ các tệp CSS/JS nhỏ hơn

1. Thu nhỏ CSS/JavaScript

Thu nhỏ là quá trình loại bỏ khoảng trắng và bất kỳ mã nào không cần thiết để tạo tệp mã nhỏ hơn nhưng hoàn toàn hợp lệ

Giảm thiểu tệp CSS → giảm kích thước tải trọng mạng (đọc thêm về giảm thiểu CSS)

Giải pháp CSS → Thu nhỏ bằng các công cụ như webpack

Giảm thiểu tệp JavaScript → giảm kích thước tải trọng và thời gian phân tích tập lệnh (đọc thêm về giảm thiểu JS)

Giải pháp JS → Uglify-js mới. https. //github. com/terser/terser hoặc tiếp tục sử dụng webpack, Teser đã được bao gồm trong prod. tập tin js

Những gì tôi sử dụng → Nuxt đã được sử dụng trong cấu hình bản dựng của nó, tự đảm nhiệm việc thu nhỏ

2. Xóa CSS/JavaScript không sử dụng

Xóa các quy tắc chết khỏi biểu định kiểu và trì hoãn việc tải CSS không được sử dụng cho nội dung trong màn hình đầu tiên để giảm số byte không cần thiết do hoạt động mạng tiêu thụ

Giải pháp (các quy tắc css không được sử dụng) → Xem xét kỹ thuật CSS Quan trọng/Không Quan trọng theo phần biểu định kiểu chặn hiển thị, nhưng được kết hợp với một công cụ xóa CSS không được sử dụng trong trang của bạn, chẳng hạn như PurgeCSS nổi tiếng

Xóa JavaScript không sử dụng để giảm số byte do hoạt động mạng tiêu thụ. (JS chưa sử dụng)

Giải pháp (thông tin chi tiết và so sánh công cụ) → Hãy xem chúng tôi có thể sử dụng những kỹ thuật nào nếu các khung của chúng tôi không làm điều đó cho chúng tôi

Ghi lại phạm vi mã để bắt đầu phân tích mã không sử dụng trong các tệp cụ thể

Tab bảo hiểm trong Công cụ DEV

• Nhấp vào Bắt đầu bảo hiểm thiết bị và tải lại trang  nếu bạn muốn xem mã nào cần thiết để tải trang
• Nhấp vào Mức độ phù hợp của công cụ  nếu bạn muốn xem mã nào được sử dụng sau khi tương tác với trang

Xây dựng công cụ hỗ trợ xóa mã không sử dụng

Webpack giúp tránh hoặc xóa mã không sử dụng dễ dàng hơn bằng các kỹ thuật sau

• Tách mã - Trích xuất các phụ thuộc chung vào các gói được chia sẻ

  Quá trình chia mã gói thành nhiều gói nhỏ hơn có thể được tải và thực thi độc lập khi cần

  Nuxt quan tâm đến gói web chia mã ứng dụng

• Loại bỏ mã không sử dụng - Loại bỏ mã chết là quá trình loại bỏ mã không được sử dụng bởi ứng dụng hiện tại

  Có một số công cụ có sẵn với phổ biến nhất là Trình biên dịch Terser và Closure. Việc loại bỏ mã chết của Webpack được triển khai bằng cách xóa các bản xuất mô-đun không sử dụng, sau đó dựa vào Terser

• Mã đã nhập không được sử dụng - các trường hợp tối ưu hóa phức tạp trong đó xuất của mô-đun được sử dụng theo cách khó phân tích tĩnh

  Nhập động là một trong những trường hợp này. Webpack không hiểu cú pháp phá hủy đặc biệt để loại bỏ mã chết

  const { transformImage } = await import('./image.utils.js');
  

  Nhưng nó cho phép liệt kê thủ công các bản xuất được sử dụng thông qua nhận xét ma thuật

Những gì tôi sử dụng → Nuxt đã làm điều này cho tôi, nó đang sử dụng webpack ẩn. Nó đang chia mã của tôi theo từng trang, vì vậy tôi có thể quên nhận xét webpackChunkName kỳ diệu này mà bạn cần thêm vào mọi tuyến đường bằng tính năng nhập động

3. Kích hoạt tính năng nén văn bản

Các tài nguyên dựa trên văn bản phải được cung cấp với tính năng nén (gzip, giảm phát hoặc brotli) để giảm thiểu tổng số byte mạng

Giải pháp (sử dụng nén văn bản) → Kích hoạt tính năng nén văn bản trên máy chủ của bạn

Khi một trình duyệt yêu cầu một tài nguyên, nó sẽ sử dụng tiêu đề yêu cầu HTTP Chấp nhận mã hóa để cho biết thuật toán nén mà nó hỗ trợ

Accept-Encoding: gzip, compress, br

Nếu trình duyệt hỗ trợ Brotli (br), bạn nên sử dụng Brotli vì nó có thể giảm kích thước tệp của tài nguyên nhiều hơn các thuật toán nén khác

Những gì tôi sử dụng → Dịch vụ lưu trữ của tôi, Netlify, đã sử dụng tính năng nén Brotli theo mặc định

Nén Brotli đã nhận được sự hỗ trợ rộng rãi của trình duyệt và đặc biệt hiệu quả đối với các tệp dựa trên văn bản như nội dung HTML, JavaScript và CSS

Netlify Edge đã mã hóa và lưu vào bộ đệm các nội dung phù hợp với Brotli và phân phối các nội dung được nén chính xác tùy thuộc vào trình duyệt yêu cầu

So sánh Median Brotli / gzip, theo thử nghiệm của Akamai

• Các tệp JavaScript được nén bằng Brotli nhỏ hơn 14% so với gzip
• Các tệp HTML nhỏ hơn 21% so với gzip
• Tệp CSS nhỏ hơn 17% so với gzip

4. Xóa các mô-đun trùng lặp trong gói JavaScript

Xóa các mô-đun JavaScript lớn, trùng lặp khỏi các gói để giảm số byte không cần thiết do hoạt động mạng tiêu thụ

Giải pháp → Với webpack, bạn có https. //www. npmjs. com/package/webpack-bundle-analyzer để kiểm tra các gói JS và bắt đầu dọn dẹp dự án của bạn

Những gì tôi sử dụng → Trong Nuxt, tôi đã có gói đó, tôi chỉ cần thêm một cờ vào lệnh xây dựng của mình và voilà

Giảm thời gian thực hiện

1. Thời gian thực thi JavaScript

Cân nhắc giảm thời gian phân tích cú pháp, biên dịch và thực thi JS. Bạn có thể thấy việc cung cấp các tải trọng JS nhỏ hơn sẽ giúp ích cho việc này

Giải pháp (thời gian khởi động) → Sự kết hợp giữa tách mã, thu nhỏ và nén, loại bỏ mã không sử dụng và các kỹ thuật lưu vào bộ nhớ đệm sẽ cải thiện đáng kể thời gian thực thi

Những gì tôi sử dụng → Như mọi khi, Nuxt luôn đi trước một bước, trong video này, bạn có thể tận mắt kiểm tra kỹ thuật họ sử dụng. https. //www. youtube. com/watch?v=J6airiY8e84

2. Giảm thiểu công việc luồng chính

Cân nhắc giảm thời gian phân tích cú pháp, biên dịch và thực thi JS. Bạn có thể thấy việc cung cấp các tải trọng JS nhỏ hơn sẽ giúp ích cho việc này

Giải pháp (phân tích công việc của luồng chính) → Cuối cùng, đó là bản tóm tắt của nhiều thứ chúng ta đã thấy trong bài viết này hoặc chúng ta sẽ thấy sau

Tóm lại, ý tưởng là tối ưu hóa cả mã JS và CSS của chúng tôi, giảm thiểu mã và xóa mã không sử dụng, cũng như các thư viện của bên thứ ba mà chúng tôi đang sử dụng. Luôn cung cấp CSS và JS quan trọng cho trang được xem trước và trì hoãn phần còn lại

3. Đánh dấu và đo thời gian của người dùng (một công cụ tuyệt vời, không phải là vấn đề)

Cân nhắc trang bị cho ứng dụng của bạn API thời gian người dùng để đo lường hiệu suất trong thế giới thực của ứng dụng trong các trải nghiệm chính của người dùng. Đọc thêm về thời gian của người dùng

4. Thời gian phản hồi ban đầu của máy chủ ngắn

Giữ thời gian phản hồi của máy chủ cho tài liệu chính ngắn vì tất cả các yêu cầu khác phụ thuộc vào nó

Giải pháp (thời gian đến byte đầu tiên) → Khi chọn hosting bạn phải tính đến điều này, nếu là hosting tĩnh thì mọi thứ đã được cấu hình đúng và CDN sẽ có nhiều lợi thế

Những gì tôi sử dụng → Trong trường hợp của tôi, Netlify cho tôi phản hồi là 33 mili giây. Bạn có thể kiểm tra công cụ kiểm tra tốc độ này để xem kết quả của tôi và kiểm tra với trang web của bạn. testmysite. io/dawntraoz. com

Những rắc rối của DOM

1. Tránh thay đổi bố cục lớn

Các phần tử DOM này đóng góp nhiều nhất cho CLS của trang

Thay đổi bố cục tích lũy (CLS) là chỉ số Các chỉ số quan trọng về trang web được tính bằng cách tính tổng tất cả các thay đổi bố cục không phải do tương tác của người dùng gây ra

Những gì tôi sử dụng → https này. // webvitals. trang web dev/cls cung cấp cho bạn thông tin chi tiết về cách trang web CLS của bạn đang hoạt động

2. Tránh kích thước DOM quá mức

Một DOM lớn sẽ tăng mức sử dụng bộ nhớ, gây ra các tính toán kiểu dài hơn và tạo ra các chỉnh sửa bố cục tốn kém

Giải pháp (kích thước dom) → Nói chung, chỉ tìm cách tạo các nút DOM khi cần và hủy các nút khi chúng không còn cần thiết

Chúng ta có thể sử dụng các thành phần lazy loading trong Nuxt

Nhưng cũng giữ cho HTML của bạn nhỏ hơn hoặc tải nhiều hơn bằng kỹ thuật cuộn có thể hữu ích

Hình ảnh, vấn đề đau đầu hơn của chúng tôi

1. Kích thước hình ảnh phù hợp

Cung cấp hình ảnh có kích thước phù hợp để tiết kiệm dữ liệu di động và cải thiện thời gian tải

Giải pháp (sử dụng hình ảnh phản hồi) → Hãy xem xét các kỹ thuật khác nhau được đề xuất bởi Google

• Srcset. Chiến lược chính để phục vụ hình ảnh có kích thước phù hợp được gọi là "hình ảnh đáp ứng". Với hình ảnh phản hồi, bạn tạo nhiều phiên bản của từng hình ảnh, sau đó chỉ định phiên bản nào sẽ sử dụng trong HTML hoặc CSS của bạn bằng truy vấn phương tiện, kích thước khung nhìn, v.v.

• CDN hình ảnh. là một chiến lược chính khác để phục vụ hình ảnh có kích thước phù hợp. Bạn có thể coi CDN hình ảnh giống như API dịch vụ web để chuyển đổi hình ảnh

  Những gì tôi sử dụng → Tôi đang sử dụng cái có sẵn trong Storyblok. dịch vụ hình ảnh storyblok, luôn yêu cầu kích thước phù hợp

• SVG. một chiến lược khác là sử dụng các định dạng hình ảnh dựa trên vector. Với số lượng mã hữu hạn, hình ảnh SVG có thể chia tỷ lệ thành bất kỳ kích thước nào. Xem để tìm hiểu thêm

2. Trì hoãn hình ảnh ngoài màn hình

Cân nhắc tải chậm hình ảnh ngoài màn hình và hình ảnh ẩn sau khi tất cả các tài nguyên quan trọng đã tải xong để giảm thời gian tương tác

Giải pháp (hình ảnh ngoài màn hình) → Lazy load hình ảnh của bạn. Bạn có thể sử dụng thuộc tính loading được đặt thành lazy theo khuyến nghị của MDN. tải chậm

Những gì tôi sử dụng → Trong trường hợp của tôi, tôi đang sử dụng Vue Lazyload để tải chậm hình ảnh và hình nền của mình.

3. Mã hóa hình ảnh hiệu quả

Hình ảnh được tối ưu hóa tải nhanh hơn và tiêu thụ ít dữ liệu di động hơn

Giải pháp (sử dụng hình ảnh được tối ưu hóa) → Điều này sẽ được khắc phục nếu bạn đang sử dụng tất cả các kỹ thuật khác nhau mà chúng tôi thấy trong bài viết này. Sử dụng dịch vụ CDN hình ảnh của bạn hoặc nén hình ảnh của bạn là đủ

Nếu bạn không sử dụng bất kỳ CDN hình ảnh nào, bạn có thể sử dụng công cụ trực tuyến này. https. // squoosh. ứng dụng/

4. Phục vụ hình ảnh ở định dạng thế hệ tiếp theo

Các định dạng hình ảnh như JPEG 2000, JPEG XR và WebP thường cung cấp khả năng nén tốt hơn PNG hoặc JPEG, có nghĩa là tải xuống nhanh hơn và tiêu thụ ít dữ liệu hơn

Giải pháp (sử dụng hình ảnh webp) → Nếu ​​bạn sử dụng dịch vụ hình ảnh, như tôi, họ cũng có bộ lọc định dạng để lấy định dạng webp/jpeg. Vì vậy, bạn có thể tải lên bất kỳ loại hình ảnh nào, nhưng bạn sẽ luôn tải xuống hình ảnh được tối ưu hóa

Những gì tôi sử dụng → Tôi sử dụng img2. dịch vụ storyblok thêm bộ lọc. định dạng (webp). Nhưng chỉ khi trình duyệt hỗ trợ định dạng này

Tôi đã tìm thấy sự cố → Tôi cần lọc theo kết xuất canvas ở phía máy khách để tránh hiển thị hình ảnh webp trong các trình duyệt không hỗ trợ như Safari (webp sẽ hoạt động trong các phiên bản sau)

Cảm ơn các đồng nghiệp của tôi trong @passionPeopleNL đã làm sáng tỏ vấn đề này

5. Các phần tử hình ảnh có chiều rộng và chiều cao rõ ràng

Đặt chiều rộng và chiều cao rõ ràng cho các thành phần hình ảnh để giảm sự thay đổi bố cục và cải thiện CLS

Giải pháp () → Luôn bao gồm các thuộc tính kích thước chiều rộng và chiều cao trên các thành phần hình ảnh và video của bạn

Ngoài ra, dành không gian cần thiết với các hộp tỷ lệ khung hình CSS

Những gì tôi sử dụng → Tôi đã tạo một thành phần chung cho hình ảnh

Bằng cách này, mỗi khi tôi xác định một hình ảnh, tôi sẽ gọi thành phần này, thành phần này sẽ không chỉ tối ưu hóa hình ảnh của tôi bằng cách sử dụng v-lazy và lọc định dạng, mà các thuộc tính sẽ không cho phép bạn không chuyển chiều rộng và chiều cao

Bằng cách này, chúng tôi sẽ luôn đảm bảo rằng chúng tôi tuân thủ tiêu chuẩn

6. Sử dụng các định dạng video cho nội dung hoạt hình

GIF lớn không hiệu quả để phân phối nội dung hoạt hình. Cân nhắc sử dụng video MPEG4/WebM cho hình ảnh động và PNG/WebP cho hình ảnh tĩnh thay vì GIF để tiết kiệm byte mạng

Giải pháp (nội dung hoạt hình hiệu quả) → Nhiều CDN hình ảnh hỗ trợ chuyển đổi video GIF sang HTML5. Bạn tải GIF lên CDN hình ảnh và CDN hình ảnh trả về video HTML5

Tôi giới thiệu cho bạn bài viết Cải thiện Hiệu suất GIF Animated Với Video HTML5 nếu bạn cần tự làm việc này

7. Tải trước hình ảnh Paint có nội dung lớn nhất

Tải trước hình ảnh được sử dụng bởi phần tử LCP để cải thiện thời gian LCP của bạn

Giải pháp () → Nếu ​​bạn biết rằng nên ưu tiên một tài nguyên cụ thể, hãy sử dụng liên kết rel="preload" để tìm nạp tài nguyên đó sớm hơn

Nhiều loại tài nguyên có thể được tải trước, nhưng trước tiên bạn nên tập trung vào việc tải trước các nội dung quan trọng, chẳng hạn như phông chữ, hình ảnh hoặc video trong màn hình đầu tiên và CSS hoặc JavaScript đường dẫn quan trọng

Những gì tôi sử dụng → Trong trang bài viết, tôi đã đặt hình ảnh nổi bật của bài viết dưới dạng liên kết tải trước ở thẻ đầu bằng phương thức head mà nuxt cung cấp cho chúng tôi

head() {
	return {
    link: [
      {
        rel: 'preload',
        as: 'image',
        href: transformImage(this.story.content.featured_image, '672x0'),
      },
    ],
  }
}

Phông chữ

1. Tất cả văn bản vẫn hiển thị trong khi tải webfont

Tận dụng tính năng CSS hiển thị phông chữ để đảm bảo người dùng có thể nhìn thấy văn bản trong khi phông chữ web đang tải

Giải pháp (hiển thị phông chữ) → Cách dễ nhất để tránh hiển thị văn bản vô hình trong khi tải phông chữ tùy chỉnh là tạm thời hiển thị phông chữ hệ thống. Bằng cách bao gồm hiển thị phông chữ. hoán đổi theo kiểu @font-face của bạn, bạn có thể tránh được FOIT trong hầu hết các trình duyệt hiện đại

API hiển thị phông chữ chỉ định cách hiển thị phông chữ. hoán đổi cho trình duyệt biết rằng văn bản sử dụng phông chữ sẽ được hiển thị ngay lập tức bằng phông chữ hệ thống. Khi phông chữ tùy chỉnh đã sẵn sàng, nó sẽ thay thế phông chữ hệ thống

Ví dụ: đối với các phông chữ của Google, bạn chỉ cần thêm &display=swap  vào cuối URL của Google Fonts

Những gì tôi sử dụng → Kỹ thuật hoán đổi khuôn mặt @ phông chữ, là kỹ thuật tôi đang sử dụng vào lúc này, với các tệp phông chữ được bao gồm trực tiếp trong dự án của tôi

Những gì để tránh?

1. Tránh chuyển hướng nhiều trang

Chuyển hướng gây ra độ trễ bổ sung trước khi trang có thể được tải (tránh nhiều lần chuyển hướng)

Tôi tránh → Tôi không thực hiện bất kỳ chuyển hướng nào

2. Tránh cung cấp JavaScript cũ cho các trình duyệt hiện đại

Polyfill và chuyển đổi cho phép các trình duyệt cũ sử dụng các tính năng JavaScript mới. Tuy nhiên, nhiều thứ không cần thiết cho các trình duyệt hiện đại

Giải pháp (thông tin chi tiết) → Đối với JavaScript đi kèm của bạn, hãy áp dụng chiến lược triển khai tập lệnh hiện đại bằng cách sử dụng tính năng phát hiện tính năng mô-đun/nomodule để giảm lượng mã được chuyển đến các trình duyệt hiện đại, trong khi vẫn duy trì hỗ trợ cho các trình duyệt cũ

Những gì tôi sử dụng → Trong Nuxt, chúng tôi có --Modern với một số tùy chọn trong lệnh xây dựng. Trong trường hợp của tôi để tạo --Modern là đủ

Kiểm tra hướng dẫn tuyệt vời này https. // nhà phát triển. đến/debs_obrien/Modern-build-in-nuxt-js-17lc để tìm hiểu thêm về nó

3. Tránh tải trọng mạng khổng lồ

Tải trọng mạng lớn khiến người dùng phải trả tiền thật và có mối tương quan cao với thời gian tải lâu

Giải pháp (tổng trọng lượng byte) → Có một số cách để giảm thiểu kích thước tải trọng của chúng tôi

• Trì hoãn các yêu cầu cho đến khi chúng cần thiết. Nuxt đang chăm sóc nó

• Tối ưu hóa các yêu cầu càng nhỏ càng tốt, giảm thiểu và nén, cố gắng sử dụng WebP cho hình ảnh khi có thể. Một CDN hình ảnh sẽ luôn ở đó để duy trì hiệu suất của chúng tôi

• Yêu cầu bộ đệm để trang không tải xuống lại tài nguyên khi truy cập lại

  mạng. nhà phát triển khuyên chúng tôi nên kiểm tra Trang đích về độ tin cậy của mạng để tìm hiểu thêm về hoạt động của bộ nhớ đệm và triển khai nó

4. Tránh tài liệu. viết()

Đối với người dùng có kết nối chậm, các tập lệnh bên ngoài được tự động đưa vào qua tài liệu. write() có thể trì hoãn tải trang hàng chục giây

Giải pháp (không ghi tài liệu) → Trong mã của riêng bạn, bạn có quyền kiểm soát tuyệt đối để không thêm nó, nhưng tôi khuyên rằng bất cứ khi nào bạn định sử dụng bên thứ ba, hãy kiểm tra xem nó có đang sử dụng tài liệu không. viết () cho một cái gì đó

5. Tránh hoạt ảnh không tổng hợp

Các hình ảnh động không được tổng hợp có thể bị giật và tăng CLS

Giải pháp (hình ảnh động không tổng hợp) → Hiện tại tôi không có nhiều hình ảnh động, nhưng một số ít tôi có tôi áp dụng với các thuộc tính rẻ để chạy cho trình duyệt. dịch và quy mô

Đọc hướng dẫn này https. //www. html5rocks. com/en/tutorials/speed/high-performance-animations/ sẽ giải thích cho bạn lý do tại sao

Bài viết thú vị về chủ đề này

https. // hoang dã. com/blog/2020/09/30/getting-postmark-lighthouse-performance-score-to-100

https. //trung bình. com/weekly-webtips/web-vitals-google-search-the-state-vue-nuxt-performance-optimization-in-july-2020-71441eefc51

Làm cách nào để giảm JavaScript không sử dụng trong Nuxt?

Làm cách nào để xóa JavaScript không sử dụng?

Tại sao lại xóa JavaScript không sử dụng?

Làm cách nào để phát hiện mã JavaScript không được sử dụng?