Vào tháng Tám vừa qua, nhóm nghiên cứu tại Zoompf công bố một nghiên cứu nghiên cứu chung với Moz, phân tích tốc độ tải của website ảnh hưởng như thế nào đến xếp hạng của nó. Trong nghiên cứu này, kết quả đã khiến mọi người bất ngờ khi cho thấy không có mối liên hệ rõ ràng giữa thời gian tải trang và xếp hạng tìm kiếm. Điều này làm chúng tôi xấu hổ, vì chúng tôi dự kiến sẽ nhìn thấy ít nhất một số tương quan, đặc biệt là sau khi Google công bố trong năm 2010 rằng tốc độ tải trang sẽ có tác động một phần trên thứ hạng tìm kiếm.
Có thể hiểu một cách đơn giản, thời gian tải trang càng nhanh, trải nghiệm người dùng đối với website càng tốt, tỷ lệ hiệu quả sẽ càng cao hơn.
Tin tốt là, không giống những tác động lên thứ hạng tìm kiếm, nhiều nghiên cứu đã chỉ ra mối liên hệ rõ ràng giữa việc cải thiện hiệu suất website và sự gia tăng của tỷ lệ chuyển đổi, sự tham gia của người dùng, và mức độ hài lòng của khách hàng đối với website. Điều này cũng dễ hiểu, chúng ta truy cập vào các website có tốc độ chậm và thoát khỏi trang đó ngay lập tức khi thời gian chờ đợi là quá lâu. Thậm chí nếu sử dụng thiết bị di động thì mức độ kiên nhẫn còn thấp hơn nhiều.
Nói cách khác, ta nhận thấy hiệu suất tải trang chậm có thể tác động to lớn đến tỉ lệ chuyển đổi của website.
Nghiên cứu
Quay lại năm 2006 khi Amazon trình bày một trong những nghiên cứu đầu tiên của mình mang tên “Biến dữ liệu trở nên hữu ích”, nêu lên mối quan hệ rõ ràng giữa thời gian tải trang và doanh thu từ khách hàng trực tuyến. Các thử nghiệm cho thấy cứ mỗi 100 phần nghìn giây chậm trễ sẽ gây ra tổn thất 1% doanh thu cho Amazon.
Trong nghiên cứu gần đây, Intuit cũng đã trình bày những phát hiện của mình về website Velocity khi họ nỗ lực giảm thời gian tải trang từ 15 xuống 2 giây, đồng thời quan sát thấy sự gia tăng đáng kể trong tỉ lệ chuyển đổi đối với mỗi giây thời gian được rút ngắn, cụ thể:
+ 3% chuyển đổi cho mỗi giây giảm xuống từ 15 giây xuống 7 giây
+ 2% chuyển đổi cho mỗi giây giảm xuống từ giây thứ 7 xuống giây thứ 5
+ 1% chuyển đổi cho mỗi giây giảm xuống từ giây thứ 4 xuống giây thứ 2
Trong một báo cáo khác mới đây, Kyle Rush đến từ website “2011 Obama for America” cũng chỉ ra cứ mỗi 3 giây thời gian tải trang được giảm thiểu (từ 5 giây xuống 2 giây), thì website lại được cải thiện 14%, điều này dẫn đến kết quả là đóng góp dành cho cuộc bầu cử đã tăng hơn 34 triệu đô la.
Thực tế, có rất nhiều nghiên cứu chỉ ra mối tương quan giữa lợi ích kinh tế với việc cải thiện hiệu suất website. Ngoài ra, khi lưu lượng truy cập càng cao, tác động của mỗi phần nghìn giây mang lại sẽ càng lớn.
Website cần tải trang nhanh như thế nào?
Bất cứ khi nào bàn về vấn đề hiệu suất website, mọi người luôn luôn muốn biết "Tốc độ trang nên được cải thiện ở mức nào thì phù hợp?" Đây là một câu hỏi khó trả lời, vì kết quả sẽ phụ thuộc vào mục tiêu kinh doanh của bạn. Những đối thủ trong lĩnh vực này có thể khiến bặn đặt mục tiêu tải trang cho website của mình là 2 giây, như trong nghiên cứu của Forrester đã chỉ ra, 47% người sử dụng mong đợi thời gian tải trang ở vào khoảng hai giây hoặc ít hơn 2 giây.
Bạn nên tối ưu hóa website đến mức mà ở đó tỉ lệ ROI vẫn còn giá trị. Lưu lượng truy cập càng cao, sự chênh lệch mà mỗi phần nghìn giây giảm thiểu được sẽ càng nhiều. Nếu bạn là Amazon.com, mức độ cải thiện website vào khoảng 200 phần nghìn giây có thể giúp bạn lời hàng triệu đô la. Nếu website của bạn là website mới, hãy cố gắng giảm thời gian tải trang xuống 4-6 giây.
Hơn hết, bạn phải hiểu mình đang ở đâu, tốc độ tải trang của website mình đang nhanh hay chậm thế nào. Thật may là có công cụ miến phí hỗ trợ bởi Google nhằm đo tốc độ tải trang tại những địa điểm khác nhau, giúp bạn có thể biết được tốc độ tải trang của mình không chỉ ở tại nơi đang đứng mà còn tại những vị trí khác trên toàn thế giới: WebPageTest.org.
Nên bắt đầu từ đâu?
Cải thiện hiệu suất website có vẻ không hề dễ dàng, vì vậy bạn nên bắt đầu từ thấp lên cao. Steve Souders, kỹ sư hiệu suất trưởng tại Google đã từng phát biểu:
"80-90% thời gian hồi đáp cho người dùng cuối là dành cho front-end. Hãy bắt đầu ở đó."
Câu nói này đã trở thành “Quy tắc vàng hiệu suất website”. Nói đơn giản là ngoài việc tối ưu hóa server website và cơ sở hạ tầng của cơ sở dữ liệu đóng vai trò quan trọng, bạn sẽ còn thu về được lợi nhuận cao hơn khi đầu tư vào thời gian load trang thông qua cách tối ưu hóa trước tiên các thành phần front-end được tải trên trình duyệt của người dùng, trong điều kiện tất cả các hình ảnh, tập tin CSS, JavaScript, Flash và các nguồn lực khác được liên kết như những tài sản phải có từ trang HTML cơ sở.
Vậy làm thế nào để tăng hiệu suất front-end và thu về những trải nghiệm tốt hơn cho người dùng? Bạn có thể sử dụng hàng trăm cách để thực hiện điều đó.
Sau đây, chúng ta sẽ tập trung vào các biện pháp thực hành ở mức độ cao nhất do lợi ích chúng mang lại thường khá lớn trong khi chi phí bỏ ra lại thuộc mức thấp nhất.
Bước 1: Giảm kích thước website
Bằng cách giảm kích thước của trang, bạn không chỉ cải thiện tốc độ website mà còn giảm băng thông bị tính phí.
Một giải pháp tối ưu hóa đơn giản là bật chức năng nén HTTP, giúp giảm kích thước của các nguồn văn bản (HTML, CSS và JavaScript ) xuống tới 50% hoặc hơn. WhatsMyIP.org có một công cụ miễn phí tuyệt vời giúp bạn kiểm tra nếu chế độ nén được bật trên website của bạn. Nếu cấu hình máy chủ của bạn được nén đúng cách, nó có thể thúc đẩy hiệu suất một cách đáng kể. Tuy nhiên, hãy nhớ đừng nén hình ảnh trên các máy chủ bởi vì chúng đã được nén trước đó rồi. Thời gian xử lý của server phụ chỉ làm cho website chậm hơn mà thôi.
Ngoài ra, hình ảnh thường chiếm tới 80% hoặc hơn trong tổng kích cỡ của trang tải về, vì vậy tối ưu hóa hình ảnh cũng là việc làm rất quan trọng. Hãy giảm kích thước hình ảnh xuống 50% hoặc nhỏ hơn trong một số trường hợp cần thiết:
- Không sử dụng hình ảnh PNG. Dùng JPEG giúp nén hình ảnh xuống kích thước nhỏ hơn đáng kể, tiết kiệm băng thông nhưng vẫn giữ được chất lượng ảnh tuyệt vời. Ví dụ, trong ngày khởi động Windows 8, Microsoft đã sử dụng hình ảnh PNG có dung lượng 1 megabyte trong khi cũng với bức ảnh đó nếu sử dụng JPEG nó chỉ nặng 140k!
- Không lạm dụng hình ảnh PNG vào mục đích làm cho ảnh hiển thị rõ ràng dễ nhìn. Mức độ trong suốt của ảnh có vai trò rất quan trọng (chức năng này không được hỗ trợ trong JPEG), nhưng nếu không cần thiết, bạn không nên lúc nào cũng cần thêm không gian cho một hình ảnh PNG. PNG hoạt động tốt hơn đối với logo và hình ảnh có độ tương phản sắc nét như văn bản.
- Thiết lập chất lượng hình ảnh JPEG đúng cách. Sử dụng cài đặt chất lượng 50-75% có thể làm giảm đáng kể kích thước hình ảnh của bạn mà không gây ra tác động đáng kể lên chất lượng hình ảnh. Kích thước hình ảnh của bạn nên nhỏ hơn 100k, hoặc có thể nhỏ hơn.
- Loại bỏ siêu dữ liệu không liên quan khỏi hình ảnh. Biên tập viên hình ảnh để lại rất nhiều "rác" trong các tập tin hình ảnh bao gồm cả hình thu nhỏ, bình luận, các mục bảng màu không sử dụng đến... Chúng hữu ích đối với các nhà thiết kế, nhưng lại không cần thiết đối với người dùng. Thay vì lưu lại chúng, bạn hãy nhờ các nhà thiết kế của bạn copy chúng lại, và để bạn chạy các phiên bản hình ảnh của website thông qua công cụ tối ưu hóa miễn phí như Smush.It của Yahoo hoặc các công cụ mã nguồn mở như Pngcrush và Jpegtran.
Cuối cùng, một cách khác để giảm kích thước trang đó là áp dụng rút gọn các tập tin CSS và Javascript. Đây là quá trình loại bỏ các bình luận và không gian trong code, cũng như rút ngắn tên của các biến và chức năng. Hãy nhìn vào ví dụ dưới đây để thấy rõ hơn nhé:
Các trang đã được làm nhỏ vẫn sẽ chứa thông tin và chức năng tương tự, nó thường làm giảm kích thước tập tin xuống 10-20% hoặc hơn so với kích thước ban đầu. Cách này cũng giúp làm cho code trở nên khó hơn, khiến cho đối thủ cạnh tranh khó sao chép hay chỉnh sửa chúng vì mục đích riêng. JSCompress là công cụ trực tuyến cơ bản dùng cho Javascript, hoặc bạn cũng có thể thử một số công cụ mạnh hơn như JSMin hoặc bộ nén YUI của Yahoo (nó cũng sử dụng được với tập tin CSS).
Bước 2: Giảm số lượng các yêu cầu trình duyệt
- Cho phép trình duyệt bộ nhớ đệm. Nếu các yếu tố đi kèm trên website không thay đổi thường xuyên, không nên tải lại chúng nhiều lần. Hãy đảm bảo bộ nhớ đệm được bật cho hình ảnh, tập tin JS và CSS. Bạn có thể kiểm tra bằng cách chèn URL ảnh vào redbot.org và tìm kiếm tiêu đề “Expires” hoặc “Cache-Control: max-age” trong kết quả. Ví dụ, hình ảnh dưới đây không được sử dụng trên trang chủ của eBay sẽ được lưu trữ trong trình duyệt cho các giây thứ 28, 180, 559.
Cache-Control (kiểm soát bộ nhớ đệm) là cách mới, nhưng bạn cũng sẽ phải thường xuyên xem xét “Expires” (ngày hết hạn) để hỗ trợ các trình duyệt cũ hơn. Cache-Control thường ưu tiên những trình duyệt mới hơn.
Trong khi bộ nhớ đệm phía trình duyệt không tăng tốc độ tải ban đầu của website, có một sự khác biệt vô cùng lớn trong lượt xem lại (repeat view), thường chiếm khoảng 70% hoặc hơn trong thời gian tải trang. Bạn có thể thấy rõ điều này khi nhìn vào số liệu "Repeat View" trong một thử nghiệm của WebPageTest dưới đây:
- Kết hợp các tập tin CSS và JS liên quan. Trong khi những tập tin CSS và JS riêng lẻ khiến cho các nhà phát triển dễ dàng duy trì thì số lượng các tập tin ít hơn có thể giúp tốc độ tải nhanh hơn trên trình duyệt. Nếu tập tin của bạn không thay đổi thường xuyên, sự liên hệ giữa chúng thật dễ dàng. Nếu chúng thay đổi thường xuyên, hãy nối các nhóm chức năng liên quan trước khi triển khai nhóm theo khu vực chức năng có liên quan. Mỗi phương pháp tiếp cận đều có những ưu và khuyết điểm riêng của nó.
- Kết hợp hình ảnh nhỏ vào CSS Sprites. Nếu website có nhiều hình ảnh nhỏ (như các nút, biểu tượng, v.v ), bạn có thể tổng hợp chúng vào trong một tập tin hình ảnh duy nhất gọi là "sprite". Thực hiện Sprite không hề đơn giản, nhưng nó có thể mang lại hiệu suất đáng kể, giúp website có trực quan phong phú.
Bước 3: Giảm khoảng cách đến website của bạn
Nếu website của bạn được đặt ở Virginia, nhưng người dùng lại truy cập thông tin từ Úc, điều này sẽ khiến cho website mất nhiều thời gian hơn để tải hình ảnh, JavaScript và CSS. Đây có thể là một vấn đề lớn nếu website đó chứa nội dung nặng và lượng truy cập lớn từ những người dùng ở khoảng cách xa. May mắn là giờ đây chúng ta giải quyết vấn đề này một cách đơn giản: Hãy đăng ký CDN(một hệ thống máy chủ được đặt ở nhiều nơi khác nhau trên thế giới). Có rất nhiều doanh nghiệp đã sử dụng dịch vụ này, trong đó có cả Akamai, Amazon CloudFront, CloudFlare , v.v
Hoạt động của CDN về cơ bản giống như thế này: bạn thay đổi URL của hình ảnh, tập tin JS và CSS từ một địa chỉ site giống như thế này:
http://mysite.com/myimage.png
và biến nó trở thành như này:
http://d34vewdf5sdfsdfs.cloudnfront.net/myimage.png
Sau đó chúng sẽ hướng dẫn các trình duyệt tìm ra hình ảnh của bạn trên mạng CDN. Nhà cung cấp CDN sẽ trả lại hình ảnh đó và gửi đến trình duyệt của bạn nếu nó tìm thấy, hoặc nó sẽ kéo hình ảnh từ website của bạn về và lưu trữ để tái sử dụng sau này đề phòng trường hợp người dùng cần mà không có sẵn. Sự kỳ diệu của CDN là ở chỗ chúng sao chép một hình ảnh (hoặc tập tin CSS hay javascript) thành hàng chục, hàng trăm hoặc thậm chí hàng ngàn bản sao tương tự trên toàn thế giới để có thể gửi đến những vị trí truy cập gần nhất theo yêu cầu của trình duyệt. Vì vậy, nếu bạn đang ở Melbourne và yêu cầu một hình ảnh được lưu trữ trong server ở Virginia, bạn có thể nhận được một bản sao từ Sydney. Thật kỳ diệu phải không nào.
Kết luận
Hiệu suất front-end không phải là nguyên nhân gây ra tác động trực tiếp lên thứ hạng tìm kiếm, nhưng nó ảnh hưởng lớn đến mức độ tin tưởng và tỉ lệ chuyển đổi của người dùng. Do thời gian tải trang cũng có tác động trực tiếp đến trải nghiệm người dùng, nên rất có khả năng nó cũng tác động đến thứ hạng tìm kiếm trong tương lai.
Có rất nhiều cách để tối ưu hóa website, phạm vi bài viết này chỉ đề xuất với các bạn ba nguyên tắc quan trọng cần nhớ khi thực hiện quá trình tối ưu này, đó là:
- Giảm kích cỡ trang web
- Giảm số lượng các yêu cầu trên trình duyệt
- Giảm khoảng cách địa lý đến website của bạn
Mỗi nguyên tắc đều có những chiến lược áp dụng khác nhau dựa trên cấu trúc của từng website. Hãy phân tích website thật cẩn thận trước khi quyết định sử dụng phương pháp nào cho chiến lược tối ưu hóa của mình.
