Chủ đề SEO trên điện thoại di động đang ngày càng nóng lên, nhất là khi "ngày định mệnh" 21/04 đang tới gần. Trong bài này chúng ta hướng đến một khía cạnh khác khi tối ưu hóa website cho điện thoại di động: tốc độ tải trang. Ngoài những điều tôi đề cập ngay bên dưới đây, bạn cũng nên tìm hiểu qua tài liệu của Google để bổ sung thêm thông tin nha.

Đo hiệu suất tối ưu trang web trên mobile

Bước đầu tiên và cực kì quan trọng để đánh giá được quá trình làm việc của bạn có hiệu quả hay không đó là đo lường trang web trước và sau khi tối ưu đã có sự thay đổi như thế nào cũng như phát hiện những vấn đề còn tồn tại hoặc nảy sinh mà bạn chưa thể phát hiện bằng mắt thường được. Có một số công cụ miễn phí rất tuyệt vời để bạn có thể đo lường được nó. Công cụ miễn phí tuyệt vời Chrome DevTools được tích hợp sẵn trong Chrome hay công cụ WebPageTest hay công cụ Pingdom Website Speed Test đều là những công cụ tuyệt vời để bạn thực hiện việc đo lường.

Nếu bạn lo lắng vì bạn không phải là một developer, đừng lo vì việc sử dụng Chrome DevTools rất dễ dàng:

  • Mở Chrome ra.
  • Click chuột vào cái "bánh mì hamburger" (là cái menu 3 đường thằng xếp chồng lên nhau ở góc phải màn hình ấy)
  • Chọn More Tools rồi chọn tiếp Developer Tools


Hoặc đơn giản hơn, bạn chỉ cần click chuột phải vào bất kỳ chỗ nào trên trang web, sau đó chọn Kiểm tra phần tử (Inspect Element) để kích hoạt DevTool làm việc với phần tử đó là xong.

Sau khi vào chế độ của nhà phát triển trên DevTool, bạn sẽ có rất nhiều công cụ mới hỗ trợ cho nhà phát triển. Quan trọng hơn hết là chế độ giả lập điện thoại được tích hợp sẵn trong đó cho phép bạn xem website của mình ở chế độ màn hình khác. Rất tuyệt vời !

Bây giờ, chúng ta chọn thiết bị mình quan tâm - ví dụ như bạn có thể chọn IPhone 6, sau đó gõ địa chỉ website (hoặc landing page) của mình ở trên thanh địa chỉ và ấn Enter. Sau đó bạn có thể kéo xuống phía dưới và xem thêm các số liệu khác như tổng thời gian tải trang, kích thước trang, số lượng request...Những thông tin này nằm ở tab "Network", ngoài ra còn rất nhiều thông tin hữu ích khác mà bạn có thể sẽ cần ở các tab còn lại. Xem hình dưới:

​
Bây giờ, dựa vào việc xem xét các số liệu hiện tại, chúng ta sẽ bắt đầu việc tối ưu.


Tối ưu hóa hình ảnh

Theo một tài liệu từ trang web HTTP Archive, hình ảnh chiếm tới 60% tổng nội dung trang web cả bạn. Cho nên, nói một cách ví von thì hình ảnh đang cai trị trang web của bạn. Viêc kiểm tra và tối ưu hóa tốc độ tải trang được chúng ta nhắc tới nhiều lần trước đây trên diễn đàn qua nhiều bài viết rồi nên chắc nhiều bạn cũng hiểu được tầm quan trọng của việc giữ cho hình ảnh gọn nhẹ sẽ giúp tăng tốc độ tải trang như thế nào.

Đặc biệt, khi trang của bạn được tải xuống thiết bị di động - trong điều kiện đường truyền hạn chế hơn rất nhiều thì việc tối ưu hóa hình ảnh để tăng tốc độ tải trang trên di động lại càng quan trọng hơn bao giờ hết và có ảnh hưởng lớn đến hiệu suất làm việc của website.

Đây là môi trường thích hợp để bạn thực hành kỹ thuật thiết kế nhiều ảnh khác nhau và hiển thị tùy theo kích thước màn hình gọi là lossless and lossy image optimization. Đây là kỹ thuật mà tôi đã có dịp nhắc tới trong bài viết này (lời khuyên thứ 6).

Một hình ảnh đẹp, độ phân giải cao lên đến 1600px cũng sẽ trở nên vô dụng khi hiển thị trên một thiết bị cầm tay có màn hình độ phân giải thấp.

