Cách Cải thiện Hiệu suất Trang web: 4 Chiến thắng Nhanh chóng Kiểm tra Tốc độ

Tất cả chúng ta đều biết rằng tốc độ là tiền bạc.

Trang web nhanh hơn chuyển đổi tốt hơn, dẫn đến nhiều doanh thu hơn.

Mặc dù tác động trực tiếp của tốc độ lên điểm mấu chốt, nhưng việc nhận được các đề xuất để cải thiện hiệu suất được triển khai đôi khi có thể là một thách thức vì thường có chỉnh sửa mã kế thừa có thể ảnh hưởng đến tính toàn vẹn cấu trúc của trang web.

Điều này đặc biệt đúng khi nói đến việc cải thiện hiệu suất của JavaScript.

Mặc dù tính linh hoạt của JavaScript giúp bạn dễ dàng sử dụng khi mã hóa các hàm, nhưng sự linh hoạt tương tự (vì nó là một ngôn ngữ động và được đánh máy lỏng lẻo) khiến việc duy trì khó khăn hơn.

Một trong những yêu cầu phổ biến của khách hàng và nhà phát triển là ưu tiên cải tiến hiệu suất dựa trên sự đơn giản và tài nguyên cần thiết (do hạn chế về thời gian phát triển).

Điều này có thể khá khó xác định, đặc biệt nếu bạn không phải là nhà phát triển và không có cái nhìn đầy đủ về mã back-end của trang web.

Tôi có thể giải quyết vấn đề này bằng cách sắp xếp danh sách của mình theo các hoạt động mà tôi biết sẽ yêu cầu những thay đổi tối thiểu đối với mã trang web.

quảng cáo

Đọc bên dưới

Trong bài viết này, tôi sẽ nêu bật bốn trong số các cách sửa lỗi nhanh phổ biến nhất của tôi.

1. Xóa các công cụ, tiện ích và công nghệ web của bên thứ ba

Hầu hết các trang web dựa vào công nghệ của bên thứ ba để theo dõi, giám sát, hỗ trợ khách hàng (chức năng trò chuyện) và nhiều hơn nữa.

Thách thức với công nghệ của bên thứ ba là nó thường chạy trên trang web của bạn với mã mà bạn không có quyền kiểm soát và do đó không thể cải thiện hiệu suất.

Số lượng tập lệnh của bên thứ ba được tải trên một trang có thể làm chậm hiệu suất của trang vì các tập lệnh đến từ các miền khác nhau.

Để hiểu điều này, trước tiên bạn cần hiểu điều gì sẽ xảy ra khi bạn truy cập một trang web.

Khi truy cập một trang web, trình duyệt sẽ tìm thấy tất cả các tài nguyên yêu cầu tìm kiếm DNS (Hệ thống tên miền).

Sau đó, trình duyệt sẽ phải đợi quá trình tìm kiếm kết thúc trước khi bắt đầu tải trang xuống.

Sự kiện này phụ thuộc vào máy chủ gốc phản hồi nhanh chóng.

Khi máy chủ phản hồi, trình duyệt cần đọc và hiểu mã và sau đó cung cấp cho bạn.

quảng cáo

Đọc bên dưới

Mặc dù sự kiện này có thể kéo dài mili giây, nhân số này với số lượng tìm kiếm mà trình duyệt cần thực hiện và sau đó bao gồm thời gian phản hồi chậm của máy chủ từ mỗi miền bạn đang tìm kiếm, nhưng mili giây này được tăng lên thành giây.

Câu hỏi đặt ra ở đây là tại sao lại mang trọng lượng chết khi bạn không cần?

Là một phần trong các cuộc kiểm toán của mình, tôi luôn xem xét số lượng công nghệ của bên thứ ba được sử dụng trên trang web.

Cách dễ nhất để làm điều này là sử dụng các công cụ tra cứu công nghệ như BuiltWith và Wappalyzer (một số công cụ miễn phí và trả phí khác có thể được sử dụng cho việc này).

