Cách cải thiện tỉ lệ chuyển đổi thông qua tốc độ tải trang

Nhiều người cho rằng thời gian tải trang có thể tác động trực tiếp đến thứ hạng tìm kiếm của website, nó cũng ảnh hưởng rõ rệt lên trải nghiệm người dùng, do đó trong tương lai, tác động này sẽ ngày càng gia tăng. Nói cách khác, thời gian tải trang nên là ưu tiên hàng đầu của nhà phát triển khi đánh giá thành công của một website.

Nhưng vấn đề ở đây là mức độ ưu tiên nên lớn đến cỡ nào? Tất nhiên điều này còn tùy vào từng trường hợp: tốc độ load của website càng chậm, trải nghiệm bạn cung cấp cho người dùng càng bị tụt lại phía sau so với đối thủ cạnh tranh. Ngoài ra, website càng nhận được nhiều lưu lượng truy cập, lợi ích bạn nhận được từ tối ưu hóa hiệu suất sẽ càng cao.

Không giống những tác động có thể xảy đến với thứ hạng tìm kiếm, nhiều nghiên cứu độc lập đã chỉ ra nguyên nhân 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. Nó chỉ có ý nghĩa khi tất cả 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 chúng ta sử dụng thiết bị di động thì mức độ kiên nhẫn còn thấp hơn nhiều.  

Mặc dù điều đáng ngạc nhiên ở đây chỉ là tác động to lớn của hiệu suất tải trang chậm có thể ảnh hưởng đến tỉ lệ chuyển đổi của website. Hãy cùng xem xét điểm này đầu tiên nhé.

Nghiên cứu

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 trên website Velocity về những nỗ lực của hãng trong việc giảm thời gian tải trang từ 15 đến 2 giây. Trong suốt quá trình thực hiện, họ đã nhận 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, kết quả cụ thể như sau:

+ 3% chuyển đổi cho mỗi giây giảm từ 15 giây xuống 7 giây

+ 2% chuyển đổi cho mỗi giây giảm từ giây thứ 7 xuống giây thứ 5

+ 1% chuyển đổi cho mỗi giây giảm từ giây thứ 4 xuống giây thứ 2

Nói cách khác, quá trình tối ưu hóa này bước đầu đã mang lại giá trị to lớn, và giá trị giảm dần khi tốc độ website trở nên nhanh hơn.

Trong một báo cáo khác mới đây, Kyle Rush đến từ website “chiến dịch tranh cử của Obama năm 2011” cho thấy thông qua thử nghiệm A/B cứ một 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 quan hệ giữa lợi ích kinh tế rõ ràng với việc cải thiện hiệu suất website, rõ ràng tốc độ load trang càng chậm, bạn càng phải giành về nhiều thứ hơn. Ngoài ra, 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 nên có tốc độ 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 quả là một câu hỏi khó trả lời, vì kết quả sẽ phụ thuộc chủ quan vào mục tiêu kinh doanh của bạn. Những người trong lĩnh vực này có thể giúp website của bạn chỉ mất nhiều nhất là 2 giây load trang , 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 thì càng tốt.

Bạn nên tối ưu hóa website đến mức mà ở đó tỉ lệ ROI vẫn còn giá trị đầu tư. Lưu lượng truy cập càng cao, sự chênh lệch chi phí mà mỗi phần nghìn giây giảm thiểu được sẽ càng nhiều hơn. 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 đồng nghĩa với việc bạn sẽ thu về hàng triệu đô la tiền lời. Nếu bạn vừa tung ra một website mới, thì thời gian tải trang ở vào khoảng 4-6 giây là phù hợp.

Tôi 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 điều quan trọng là bạn nên bắt đầu với “những trái cây treo thấp”. 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à ở trong front-end. Hãy bắt đầu từ đó.”

Câu nói này đã được coi là “Quy tắc vàng cho hiệu suất website” kể từ đó. Trong các thuật ngữ của người không chuyên, điều này có nghĩa là chừng nào tối ưu hóa server website và cơ sở hạ tầng của cơ sở dữ liệu còn đóng vai trò quan trọng, thì 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. Điều này có nghĩa 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ở.

Bạn có thể thấy “Quy tắc vàng cho hiệu suất website” được minh họa rõ ràng trong biểu đồ thác nước điển hình được các công cụ như WebPageTest trả về. Tạo trang cơ sở ban đầu ở vị trí tất cả các hoạt động của máy chủ back-end được thực hiện. Tuy nhiên, tất cả các nguồn lực khác đi kèm trong trang đó (như hình ảnh, CSS, v.v) sẽ lấy đi thời gian tải trang đáng kể:

Vậy làm thế nào bạn có thể tăng tốc độ hiệu suất front-end và thu về những trải nghiệm tốt hơn cho người dùng? Câu trả lời là bạn có thể sử dụng hàng trăm cách khác nhau nhé. Trong phần dưới đây, chúng ta sẽ tập trung vào các biện pháp thực hành ở mức độ cao 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 cỡ trang web

Nội dung cồng kềnh sẽ khiến website mất rất nhiều thời gian để load. Bằng cách giảm kích thước của trang, bạn không chỉ cải thiện tốc độ cho website mà còn làm giảm băng thông mạng sử dụng thường bị nhà cung cấp hosting tính phí.

Một giải pháp tối ưu hóa dễ dàng đó là nén HTTP, việc này thường làm giảm kích thước của các nguồn văn bản (HTML, CSS và JavaScript ) xuống mức 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. Khi sử dụng, đừng chỉ kiểm tra URL trang chủ, hãy kiểm tra các liên kết đến JavaScript và các tập tin CSS. Thông thường chúng ta có thể tìm thấy bộ nén được bật đối với các tập tin HTML, nhưng lại không bật cho tập tin CSS và JavaScript. Nếu máy chủ của bạn được cấu hình chức năng nén đúng cách, nó có thể thúc đẩy hiệu suất tiềm năng 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.