Bên cạnh đó, bạn cũng cần quan tâm đến việc thiết lập thẻ meta viewport trong phần đầu của trang web bạn. Về cơ bản, việc này nói với các trình duyệt di động rằng trang web của bạn được thiết kế tùy biến với màn hình khác nhau của thiết bị và đừng cố gắng thu nhỏ hình ảnh xuống theo độ phân giải của máy tính để bàn để làm trang web lớn hơn (và dĩ nhiên là xấu hơn). Ngoài ra, nếu thẻ này không tồn tại, bạn có thể sẽ nhận lấy nhiều kết quả khác nhau trên di động. Thẻ này đã được tôi trình bày trong bài viết này, hãy kiểm tra:

Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

"Wrong way"

Responsive design đặt nặng vào vệc sử dụng các truy vấn CSS để tùy biến các kiểu hiển thị của trang web trên các kích thước màn hình khác nhau. Để có một cái nhìn rõ ràng hơn, bạn có thể quan sát đoạn mã sau:

Code:
<!-- KHÔNG SỬ DỤNG ĐOẠN MÃ NÀY -->
<style>
@media (min-width:376px) {
.mobile_image {
display: none;
}
.desktop_image {
display: inline;
}
}
@media (max-width:375px) {
.mobile_image {
display: inline;
}
.desktop_image {
display: none;
}
}
</style>
<img src="mobile.png" />
<img src="desktop.png" />
<!-- KHÔNG SỬ DỤNG ĐOẠN MÃ NÀY -->
Nếu biết về mã HTML, CSS bạn sẽ dễ dàng nhận ra rằng đoạn mã này sử dụng 2 hình ảnh khác nhau cho 2 kích thước màn hinh khác nhau và chỉ hiện thị 1 hình ảnh tùy theo kích thước màn hình. Nhưng có một rắc rối ở đây: cả 2 hình ảnh đều sẽ được tải về. Để trực quan chúng ta quan sát hình ảnh dưới đây:

​
Chúng ta đều biết rằng việc này không tốt chút nào! Thậm chí bạn đang lãng phí thời gian tải trang và băng thông cho một hình ảnh mà chẳng hề được hiển thị.

"Right way"

Để làm điều tương tự, chúng ta có thể "nhét" hình ảnh đó vào CSS và lợi dụng thuộc tính background để làm điều tương tự:

Code:
<!-- CÁI NÀY MỚI NÊN SỬ DỤNG -->
<style>
@media (min-width:376px) {
.myimage {
background-image: url("desktop.png");
width: 700px;
height: 550px;
}
}
@media (max-width:375px) {
.myimage {
background-image: url("mobile.png");
width: 350px;
height: 130px;
}
}
</style>
<div dụng nó, chúng ta sẽ thấy:

​
Cách nạp hình ảnh này tốt hơn nhiều. Tuy nhiên bạn phải lưu ý một điều là để sử dụng được background với kích thước của hình gốc bạn phải khai báo chiều rộng và chiều cao cho nó. Điều này có vẻ khá là rườm rà so với cách thông thường và sẽ mệt mỏi với một số lượng hình ảnh lớn. Tuy nhiên, đây là cách rất tốt để tối ưu tốc độ tải trang.


Xem xét và loại bỏ JQUERY

Nghe có vẻ điên khùng vì thư viện JQUERY được xây dựng để chạy các đoạn mã Javascript và hỗ trợ việc hiển thị, làm sao web có thể sống được nếu thiếu thư viện này

Jquery quả thật rất quan trọng và hữu ích. Nhưng nên nhớ rằng mục tiêu thiết kế ban đầu mà Jquery được sinh ra đó là cung cấp một giao diện thống nhất và phù hợp với chuẩn W3C, cung cấp API phù hợp để hiển thị trên các trình duyệt khác nhau (và tránh phá vỡ các quy chuẩn).

Nhưng giao diện trên Mobile cần rất ít sự hiện diện của Jquery, nhất là trên các trình duyệt Safari, Chrome vì vậy với kích thước lên đến 200Kb nhiều lúc là quá nhiều và không cần thiết. Trong trường hợp bạn chạy nó trong bộ nhớ đệm và nén nó ở mức thấp nhất, nó cũng chiếm đến 30Kb.

Dừng lại suy nghĩ 1 chút ! Chúng ta đang cần một sự đơn giản hóa mà vẫn cung cấp đầy đủ những tính năng cần thiết trên di động như Jquery? Trong trường hợp này, Zepto là một sự thay thế hoàn hảo với những tính năng tương tự Jquery mà đặc biệt là kích thước chỉ vỏn vẹn 5Kb - nhỏ hơn khoảng 6 lần. Zepto tương thích với hầu hết mã Jquery nên hầu như bạn không cần phải chỉnh sửa hay viết lại mã gì cả. Cho nên, đối với một trang web bình thưởng, Zepto là đủ !