Những công cụ này rất hữu ích khi bạn cần đưa ra quyết định đơn giản là giữ hay xóa chúng.

Tuy nhiên, nếu công nghệ vẫn đang được sử dụng và bạn cần cân nhắc giữa lợi ích của việc duy trì nó so với tác động của nó đối với lưu lượng truy cập trang web, thì tốt hơn hết bạn nên sử dụng các công cụ chẩn đoán như Công cụ thông tin chi tiết về tốc độ trang và Lighthouse để xác định ảnh hưởng đến hiệu suất Nổi bật.

Nếu hiểu biết về công nghệ hơn, bạn có thể sử dụng tính năng chặn yêu cầu mạng trong các công cụ phát triển của Chrome để xem trang tải nhanh như thế nào nếu một tập lệnh hoặc tài nguyên cụ thể không tải.

Một công cụ tốt khác để trực quan hóa các hoạt động tải là Bản đồ yêu cầu từ webpagetest.org.

Báo cáo này cung cấp cho bạn bản trình bày trực quan về kích thước, tính bằng byte, của nội dung được chuyển bằng dữ liệu yêu cầu của Chrome.

Tôi sử dụng điều này khi trình bày những tác động của công nghệ bên ngoài đối với những dãy C không biết gì về mã hóa.

Trang web càng cũ thì càng có nhiều khả năng tìm thấy mã bên ngoài không còn được sử dụng.

Tôi đã tìm thấy:

  • Tập lệnh cho hộp trò chuyện không còn được sử dụng.
  • Các phiên bản khác nhau của tiện ích đồng ý cookie.
  • Pixel theo dõi quảng cáo từ phần mềm không còn được sử dụng.
  • Và – tệ nhất là – sử dụng tiện ích bên ngoài cho các nút chia sẻ xã hội khi nút CSS thực hiện thủ thuật.

Các tập lệnh này rất dễ xóa vì chúng không ảnh hưởng đến tính toàn vẹn tổng thể của phần còn lại của mã trên trang web.

Ngoài ra, nếu bạn muốn giữ các tập lệnh này, hãy di chuyển càng nhiều tập lệnh được hỗ trợ sang Trình quản lý thẻ của Google (GTM) hoặc bất kỳ trình quản lý thẻ nào khác mà bạn sử dụng để giảm số lượng tìm kiếm DNS được thực hiện bởi trình duyệt.

quảng cáo

Đọc bên dưới

Kiểm tra tập lệnh Trình quản lý thẻ thường xuyên để loại bỏ các tập lệnh không cần thiết.

Bạn cũng có thể sử dụng Window Loaded Trigger trong GTM để trì hoãn việc tải các tập lệnh không cần thiết khi khách truy cập vào trang cho đến khi trang được tải xong.

2. Triển khai tìm nạp trước và kết nối trước DNS

Tìm nạp trước và kết nối trước DNS là các gợi ý tài nguyên trình duyệt có thể được sử dụng để tăng tốc độ tra cứu DNS.

Các trình duyệt thường đợi cho đến khi họ cần một tài nguyên trước khi cố gắng yêu cầu nguồn gốc của tài nguyên đó.

Trong khi tài nguyên này đang được yêu cầu, toàn bộ trang sẽ ngừng tải cho đến khi giải quyết xong.

Tìm nạp trước DNS là một cách để có được dòng tài nguyên không quan trọng trước khi cần và nó tăng tốc thời gian tra cứu bằng cách cho phép trình duyệt khởi động nhanh.

Bạn có thể xem trước các tiện ích của bên thứ ba xuất hiện ở cuối trang, chẳng hạn như hộp trò chuyện, nút chia sẻ xã hội, tiện ích thăm dò ý kiến, v.v.

<link rel="dns-prefetch" href="https://example.com">

Cửa sổ bảng điều khiển JavaScript của Công cụ nhà phát triển Chrome

