Kỹ Thuật Tối Ưu Hóa Tốc Độ Tải Trang Trên Mobile Năm 2021

22/11/2021
1,133
0

Ngày nay, nhiều người truy cập web từ thiết bị di động hơn từ máy tính để bàn. Điều này đã dẫn đến một loại nghịch lý là kết nối internet ngày càng tốt hơn, nhưng tốc độ trang trên thiết bị di động hầu như không được cải thiện. Trong một số trường hợp, nó thậm chí còn trở nên tệ hơn. Dữ liệu từ Kho lưu trữ HTTP cho thấy không có sự cải thiện nào về bất kỳ chỉ số tốc độ di động quan trọng nào, được theo dõi trong 10 năm qua.

Tại sao tốc độ trên Mobile lại là vấn đề quan trọng?

Trên thiết bị di động, chúng ta có chế độ xem nhỏ hơn, có nghĩa là chúng ta có ít không gian hơn để làm việc. Đó là lý do tại sao rất dễ khiến các trang lộn xộn với các nút, hình ảnh và nội dung khác không cần thiết.

Mặc dù đây là một vấn đề thiết kế theo truyền thống, nhưng các lựa chọn kỹ thuật cũng quyết định số lượng nội dung chúng ta gửi đến thiết bị của người dùng.

Chúng ta cũng đang xử lý các thiết bị kém mạnh mẽ hơn. Trên thực tế, hầu hết mọi người trên web không sử dụng iPhone mới nhất hoặc thiết bị Android cao cấp. Theo Alex Russel: “ASP trên toàn thế giới (giá bán trung bình) 18 tháng trước là gần đạt $300USD, do đó, hiệu suất trung bình trong nhóm đã triển khai có thể được thể hiện bằng một thiết bị 300 đô la từ giữa năm 2019.”

Truyền tải ít tài nguyên hơn

Một lần nữa, một trong những vấn đề lớn nhất về tốc độ di động là số lượng tài nguyên mà chúng ta gửi đến các trình duyệt.

CSS, JavaScript, phông chữ, hình ảnh, video - tất cả đều là bao gồm tiêu chuẩn trên một trang web hiện đại. Các khung JavaScript (JS) phổ biến cũng tăng thêm độ phức tạp cho việc phát triển mobile app. Vấn đề là chúng ta càng thêm nhiều thứ vào, thì hiệu suất càng tăng. Dưới đây là những gì chúng ta có thể làm để giảm số lượng tài nguyên mà chúng ta đang sử dụng.

Trước tiên, chúng ta đừng ngại xóa các phần tử không cần thiết, bao gồm thanh trượt, cửa sổ bật lên, hình ảnh và video. Nếu điều gì đó không bổ sung vào trải nghiệm người dùng, thì điều đó sẽ không có ở đó.

Các công cụ như Google Optimize cho phép chúng ta dễ dàng thực hiện A/B Testing để kiểm tra những gì cần thiết và những gì không. Ví dụ: chúng ta có thể thiết lập một trang có ít phần tử hơn và kiểm tra cách thức chuyển đổi như thế nào so với phiên bản thông thường.

Về mã (code), JS thường là vấn đề lớn nhất khi nói đến hiệu suất web. Đó là lý do tại sao chúng ta nên đảm bảo không có tập lệnh nào không sử dụng hoặc không cần thiết trên trang web của mình.

Công cụ dành cho nhà phát triển của Chrome cung cấp một cách để xem có bao nhiêu CSS hoặc JS trên một trang không được sử dụng. Chúng ta cũng có thể tìm thấy thông tin đó trong bảng “Nguồn” trong tab “Mức độ phù hợp”.

Truyền tải tài nguyên nhẹ hơn

Bây giờ chúng ta có thể loại bỏ những tài nguyên không cần thiết và làm chúng nhẹ hơn. Đây là một trong số các giải pháp giúp chúng ta thực hiện:

Nén mã: Nén các tệp HTML, CSS và JS nhẹ hơn bằng cách áp dụng các thuật toán khác nhau để viết lại mã nhị phân của chúng và mã hóa thông tin bằng cách sử dụng ít bit hơn. Nhiều công ty lưu trữ theo mặc định, vì vậy bạn nên kiểm tra với nhà cung cấp của mình.
Rút gọn mã: loại bỏ các phần không cần thiết khỏi mã như nhận xét, khoảng trắng và ngắt dòng. Các khuôn khổ phát triển web phổ biến tự động tạo các tệp được rút gọn (thường có “.min” trong tên của chúng), vì vậy một lần nữa - hãy kiểm tra xem trang web của bạn đã thực hiện điều này chưa.
Chọn loại hình ảnh chính xác. Hình ảnh thường là yếu tố lớn nhất trên một trang, vì vậy chúng ta cần tối ưu hóa chúng. Đối với biểu trưng, hình dạng hình học và mỹ thuật, SVG là người chiến thắng có định dạng rõ ràng. Đối với hầu hết các hình ảnh khác, WebP hoặc JPEG cung cấp sự cân bằng tốt giữa chất lượng và kích thước tệp. Tuy nhiên, các trang web thực sự cần hình ảnh chất lượng cao (như các trang web về nhiếp ảnh hoặc nghệ thuật) có lẽ nên gắn bó với PNG, mặc dù tốc độ của chúng sẽ bị ảnh hưởng.
Thử nghiệm với các mức độ nén hình ảnh. Tương tự như nén mã, nén hình ảnh cũng làm cho các tập tin nhẹ hơn. Tất nhiên, khi chúng ta tăng mức nén, chất lượng hình ảnh cũng trở nên tồi tệ hơn. Đó là lý do tại sao chúng tôi cần thử nghiệm và tìm ra sự cân bằng phù hợp giữa tốc độ và chất lượng hình ảnh. Ứng dụng Squoosh cung cấp một cách dễ dàng để làm điều đó.