Nếu bạn nhận thấy server không sử dụng chức năng nén, hãy nói chuyện với quản trị hoặc nhà cung cấp hosting để bật tính năng này. Đây thường là thiết lập cấu hình đơn giản.

Ngoài ra, hình ảnh thường đóng góp 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 thực hiện theo các biện pháp dưới đây để cắt 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. JPEG nén hình ảnh xuống kích thước nhỏ hơn đáng kể 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, trang chủ của 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! Hãy nghĩ đến tất cả các băng thông lãng phí mà bạn có thể giảm thiểu trên một hình ảnh nhé!

– 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ó tác động rất lớn (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, đặc biệt là với các bức ảnh chụp. 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. Tất nhiên, mỗi kết quả sẽ mỗi khác. Trong nhiều trường hợp, tất cả các kích thước hình ảnh của bạn nên nhỏ hơn 100k, hoặc nhỏ hơn thì càng tốt.

– Loại bỏ siêu dữ liệu không liên quan từ hình ảnh của bạn. Người biên tập 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 và nhiều thứ nữa. Chúng là những thứ 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. Hãy nhờ các nhà thiết kế của bạn tạo một bản sao lưu để họ có thể sử dụng riêng, và sau đó 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 nữa để giảm kích thước trang đó là sử dụng công nghệ Minify tập tin CSS và Javascript. Đây là quá trình loại bỏ các bình luận phụ và không gian trong code, cũng như rút ngắn tên của các tham biến và chức năng. Hãy nhìn vào ví dụ dưới đây để thấy rõ hơn nhé:

Ví dụ: Javascript gốc

Phiên bản sau khi đã sử dụng Minify (từ chức năng nén của YUI):

var old=$.fn.alert;$.fn.alert=function(a){return this.each(function(){var c=$(this),b=c.data("alert");if(!b){c.data("alert",(b=new Alert(this)))}if(typeof a=="string"){b[a].call(c)}})};

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 mang lại lợi ích bổ sung đó là làm cho code trở nên khó hơn, đề phòng trường hợp đối thủ cạnh tranh sao chép hay chỉnh sửa chúng vì mục đích riêng. JSCompress là một công cụ trực tuyến cơ bản và dễ dàng sử dụng cho Javascript, ngoài ra, 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

Càng nhiều tài nguyên mà trình duyệt yêu cầu cung cấp cho người dùng, thời gian tải trang sẽ càng lâu. Một chiến lược tuyệt vời để giảm thời gian tải trang đó là cắt giảm số lượng các yêu cầu mà trang web phải thực hiện. Điều này có nghĩa là hình ảnh, tập tin JavaScript, và cảnh báo phân tích sẽ ít hơn. Đó là lý do vì sao trang chủ của Google lại nhỏ gọn và thoáng đến vậy, giao diện sạch sẽ với ít các yếu tố đi kèm sẽ làm cho tốc độ tải trang được cải thiện hơn đáng kể.  

Tuy nhiên mục tiêu này không phải lúc nào cũng có thể thực hiện được, dưới đây là một số chiến lược bổ sung để bạn có thể tham khảo và áp dụng khi cần thiế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 có lý do gì để trình duyệt nên tải lại chúng hết lần này đến lần khác. Hãy nói chuyện với quản trị server để đảm bảo bộ nhớ đệm được bật cho hình ảnh, tập tin JS và CSS. Bạn có thể thử nghiệm nhanh chóng bằng cách chèn URL của một trong những hình ảnh của bạn 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 thức mới mẻ để thực hiện, nhưng bạn cũng sẽ phải thường xuyên xem xét “Expires” để hỗ trợ các trình duyệt cũ hơn. Nếu bạn xem xét cả hai tiêu đề, thì Cache-Control sẽ “thắng” đối với các 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, nó sẽ tạo ra sự khác biệt vô cùng lớn trong mục đánh giá lặp lại, 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 bảo vệ và duy trì thì số lượng các tập tin có thể đạt tốc độ tải nhanh hơn trên trình duyệt càng ít hơn. Nếu tập tin của bạn không thay đổi thường xuyên, hãy kết nối chúng lại với nhau. Ngược lại, nếu chúng thay đổi thường xuyên, hãy tự động ghép nối các nhóm chức năng liên quan trước khi triển khai 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 (kỹ thuật đặt tất cả các hình ảnh vào 1 file hình duy nhất, sau đó dùng thuộc tính background-position của CSS để hiện ra đúng vị trí cần thiết). Nếu website của bạn có nhiều hình ảnh nhỏ (như các nút, biểu tượng, v.v ), bạn có thể nhận ra lợi ích hiệu suất đáng kể bằng cách kết hợp tất cả 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ể cho các 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 có thể sử dụng một cách đơn giản để giải quyết vấn đề này: 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.

Để minh họa, hãy xem hình ảnh bên trái (máy chủ tập trung) và hình ảnh bên phải (nội dung trùng lặp trên toàn thế giới):

Kết luận

Trong khi hiện nay, 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 rõ rệt đến mức độ tham gia 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.

Trong khi 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 cốt lõi 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. Tại Zoompf, chúng tôi cũng giới thiệu một số công cụ miễn phí có thể giúp bạn xác định các vùng sẽ tạo ra tác động lớn nhất, cùng một số công cụ miễn phí để phân tích website của bạn nhằm phát hiện ra vấn đề trong hơn 400 nguyên nhân phổ biến làm chậm hiệu suất front-end. Bạn có thể tìm thấy chúng ở địa chỉ: http://zoompf.com/free.

Xuân Trung