Preconnect cũng được sử dụng để thiết lập kết nối sớm, nhưng nên được sử dụng cho các tài nguyên quan trọng đối với việc tải trang, chẳng hạn như nội dung được lưu trữ trên mạng phân phối nội dung, phông chữ web, v.v.

quảng cáo

Đọc bên dưới

3. Sử dụng một thư viện JQuery bất cứ khi nào có thể

Một số tập lệnh của bên thứ ba đi kèm với thư viện jQuery.

Đối với giáo dân, jQuery là một thư viện JavaScript giúp đơn giản hóa việc sử dụng các hàm JavaScript.

Hầu hết các trang web hiện đại đều có một số dạng JavaScript nên một phiên bản jQuery đã được tải trên trang web.

Kéo hai phiên bản của thư viện này vào trang web của bạn khi bạn chỉ cần một phiên bản là một sự lãng phí tài nguyên.

Khi tải tập lệnh bên ngoài, hãy luôn yêu cầu phiên bản mà phiên bản jQuery sẽ không tải.

Sau đó, nhà phát triển của bạn có thể đặt tập lệnh để sử dụng phiên bản toàn cầu tải trên trang web của bạn.

Đừng quên kiểm tra xem tập lệnh bạn đang tải có tương thích với phiên bản jQuery trên trang web của bạn hay không.

Sử dụng cửa sổ bảng điều khiển JavaScript của Công cụ phát triển Chrome để xem phiên bản nào hoặc các phiên bản jQuery đang tải trên trang web của bạn.

Nhập Ctrl + Shift + J để mở bảng điều khiển, sau đó nhập console.log (jQuery (). jquery); trong dòng lệnh.

Cửa sổ bảng điều khiển JavaScript của Công cụ phát triển ChromeYellow Lab Tools có một giao diện đơn giản để kiểm tra các phiên bản jQuery.

Kết quả jQuery của Công cụ Lab màu vàng

Các cách khác để giảm tác động của việc tải tệp jQuery là sử dụng phiên bản mới nhất và cung cấp jQuery thông qua các thư viện được lưu trữ trên máy chủ của Google.

quảng cáo

Đọc bên dưới

4. Xóa các câu lệnh CSS dư thừa để hỗ trợ trình duyệt cũ

Trang web càng cũ, số lượng tội phạm càng cao.

Dễ dàng loại bỏ các chỉ thị CSS dư thừa như hỗ trợ trình duyệt cũ (bản sửa lỗi IE) và các tiền tố cũ vì nó thường là một khối mã riêng biệt.

Nhiều công cụ làm nổi bật CSS không được sử dụng trên một trang web.

Tuy nhiên, thay vì phải tìm kiếm từng dòng mã cho các tiền tố cũ và hỗ trợ trình duyệt, Yellow Lab Tools cung cấp cho bạn một danh sách dễ hiểu để nhà phát triển của bạn làm việc.

Công cụ Lab màu vàng - kết quả với các tiền tố cũ

Đảm bảo kiểm tra công cụ theo dõi của bạn để xem số lượng khách truy cập vẫn đang sử dụng các trình duyệt cũ đó và nếu con số này đảm bảo, hãy duy trì hỗ trợ xung quanh.

quảng cáo

Đọc bên dưới

Cuối cùng

Có rất nhiều công nghệ tuyệt vời đang cải thiện cách chúng tôi nhắm mục tiêu và theo dõi khách truy cập vào trang web của chúng tôi.

Tuy tốc độ sẽ luôn là mối quan tâm hàng đầu nhưng việc mang đến trải nghiệm tốt nhất cho người dùng luôn là ưu tiên hàng đầu.

Thường xuyên xem lại các tập lệnh bên ngoài sẽ giúp bạn mang lại trải nghiệm tốt nhất cho khách truy cập một cách hiệu quả.

Nhiêu tai nguyên hơn:


tín ảnh

Tất cả ảnh chụp màn hình của tác giả, tháng 10 năm 2020

Nguồn: www.searchenginejournal.com

Trả lời

Chat Zalo