Why & how to focus on mobile page speed - Think with Google

Giúp trình duyệt hiển thị trang nhanh hơn

Một vấn đề lớn ở đây một lần nữa liên quan đến CSS và JS. Cả hai tài nguyên đều đang chặn hiển thị vì trình duyệt cần dừng những gì chúng đang làm và xử lý từng tệp CSS và JS mà chúng tìm thấy.

Nói tóm lại, các trình duyệt phải tải xuống, phân tích cú pháp và thực thi các tệp này trước khi tiếp tục với bất kỳ thứ gì khác như hiển thị trang hoặc phản hồi tương tác của người dùng.

Đó là lý do tại sao chúng ta cần phải xem xét về cách chúng ta phân phối CSS và JS. Có một số kỹ thuật có thể giúp bạn thực hiện điều đó:

Critical CSS: liên quan đến việc tìm CSS chịu trách nhiệm về nội dung trong màn hình đầu tiên và đặt nội dung đó trong thẻ head của trang. Thực hiện được điều đó sẽ giúp các trình duyệt ưu tiên và hiển thị nhanh nội dung trong màn hình đầu tiên, điều này rất quan trọng đối với trải nghiệm người dùng. Sau đó, chúng tôi có thể tải phần còn lại của CSS một cách không đồng bộ.
Chúng tôi cũng có thể giảm bớt CSS không sử dụng trên một trang. Thông thường, các quy tắc CSS được xử lý, ngay cả khi chúng không được áp dụng trên trang hiện tại. Ví dụ: nếu chúng ta đang ở trên trang chủ, chúng ta không cần CSS tạo kiểu cho các bài đăng trên blog và ngược lại. Nhưng vì các quy tắc nằm trong quy định chung nên các trình duyệt phải xử lý chúng, bất kể chúng có đóng góp gì cho trang hay không. Việc giảm bớt CSS không sử dụng này giúp các trình duyệt hiển thị trang nhanh hơn bằng cách cắt giảm số lượng hoạt động mà họ cần thực hiện. Việc triển khai CSS quan trọng và loại bỏ CSS không sử dụng đều có thể được tự động hóa với NitroPack.
Chúng tôi cũng có thể làm cho các tập lệnh JS không bị chặn với thuộc tính async. Các tập lệnh JS có thuộc tính này tải ở chế độ nền và sẽ khởi chạy khi sẵn sàng. DOM và các tập lệnh khác không đợi chúng. Kỹ thuật này thường được áp dụng cho các phân tích và tập lệnh quảng cáo được cung cấp bởi các công ty như Google và Facebook.
Cuối cùng, phân tách mã có thể rất có lợi khi xử lý JS. Ý tưởng ở đây là chia gói JS của chúng tôi và chỉ gửi mã cần thiết cho tuyến ban đầu. Điều này giảm thiểu số lượng tập lệnh cần được xử lý cùng một lúc. Tách mã là một tính năng trong các gói phổ biến như Webpack và Rollup, vì vậy có rất nhiều thông tin về cách triển khai kỹ thuật này.

Đặt tốc độ là ưu tiên hàng đầu

Liệt kê các mẹo và thủ thuật là rất tốt, nhưng hiếm khi đủ để thúc đẩy bất kỳ hành động có ý nghĩa nào. Trong thế giới thực, mọi thứ rất lộn xộn và việc tối ưu hóa tốc độ thường bị đẩy sang một bên.

Đối với hầu hết các doanh nghiệp, hiệu suất web gần như không thú vị bằng việc thiết kế các trang mới, thêm chức năng hoặc tiếp thị sản phẩm. Nhưng tốc độ có thể là yếu tố quyết định cuối cùng cho sự thành công trực tuyến của bạn. Và bạn cần phải đối xử với nó cho phù hợp.

Nếu bạn đang điều hành trang web của mình một mình, bạn sẽ cảm giác đây là một gánh nặng. Nghiên cứu các chiến lược tối ưu hóa, trò chuyện với các chuyên gia và tìm kiếm các tiện ích bổ sung hoặc plugin có thể giúp bạn tự động hóa quy trình. Tất nhiên điều này sẽ không dễ dàng, nhưng sẽ mang lại những lợi ích rất lớn.

Mặt khác, nếu bạn có một nhóm lớn hơn, bạn cần đặt mọi người trên cùng một trang. Tối ưu hóa tốc độ thường yêu cầu công việc kỹ thuật, vì vậy ít nhất nhóm nhà phát triển nên hợp tác chặt chẽ để cùng làm việc với nhau.

Xin chân thành cảm ơn!

AppROI Marketing App