Giới thiệu
Hiện 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 người dùng truy cập bằng điện thoại hoặc máy tính bảng. Hãy đọc tiếp để tìm hiểu cách tối ưu hoá trang web cho trình duyệt di động bằng Chrome DevTools và thiết bị Android.
Tại sao việc tối ưu hoá cho web dành cho thiết bị di động lại quan trọng?
Hiệu suất
Thiết bị di động đang có CPU nhanh hơn, nhiều RAM hơn, GPU nhanh hơn và truy cập mạng nhanh hơn khi chúng ta chuyển từ 2G và 3G sang 4G. Mặc dù có nhiều tiến bộ, thiết bị di động vẫn có hiệu suất thấp hơn so với máy tính. Nói một cách 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ỉ dùng pin. Người dùng thiết bị di động muốn pin dùng được càng lâu càng tốt. Một trang web chưa được tối ưu hoá sẽ làm hao pin nhanh hơn mức cần thiết. Giảm thiểu lưu lượng truy cập mạng và giảm số lần vẽ để giảm mức tiêu hao pin. Khi bạn tìm nạp tài nguyên, Wi-Fi hoặc radio di động phải bật, điều này sẽ làm tiêu hao pin. Khi trình duyệt hiển thị một phần tử, mức sử dụng CPU và GPU sẽ tăng đột biến, điều này cũng làm hao pin.
Mức độ tương tác
Chiến dịch Tối đa hoá hiệu suất giúp bạn tăng chỉ số quan trọng nhất đối với mình. Tại Facebook, chúng tôi quan tâm đến thao tác cuộn. Trong một thử nghiệm A/B, chúng tôi đã làm chậ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 ý, do đó thao tác cuộn rất quan trọng.
Facebook tại Hội nghị Edge
Người dùng thiết bị di động mong muốn có thể truy cập và thoát nhanh chóng. Trang web nhanh nhất sẽ thu hút đượ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ụ cho nhà phát triển tuyệt vời. 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. Nếu bạn đã quen thuộc với Chrome DevTools, thì thật tuyệt! Nếu không, hãy xem các hướng dẫn hữu ích sau:
Giờ thì bạn đã nắm được thông tin, hãy cùng 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 Chrome DevTools cho Android, hãy xem hướng dẫn bắt đầu sử dụng ở cuối bài viết.
Sử dụng Chrome DevTools từ xa
Kết nối thiết bị Android với máy tính. Trong Chrome dành cho máy tính, hãy chuyển đến http://localhost:9222 và trên thiết bị Android, hãy mở trang web của bạn. Bạn sẽ được chuyển đến danh sách các thẻ đang mở trên thiết bị Android. Chọn trang của bạn trong danh sách "Trang có thể kiểm tra".
và bạn sẽ được chuyển đến Chrome DevTools cho trang đó.
Ồ… thanh công cụ Chrome DevTools quen thuộc nằm ngay đó. Điều quan trọng nhất cần hiểu về Chrome DevTools từ xa là chúng chính là DevTools mà bạn đang sử dụng hiện nay trên máy tính. Đ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 của bạn chịu trách nhiệm về Công cụ cho nhà phát triển. Về cơ bản, dữ liệu được thu thập và chức năng được cung cấp là như nhau.
Ví dụ: tôi đã truy cập vào www.sfgate.com/movies trên điện thoại của mình. Khi sử dụng Chrome DevTools 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ể dùng công cụ Elements (Phần tử) để bật và tắt kiểu. Công cụ này sẽ hữu ích khi chúng ta cố gắng điều tra thời gian hiển thị.
Làm rõ quyền truy cập mạng
Hiệu suất mạng rất quan trọng 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 có 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, hãy chụp nhanh mạng bằng cách chuyển đến Công cụ mạng rồi nhấn vào nút ghi.
Ảnh chụp màn hình cho thấy lưu lượng truy cập mạng từ một lượt tìm kiếm trên Google Tìm kiếm. Quan sát các yêu cầu mạng mà trang web của bạn thực hiện 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ủ, 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 không hoạt động. Công cụ mạng cho phép bạn xem các tiêu đề HTTP thô, rất 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 điểm tắc nghẽn lớn nhất trong trình duyệt web dành cho thiết bị di động là việc hiển thị trang. Vẽ là quá trình vẽ một phần tử trên trang theo kiểu được chỉ định. Khi một phần tử tốn nhiều tài nguyên để hiển thị, phần tử đó sẽ làm chậm quá trình hiển thị của toàn bộ trang. Chrome cố gắng lưu các phần tử đã 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 hiện có bị giới hạn, điều này hạn chế số lượng phần tử có thể lưu vào bộ nhớ đệm ngoài màn hình. Tác dụng phụ là có nhiều lần vẽ hơn và mỗi lần vẽ đều chậm hơn so với máy tính. Để có thể cuộn nhanh, bạn phải giảm thiểu thời gian vẽ.
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 đó, vẽ tất cả phần tử trong mỗi khung hình. Bằng cách buộc tất cả các phần tử phải được vẽ trên mỗi khung hình, bạn có thể thực hiện thử nghiệm A/B về thời gian vẽ bằng cách bật và tắt các phần tử cũng như bật và tắt các kiểu. Mặc dù quy trình này là thủ công, nhưng đây là một 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 của bạn. 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 một đường cơ sở. Hãy cùng xem 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ẽ xuất hiện ở 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, được chia thành các khung hình. Trục y của biểu đồ đo lường thời gian vẽ, 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 này mất 14 mili giây để vẽ. Thời gian vẽ tối thiểu và tối đa cũng được hiển thị cùng với bộ nhớ GPU đã dùng.
Để thử nghiệm, tôi đặt kiểu trên phần tử đã chọn thành display: none. Hãy xem trang này tốn bao nhiêu tài nguyên để hiển thị.
Thời gian vẽ giảm từ khoảng 14 mili giây mỗi khung hình xuống còn 4 mili giây 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 và 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ốn kém 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 bị giật hơn, thời lượng pin dài 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 hay này về chế độ vẽ lại trang liên tục.
Các tính năng nâng cao
about:tracing
Nhiều tính năng nâng cao hơn dành cho nhà phát triển có trong Chrome cho máy tính cũng có trong Chrome cho Android. Ví dụ: about:gpu-internals, about:appcache-internals và about:net-internals đều có sẵn. Khi điều tra 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 dữ liệu tương tự từ Chrome trên Android. Hãy làm theo các bước sau để bắt đầu:
- Tải adb_trace.py xuống
- 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 mà bạn có thể tải trong about:tracing của Chrome dành cho máy tính.
Hướng dẫn bắt đầu
Giờ đây, khi đã xem xét những việc mà Chrome DevTools từ xa có thể làm, hãy cùng tìm hiểu cách bắt đầu phiên gỡ lỗi từ xa. Nếu bạn chưa từng sử dụng các 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 mất cách dùng, tôi cũng đã liệt kê hướng dẫn rút gọn tại đây.
1. Cài đặt SDK Android
Bạn có thể thắc mắc tại sao phải cài đặt SDK Android khi đang phát triển cho web. Trong SDK có adb (Cầu gỡ lỗi Android). Chrome trên 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à đị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 lựa 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ị
Nếu bạn chưa kết nối, hãy kết nối thiết bị Android với máy tính bằng cáp USB. 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ẽ thấy lời nhắc sau:
Nếu bạn thường xuyên thực hiện các phiên gỡ lỗi từ xa, tôi khuyên bạn nên chọn "Luôn cho phép từ máy tính này".
4. Kiểm tra để đảm bảo thiết bị của bạn đã được kết nối đúng cách
Chạy adb devices từ dấu nhắc lệnh. Bạn sẽ thấy thiết bị của mình được liệt kê.
5. Bật tính năng gỡ lỗi qua USB trong Chrome
Mở Settings > Advanced > DevTools (Cài đặt > Nâng cao > Công cụ cho nhà phát triển) và đánh dấu vào tuỳ chọn Enable USB Web debugging (Bật tính năng 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 và thiết bị Android thông qua adb. Nếu bạn gặp vấn đề khi thực hiện đến bước này, hãy đọc hướng dẫn thiết lập chi tiết tại đây.
7. Đang xác minh rằng 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 và 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 nội dung tương tự 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àng và cần nhanh chóng nhận được thông tin quan trọng đó từ trang của bạn. Là người xây dựng trang web dành cho thiết bị di động, bạn có nhiệm vụ đảm bảo trang 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. Chrome DevTools từ xa có chức năng tương đương với Chrome DevTools trên máy tính. Giao diện người dùng tương tự nhau nên bạn không cần phải tìm hiểu một bộ công cụ mới. Nói cách khác, quy trình làm việc của bạn sẽ được giữ nguyên. Hãy nhớ rằng Facebook không tránh khỏi các vấn đề về hiệu suất và trang web của bạn cũng vậy. Các trang web có hiệu suất cao sẽ thu hút nhiều mức độ tương tác của người dùng hơn.