Lời khuyên: giảm thiểu các thư viện của bên thứ 3 nếu không cần thiết, xem xét và thay thế JQuery bằng Zepto nếu trang web của bạn cần những thứ căn bản là đủ.


Xem xét các thiết lập bộ nhớ đệm(cache)

Những nhà phát triển thường xem xét để giảm thiểu thời gian tải trang bằng cách tối ưu hóa tài nguyên tải xuống. Nhưng nhà phát triển web thông minh sẽ tính toán sâu hơn bằng cách xem xét và tránh những tài nguyên đã tải xuống ở lần đầu tiên. Nói cách khác, họ sử dụng bộ nhớ đệm (cache) của máy để lưu lại những dữ liệu ở lần tải trước đây và sử dụng lại chúng ở lần tải sau. Nếu hình ảnh, javascript, css của bạn không thay đổi hoặc hiếm khi thay đổi, bạn có thể lưu chúng trong bộ nhớ đệm để sử dụng lại. Bằng cách này tài nguyên có thể chỉ cần tải xuống 1 lần và sử dụng ở nhiều lần kế tiếp.

Bạn có thể sử dụng .htaccess để tạo cache hoặc có nhiều công cụ khác để kiểm tra và thiết lập như bạn có thể sử dụng mod_pagespeed nếu đang chạy Apache, hoặc nếu bạn sử dụng Wordpress thì plugin W3 Total Cache là rất tuyệt vời.

Kết: Cache là nơi rất tuyệt vời để bạn tối ưu hóa tốc độ tải trang, nhất là trên điện thoại. Nếu bạn có một thư viện ảnh, javascript, css và thường xuyên thay đổi (web đang trong giai đoạn phát triển thêm chẳng hạn) thì bạn cần xem xét lại các chính sách cache và xác định thời gian hết hạn hợp lý.

Bạn thích ảnh động (.GIF) - trình duyệt thì không!

Ảnh động GIF thường làm cho website sinh động hơn nhưng GIF sẽ cồng kềnh và nặng nề, đặc biệt là khi bạn gắn vào nó một video chuyển động. Hãy xem xét và thay thế nó bằng Video HTML5 bởi vì hiện nay hầu hết các trình duyệt đều đã hỗ trợ HTML và điểm đặc biệt là video HTML thường có kích thước nhỏ hơn GIF khoảng 10%.

Một lựa chọn khác nữa cho bạn đó là Imgur: khi bạn tải lên một ảnh GIF, trang web này sẽ tự động chuyển ảnh động của bạn sang một định dạng mới là GIFV. Về cơ bản, GIFV chỉ là một video HTML5 nhưng với một kích thước được tối ưu đáng kể.Imgur lưu trữ hình ảnh của bạn và tùy chọn phục vụ GIFV hay GIF phụ thuộc vào việc trình duyệt có hỗ trợ hay không(mặc dù chúng ta đều biết là hầu hết trình duyệt đã hỗ trợ HTML5).

Kết: tránh sử dụng ảnh GIF hoặc các đoạn phim, hình ảnh động phức tạp và thay nó bằng video HTML5 hoặc GIFV. Chúng cung cấp thời gian tải trang vượt trội và hiệu suất làm việc cao hơn.

Tương lai: HTTP/2

Các trang web đang dần dần phát triển theo hướng HTTP/2 và thời điểm này đối với bạn không còn là quá sớm nữa. HTTP/1.1 đã có tuổi đời trên 15 năm và đã bắt đầu có dấu hiệu của tuổi già. Đặc biệt, khi chúng ta nói đến độ tin cậy, sự kết nối liên tục với các thiết bị di động. HTTP/2 đã được các trình duyệt phổ biến hưởng ứng và hỗ trợ bởi máy chủ web. Có thể nó là tương lai của SEO sau này.

Kết luận:

Hãy xây dựng một website thân thiện với thiết bị di động hơn là tinh chỉnh nó theo hướng xây dựng phong cách, giao diện và cố gắng qua mặt những công cụ của Google. Có nhiều yếu tố ảnh hưởng đến tốc độ tải trang, góc nhìn... có thể làm chậm đáng kể trang web của bạn trên di động và tiêu diệt luôn trải nghiệm của người dùng. Rất may mắn là chúng ta có nhiều công cụ để đánh giá và chỉnh sửa có thể giúp bạn đánh giá hiệu suất và tác động. Ngoài những công cụ trên, bạn cũng đừng quên công cụ Google Mobile Friendly rất tốt và trực quan.

Bạn đã đọc hết bài, giờ hãy tiến hành tối ưu cho website của bạn. Nếu có khó khăn hoặc chỗ nào chưa hiểu hãy reply để được giải đáp.