Giới thiệu
Hôm nay, điều quan trọng nhất bạn có thể làm cho trang web của mình là đảm bảo trang web hoạt động tốt khi được truy cập trên điện thoại hoặc máy tính bảng. Đọc tiếp và tìm hiểu cách tối ưu hoá trang web cho trình duyệt di động bằng Công cụ của Chrome cho nhà phát triển và thiết bị Android.
Tại sao tối ưu hoá cho web dành cho thiết bị di động lại quan trọng đến vậy?
Hiệu suất
Thiết bị di động có CPU nhanh hơn, RAM nhiều hơn, GPU nhanh hơn và khả năng truy cập mạng nhanh hơn khi chúng ta chuyển đổi từ 2G và 3G sang 4G. Mặc dù tiến độ rất nhanh, nhưng các thiết bị di động không có đủ năng lượng so với máy tính của chúng tôi. Cụ thể hơn, việc tải tài nguyên mạng mất nhiều thời gian hơn, việc giải nén hình ảnh mất nhiều thời gian hơn, việc vẽ trang mất nhiều thời gian hơn, việc thực thi tập lệnh mất nhiều thời gian hơn. Bạn có thể giả định rằng trang của bạn chạy chậm hơn từ 5 đến 10 lần trên thiết bị di động.
Pin
Thiết bị di động chỉ chạy bằng pin. Người dùng thiết bị di động muốn thời lượng pin lâu nhất có thể. Một trang web chưa tối ưu sẽ tiêu hao pin nhanh hơn nhiều so với mức cần thiết. Giảm thiểu lưu lượng truy cập mạng và giảm thời gian hiển thị để giảm tiêu hao pin. Khi tìm nạp tài nguyên, bạn phải bật Wi-Fi hoặc radio di động để làm tiêu hao pin. Khi trình duyệt vẽ một phần tử, mức sử dụng CPU và GPU sẽ tăng đột biến, từ đó cũng làm tiêu hao pin.
Mức độ tương tác
Hiệu suất giúp nâng cao chỉ số quan trọng nhất đối với bạn. Trong Facebook, chúng ta quan tâm đến việc cuộn. Trong một thử nghiệm A/B, chúng tôi đã giảm tốc độ cuộn từ 60 khung hình/giây xuống 30 khung hình/giây. Đã thu gọn mức độ tương tác. Chúng tôi đã đồng ý, vì vậy việc cuộn trang là vấn đề quan trọng.
Facebook tại Edge Summit
Người dùng thiết bị di động muốn có thể truy cập và thoát ra một cách nhanh chóng. Trang web nhanh nhất sẽ nhận được nhiều lượt tương tác nhất.
Quản lý hiệu suất
Chrome đi kèm với một bộ công cụ tuyệt vời cho nhà phát triển. Bài viết này hướng dẫn bạn cách sử dụng các công cụ này để lập hồ sơ trang web dành cho thiết bị di động. Thật tuyệt nếu bạn đã quen thuộc với Công cụ của Chrome cho nhà phát triển! Nếu không, hãy xem các hướng dẫn tuyệt vời sau:
Giờ bạn đã nắm bắt được thông tin, hãy tìm hiểu cách tăng tốc trang web dành cho thiết bị di động bằng Công cụ cho nhà phát triển. Nếu đây là lần đầu tiên bạn sử dụng Công cụ của Chrome cho nhà phát triển cho Android, hãy xem hướng dẫn bắt đầu ở cuối bài viết.
Sử dụng Công cụ của Chrome cho nhà phát triển từ xa
Khi thiết bị Android được chia sẻ Internet với máy tính của bạn. Trong Chrome dành cho máy tính, hãy chuyển đến http://localhost:9222 rồi mở trang web của bạn trên thiết bị Android. Bạn sẽ được đưa đến danh sách thẻ đang mở trên thiết bị Android của mình. Chọn trang của bạn trong danh sách "Các trang có thể kiểm tra".
và bạn sẽ được chuyển đến Công cụ của Chrome cho trang đó.
Ôi... thanh công cụ Công cụ của Chrome cho nhà phát triển quen thuộc đã xuất hiện ở đó. Điều quan trọng nhất cần hiểu về Công cụ của Chrome cho nhà phát triển từ xa là Công cụ cho nhà phát triển của bạn chính là Công cụ cho nhà phát triển mà bạn đang sử dụng trên máy tính của bạn. Điểm khác biệt duy nhất là thiết bị Android của bạn chỉ chịu trách nhiệm về trang, còn máy tính chịu trách nhiệm về Công cụ cho nhà phát triển. Trong trường hợp này, dữ liệu giống nhau được thu thập và chức năng tương tự có sẵn.
Ví dụ: tôi truy cập www.sfgate.com/movies trên điện thoại của mình. Khi sử dụng Công cụ của Chrome cho nhà phát triển trên máy tính, tôi đã di chuột qua một div trong công cụ Phần tử và giống như trên máy tính, div được làm nổi bật một cách trực quan trên thiết bị Android của tôi.
Bạn cũng có thể sử dụng công cụ Phần tử để bật và tắt kiểu. Công cụ này sẽ hữu ích khi chúng ta muốn điều tra thời gian vẽ.
Giảm ánh sáng khi truy cập mạng
Hiệu suất mạng là yếu tố nhập và thậm chí còn quan trọng hơn trên web dành cho thiết bị di động. Thiết bị di động thường sử dụng kết nối chậm hơn so với máy tính để bàn và máy tính xách tay. Để đảm bảo bạn đang làm đúng cách, hãy chụp ảnh nhanh mạng bằng cách chuyển đến Công cụ mạng rồi nhấn vào bản ghi.
Ảnh chụp màn hình cho thấy lưu lượng truy cập mạng bắt nguồn từ một lượt tìm kiếm trên Google. Quan sát các yêu cầu mạng mà trang web của bạn đưa ra và tìm cách giảm thiểu các yêu cầu đó. Nếu trang web của bạn gửi yêu cầu thăm dò ý kiến đến máy chủ, thì bạn nên chú ý đến hoạt động của người dùng và tránh thăm dò ý kiến khi người dùng ở trạng thái rảnh. Công cụ mạng cho phép bạn xem các tiêu đề HTTP thô, hữu ích trong trường hợp mạng di động đang thay đổi các tiêu đề đó.
Tối ưu hoá thời gian hiển thị
Một trong những nút thắt cổ chai lớn nhất trong trình duyệt web dành cho thiết bị di động là vẽ trang của bạn. Vẽ là quá trình vẽ một phần tử trên trang theo kiểu đã chỉ định. Khi một phần tử tốn nhiều tài nguyên vẽ, điều đó sẽ làm chậm quá trình vẽ của toàn bộ trang. Chrome sẽ cố gắng lưu các thành phần đã vẽ trước đó vào bộ nhớ đệm trong vùng đệm ngoài màn hình. Tuy nhiên, trên thiết bị di động, dung lượng RAM GPU có sẵn là hạn chế, giới hạn số lượng phần tử có thể lưu vào bộ nhớ đệm ngoài màn hình. Hiệu ứng phụ là nhiều màu vẽ hơn và mỗi lần vẽ chậm hơn so với máy tính. Để có tính năng cuộn thích ứng, bạn phải giảm thiểu thời gian hiển thị.
Chrome 25 có chế độ vẽ lại trang liên tục. Chế độ vẽ lại trang liên tục không bao giờ lưu các phần tử đã vẽ vào bộ nhớ đệm, mà thay vào đó sẽ vẽ tất cả các phần tử trong mỗi khung. Bằng cách buộc vẽ tất cả các thành phần trên từng khung, bạn có thể thực hiện kiểm thử A/B về thời gian vẽ bằng cách bật/tắt các thành phần và bật/tắt các thành phần. Mặc dù quy trình này được thực hiện theo cách thủ công nhưng đây là công cụ vô giá để theo dõi mức độ tốn kém của việc vẽ từng phần tử trên trang. Quy tắc đầu tiên của câu lạc bộ tối ưu hoá là đo lường những gì bạn đang cố gắng tối ưu hoá để có được đường cơ sở. Hãy cùng tìm hiểu một ví dụ đơn giản.
Trước tiên, hãy bật chế độ vẽ lại trang liên tục:
Sau khi bật, một biểu đồ sẽ hiển thị ở góc trên bên phải của thiết bị Android. Trục x của biểu đồ là thời gian và được chia thành các khung hình. Trục y của biểu đồ đo thời gian hiển thị, tính bằng mili giây. Bạn có thể thấy rằng, trên thiết bị của tôi, trang mất 14 mili giây để vẽ. Thời gian hiển thị tối thiểu và tối đa cũng được hiển thị cùng với bộ nhớ GPU đã sử dụng.
Như một thử nghiệm, tôi đặt kiểu trên phần tử đã chọn là display: none. Hãy xem mức độ tốn kém
của việc vẽ trang bây giờ.
Thời gian hiển thị đã giảm từ khoảng 14 mili giây trên mỗi khung hình xuống còn 4 mili giây trên mỗi khung hình. Nói cách khác, việc vẽ một phần tử đó mất khoảng 10 mili giây. Bằng cách làm theo quy trình bật/tắt các phần tử cũng như bật và tắt kiểu, bạn có thể nhanh chóng thu hẹp các phần đắt tiền trên trang của mình. Hãy nhớ rằng thời gian vẽ nhanh hơn đồng nghĩa với việc ít giật hơn, pin lâu hơn và người dùng tương tác nhiều hơn. Khi bạn đã sẵn sàng tìm hiểu sâu hơn, hãy nhớ đọc bài viết tuyệt vời này về chế độ vẽ lại trang liên tục.
Tính năng nâng cao
giới thiệu về:theo dõi
Nhiều tính năng nâng cao hơn dành cho nhà phát triển có trong Chrome dành cho máy tính để bàn cũng có trong Chrome dành cho Android. Ví dụ: có thể sử dụng about:gpu-internals, about:appcache-internals và about:net-internals. Khi tìm hiểu một vấn đề đặc biệt phức tạp, đôi khi, bạn cần thêm dữ liệu để thu hẹp nguyên nhân gây ra vấn đề. Trên máy tính, bạn có thể đang sử dụng about:tracing. Nếu bạn chưa quen với about:tracing, hãy xem video của tôi về cách sử dụng và khám phá công cụ phân tích about:tracing. Bạn có thể thu thập cùng một dữ liệu từ Android Chrome, hãy làm theo các bước sau để bắt đầu:
- Tải xuống adb_trace.py
- Chạy adb_trace.py từ dòng lệnh
- Sử dụng Chrome trên Android
- Nhấn phím Enter trên dòng lệnh, tắt tập lệnh adb_trace.py.
Sau khi adb_trace.py hoàn tất, bạn sẽ có một tệp JSON để tải trong tệp about:tracing của Chrome dành cho máy tính.
Hướng dẫn bắt đầu
Chúng ta đã xem xét những việc Công cụ của Chrome cho nhà phát triển từ xa có thể làm, hãy cùng tìm hiểu cách bắt đầu trong phiên gỡ lỗi từ xa. Nếu bạn chưa từng sử dụng những tính năng này,hãy đọc hướng dẫn chi tiết về cách bắt đầu. Nếu bạn đã sử dụng nhưng quên chính xác cách sử dụng, thì tôi cũng liệt kê hướng dẫn rút gọn tại đây.
1. Cài đặt SDK Android
Có thể bạn sẽ thắc mắc tại sao phải cài đặt SDK Android khi phát triển cho web. adb (Cầu gỡ lỗi Android) cũng đi kèm trong SDK. Chrome dành cho máy tính cần có khả năng giao tiếp với thiết bị Android của bạn. Chrome không giao tiếp trực tiếp với thiết bị Android mà sẽ định tuyến hoạt động giao tiếp thông qua adb.
2. Bật tuỳ chọn gỡ lỗi qua USB trên thiết bị của bạn
Bạn có thể tìm thấy tuỳ chọn bật tính năng gỡ lỗi qua USB trong phần Cài đặt Android. Bật tính năng này.
3. Kết nối với thiết bị
Kết nối thiết bị Android với máy tính qua USB nếu bạn chưa kết nối. Nếu đây là lần đầu tiên bạn sử dụng tính năng gỡ lỗi qua USB, bạn sẽ nhận được lời nhắc sau:
Nếu thường xuyên thực hiện các phiên gỡ lỗi từ xa, bạn nên chọn "Luôn cho phép từ máy tính này".
4. Xác minh rằng bạn đã kết nối thiết bị đúng cách
Chạy thiết bị adb từ dấu nhắc lệnh. Bạn sẽ thấy thiết bị của mình trong danh sách.
5. Bật tính năng gỡ lỗi qua USB trong Chrome
Mở phần Cài đặt > Nâng cao > Công cụ cho nhà phát triển rồi chọn tuỳ chọn Bật gỡ lỗi web qua USB như minh hoạ dưới đây:
6. Tạo kết nối Công cụ cho nhà phát triển với thiết bị Android
Chạy lệnh sau:
adb forward tcp:9222 localabstract:chrome_devtools_remote
tạo cầu nối giữa máy tính để bàn và thiết bị Android của bạn qua adb. Nếu bạn gặp bất kỳ vấn đề nào tại thời điểm này, hãy đọc hướng dẫn thiết lập chi tiết tại đây.
7. Xác minh bạn đã sẵn sàng
Xác minh rằng thiết bị của bạn đã được kết nối đúng cách bằng cách mở Chrome trên máy tính rồi chuyển đến http://localhost:9222. Nếu bạn gặp lỗi 404, một lỗi khác hoặc không thấy như sau:
Đọc hướng dẫn thiết lập chi tiết tại đây.
Kết luận
Người dùng thiết bị di động thường vội và cần nhanh chóng nhận được thông tin quan trọng đó từ trang của bạn. Nhiệm vụ của bạn là một trình tạo trang web dành cho thiết bị di động để đảm bảo rằng trang này tải nhanh và hoạt động tốt trên thiết bị di động. Nếu không, mức độ tương tác của người dùng sẽ giảm. Công cụ của Chrome cho nhà phát triển từ xa có chức năng tương đương với các công cụ dành cho máy tính để bàn. Giao diện người dùng đủ tương tự nên bạn không cần tìm hiểu bộ công cụ mới. Nói cách khác, quy trình làm việc của bạn sẽ tiếp tục diễn ra. Hãy nhớ rằng, Facebook không thể cạnh tranh với các vấn đề về hiệu suất và trang web của bạn cũng không thể vượt qua được các vấn đề này. Các trang web có hiệu suất cao sẽ thu hút được nhiều người dùng tương tác hơn.