10 cách để tăng tốc độ website và hiệu suất chuyển đổi đến 7%

February 05, 2018

Bạn có biết? 1.6s website tải nhanh hơn sẽ giúp bạn tăng tỷ lệ chuyển đổi đến 7%.

Tốc độ tải trang, nghe sao mà hàn lâm thế? Mà có thực sự quan trọng không?

Câu trả lời là cực kỳ quan trọng. Bởi tốc độ tải trang ảnh hưởng trực tiếp và tức khắc đến trải nghiệm người dùng và túi tiền của bạn.

Theo thống kê, 1 giây website tải chậm sẽ dẫn đến:

  • 11% giảm trên lượt xem trang
  • 16% giảm sút về độ hài lòng khách
  • 7% tuột dốc trên tỷ lệ chuyển đổi

Cũng dễ hiểu, không ai thích phải chờ đợi cả.

Thêm vào đó, tốc độ tải trang đã chính thức được Google đưa vào các nhân tố xếp hạng website từ 2008. Từ tháng 7/2018, tốc độ tải trang sẽ chính thức trở thành nhân tố xếp hạng trên website di động.

Website tải chậm sẽ bị đánh giá kém về trải nghiệm người dùng, ảnh hưởng trực tiếp đến khả năng SEO và chiến dịch Adwords của bạn.

Nói đến tốc độ tải trang, người dùng thích web tải nhanh.

Càng nhanh càng tốt.

Nhưng thế nào được xem là nhanh?

Thực chất, nhanh không phải là yếu tố cảm tính mà là yếu tố đo lường được.

Cụ thể, người dùng mong đợi website tải trang trong vòng 2 giây.

53%, tức hơn 1 nửa người dùng sẽ thoát trang nếu bạn bắt họ đợi quá 3 giây, theo báo cáo mới nhất từ Google*.

Thực tế, tốc độ tải trang là ấn tượng đầu tiên về trải nghiệm người dùng về website của bạn.

Thử nghĩ xem, người dùng làm thế nào để đánh giá nội dung, bản thiết kế hay thanh điều hướng của website nếu mãi mà nó chưa tải xong?

Các công cụ giúp đánh giá tốc độ tải trang:

  • Pagespeed Insight: công cụ giúp đánh giá và đưa ra các đề xuất cải thiện tốc độ tải trang.
  • Test My Site: công cụ kiểm tra tốc độ website di động trong nỗ lực khuyến khích 1 thế giới Internet nhanh hơn của Google. Công cụ này đưa ra 1 thông số rất thú vị là “ước tính lượng khách hàng bị mất”. Website tải càng chậm, lượng khách bị mất càng nhiều.

Tin tốt là, tốc độ tải trang hoàn toàn có thể cải thiện được. Và dưới đây là 10 cách giúp cải thiện tốc độ tải trang và tăng tốc website.

10 cách tăng tốc độ tải trang

1. Tối ưu hình ảnh

Đây là bước đầu tiên đơn giản nhất để giảm thiểu thời gian tải trang của website, tuy nhiên thường bị lãng quên.

Để tối ưu hình ảnh, bạn cần chú ý đến 3 thuộc tính: kích thước, định dạng và src của hình ảnh

a) Kích thước hình ảnh

Các hình ảnh sử dụng trên các website thường có kích thước lớn và đương nhiên mất nhiều thời gian hơn để tải hoàn tất.

Để giải quyết vấn đề này, bạn có thể áp dụng các cách sau:

  1. Dùng các phần mềm chỉnh sửa hình ảnh cắt hình với kích thước màn hình phù hợp, sau đó giảm chất lượng (nếu cần thiết). Giả sử trang web của bạn rộng 570 px, bạn không nên dùng tấm hình rộng 2000 pixels rồi thiết lập thuộc tính “width=570”. Việc này sẽ làm trì trệ công tác tải trang của trình duyệt và tạo ra trải nghiệm tiêu cực cho người dùng.
  2. Hoặc bạn có thể dùng CDN như Cloudinary để thiết lập kích thước, chất lượng ảnh mong muốn. Cách này đơn giản hơn. Tuyệt nhất là, bạn có thể sử dụng Cloudinary hoàn toàn miễn phí.

b) Định dạng hình ảnh

  • Các hình ảnh có đuôi JPG hay JPEG là sự lựa chọn tốt nhất cho website, tiếp đến là PNG (nếu bạn cần nền trong suốt).
  • Tuyệt đối không dùng ảnh định dạng BMP hay TIFF.

c) Thuộc tính image src

  • Tránh code image src trống, cụ thể, tránh code như vầy "". Bởi khi trình duyệt không tìm thấy source (nguồn) bên trong dấu nháy kép, nó sẽ gửi yêu cầu đến thư mục chứa trang web hay trang web trực tiếp. Điều này tạo ra lưu lượng dư thừa đến máy chủ (server), thậm chí làm hư hỏng dữ liệu của người dùng.

Tóm lại, để tối ưu hình ảnh, bạn cần:

  • Cắt, thay đổi kích thước và giảm chất lượng trước khi dùng cho trang web, sử dụng phần mềm chỉnh sửa ảnh hay CDN như Cloudinary.
  • Ưu tiên định dạng JPG, JPEG, sau đó là PNG. Không dùng BMP hay TIFF.
  • Thêm thuộc tính img src đúng đắn.

2. Giảm số lượng các yêu cầu gửi tới máy chủ (HTTP requests)

Trình duyệt khi cần kết xuất đồ họa (render) 1 trang web sẽ gửi các yêu cầu đến máy chủ. Các yêu cầu render bao gồm các element HTML, CSS, JavaScript, fonts, hình ảnh… Và vì mỗi yêu cầu được gửi đi riêng biệt, nên số lượng yêu cầu càng nhiều, tốc độ tải trang càng chậm.

Vấn đề này rất phổ biến đối với các website dựng trên các theme mua sẵn, bởi đa số theme được viết từ các designer không có chuyên môn về tối ưu code. Thêm 1 điều nữa là, thường web designer, không kể kỹ năng hay kinh nghiệm, thường quan tâm đến visual design hơn là tốc độ tải trang. Hoặc bởi sự thật đáng buồn là, họ không biết phải làm sao. Vì thế, tốc độ và hiệu suất không phải là ưu tiên của họ và thường bị bỏ qua.

Áp dụng các cách sau sẽ giúp bạn giảm đáng kể các yêu cầu gửi đến máy chủ và tăng tốc độ tải trang một cách đáng kể:

  • Giảm bớt các yếu tố dùng trong bản thiết kế – đơn giản mà hiệu quả!
  • Dùng icons như FontAwesome thay vì hình ảnh.
  • Kết hợp các file CSS riêng biệt thành 1 file duy nhất.
  • Kết hợp các file JavaScript riêng biệt thành 1 file duy nhất.
  • Cân nhắc giảm bớt và loại bỏ các Script không cần thiết.
  • Cân nhắc giảm bớt và loại bỏ các plug-in cần tải riêng JavaScript hay CSS của chúng.

3. Thêm dấu gạch xéo vào cuối URL

Việc bỏ qua dấu gạch chéo cuối URL, cho dù là link nội bộ hay link ngoài đều gây ảnh hưởng ngược đến tốc độ tải trang.

Tại sao?

Khi bạn truy cập 1 đường link không có dấu gạch xéo, web server sẽ tìm kiếm tập tin có tên đó. Nếu web server không tìm thấy tập tin có tên yêu cầu, nó sẽ đối xử với tập tin đó như 1 thư mục và tìm kiếm tập tin mặc định trong thư mục đó.

Nói 1 cách khách, việc bỏ qua dấu gạch chéo cuối URL khiến web server phải thực hiện các chuyển tiếp (redirect) 301 không cần thiết.

Việc này kéo dài tốc độ tải trang thêm 1 chút, tuy người dùng thường sẽ khó nhận ra sự khác biệt này. Tuy nhiên, đối với tốc độ tải trang, nếu chúng ta bỏ qua, thì mỗi thứ 1 ít, sẽ kéo trì website của bạn.

Dấu gạch chéo có thể được tự động thêm vào cuối URL bằng .htaccess. Nếu bạn không rành kỹ thuật, bạn có thể đề nghị đơn vị làm website xử lý giúp bạn.

Website do Connected thực hiện đã tự động thêm dấu “/” vào cuối URL để đảm bảo tuân thủ best-practice tối ưu tốc độ website rồi. Bạn không cần phải lo lắng nhé.

4. Kích hoạt nén Gzip

Những trang web giàu nội dung thường có kích thước trên 100 kB và tất nhiên là cần nhiều thời gian để tải hơn. Cách tốt nhất để cải thiện tốc độ là kích hoạt nén – việc này giúp giảm băng thông cần thiết để tải trang, và giảm số lượng phản hồi gửi từ máy chủ. Công cụ Gzip có thể giúp bạn.

Hầu hết các trình duyệt mới đều nén các tập tin dưới định dạng Gzip trước khi gửi chúng đi để tải trên máy khách. Theo Yahoo, công tác này cải thiện đến 70% thời gian tải trang.

5. Kích hoạt bộ nhớ đệm của trình duyệt

Khi kích hoạt bộ nhớ đệm (cache) của trình duyệt, các yếu tố cấu thành của trang web được lưu lại tại trình duyệt của người dùng. Vì thế, khi họ xem trang khác, hay trong lần viếng thăm kế tiếp, trình duyệt sẽ tải trang nhanh hơn nhiều vì không phải gửi thêm yêu cầu HTTP cho các yếu tố cấu thành trang web đến máy chủ nữa.

Nhưng hãy chú ý rằng, 40-60% khách truy cập website với trình duyệt có bộ nhớ đệm trống, vì vậy, vấn đề cấp thiết là bạn vẫn phải đảm bảo tốc độ tải trang đủ nhanh cho lần đầu tiên. Hãy nhớ, khách sẵn sàng rời trang nếu họ phải đợi quá 3 giây.

Với những tài nguyên có thể lưu được tại bộ nhớ đệm như JS, CSS, hình ảnh, tập tin đa phương tiên, v..v..) thiết lập thời gian hết hạn ít nhất 1 tuần cho đến không quá 1 năm.

6. Tối ưu các nguồn tài nguyên

Tài nguyên WYSIWYG (What You See Is What You Get) giúp bạn dễ dàng soạn thảo và tạo ra trang web, nhưng chúng thường xuyên tạo ra những dòng code lộn xộn khiến website của bạn tải chậm đáng kể.

Vì mỗi dòng code không cần thiết sẽ tạo thêm gánh nặng tải cho website, bạn nên loại bỏ các khoảng trắng, xuống dòng, khoảng thụt đầu dòng, bình luận, không cần thiết để code của trang web gọn nhẹ nhất có thể.

May mắn là bạn không phải làm công việc này bằng tay bằng có thể nhờ sự trợ giúp của các công cụ. Google đề nghị dùng HTMLMinifier để tối ưu tập tin HTML, CSSNano và csso cho CSS, UglifyJS, Closure Complier cho JavaScript.

Lưu ý là việc này có thể dẫn đến bể CSS hay JavaScript. Vì vậy, sau khi tối ưu các nguồn tài nguyên, để chắc chắn không có việc không mong muốn xảy ra, bạn hãy kiểm tra lại toàn bộ website nhé!

7. Ưu tiên tải nội dung phần nửa trên của website (About the Fold)

Trang web của bạn sẽ trở nên có vẻ tốc độ hơn nếu phần nửa trên website được tải hoàn thành trước khi người dùng kéo xem các phần khác.

Việc này có thể được thực hiện theo các bước sau:

  • Đặt các yếu tố cấu thành của phần nửa trên website vào phần mở đầu của tập HTML để trình duyệt tải và kết xuất đồ họa các yếu tố này trước.
  • Đặt code CSS và Javascript inline thay vì file CSS ngoài.

8. Giảm các liên kết chuyển tiếp

Các liên kết chuyển tiếp (redirects) tạo ra thêm các yêu cầu HTTP gửi đến máy chủ và vì thế, làm chậm tốc độ tải trang. Hạn chế tối thiểu các liên kết chuyển tiếp sẽ có lợi cho tốc độ trang web của bạn.

Trong trường hợp website của bạn từng sở hữu 2 phiên bản máy tính và di động (thường có dạng m.domain.com) và mới được nâng cấp sang phiên bản responsive, khả năng cao là website của bạn đang có kha khá liên kết chuyển tiếp từ phiên bản di động sang phiên bản responsive.

Điều này không hay cho lắm. Google đề nghị 2 bước giúp đảm bảo các liên kết chuyển tiếp này không làm trì trệ tốc độ tải trang của bạn.

  • Sử dụng HTTP redirect để chuyển tiếp khách xem dùng phiên bản di động đến link tương ứng phiên bản responsive mà không tạo ra chuyển tiếp ngay lập tức.
  • Thêm markup vào vào phiên bản máy tính để giúp Google bot xác định URL tương ứng trên phiên bản di động.

Sao nghe sặc mùi kỹ thuật phức tạp quá zậy?

Bài viết này mục đích là cung cấp thông tin cho các đối tượng độc giả khác nhau. Bạn yên tâm, nếu bạn không muốn đào sâu về kỹ thuật, khi chọn dịch vụ nâng cấp website tại Connected, chúng tôi sẽ lo hết các việc này cho bạn.

9. Giảm thời gian phản hồi máy chủ

Thời gian phản hồi máy chủ là khoảng thời gian cần để tải tập HTML từ máy chủ xuống máy khách (client). Thời gian phản hồi máy chủ thường được đo lường bằng thời gian tải byte đầu tiên (Time to First Byte).

Google đề xuất các trang web nên giảm thời gian phản hồi máy chủ xuống hơn 200 mili giây.

Nếu bạn làm theo các đề xuất phía trên, bạn hoàn toàn có khả năng tạo website đáp ứng yêu cầu từ Google.

Nếu không bị giới hạn về ngân sách, bạn hãy cân nhắc nâng cấp gói hosting VPS. Tránh chọn hosting giá rẻ bèo (thực ra tiền nào của nấy thôi) – nó sẽ ảnh hưởng xấu đến tốc độ tải trang bạn đang cần cải thiện.

10. Dành cho website nền Wordpress - loại bỏ các plug-in trên site của bạn

Với đặc tính dễ cài đặt, kho giao diện và plug-in phong phú, website trên nền Wordpress đang chiếm đại đa số.

Bạn chỉ cần 10 - 15 phút để cài đặt mã nguồn lên máy chủ, rất đơn giản.

Nhưng cài đặt thì dễ, còn công tác tối ưu hiệu suất website thì ít ai bàn tới. Chọn được nhà cung cấp dịch vụ có tâm còn đỡ, nếu không, bạn sẽ thấy giật mình khi phát hiện có gần 2 chục plug-in được cài đặt 1 cách tùy tiện trên website của mình.

Việc cài đặt plug-in vô tội vạ là 1 trong những nguyên nhân hàng đầu dẫn đến website tốc độ ốc sên (chưa kể đến các lỗ hổng bảo mật). Vì thế, hãy cân nhắc xóa bỏ tất cả những plug-in không cần thiết một lần và mãi mãi.

Kết luận

Trong 10 cách giúp tăng tốc website kể trên, có cách dễ, có cách đòi hỏi kiến thức về web và máy chủ có thể khiến những bạn không rành kỹ thuật nản lòng.

Trong trường hợp đó, nếu bạn thực sự muốn tìm hiểu sâu hơn, bạn có thể tham khảo thêm các hướng dẫn về tối ưu hiệu suất website từ Google hoặc chọn đơn vị cung cấp dịch vụ thiết kế website chuyên nghiệp như Connected để xử lý toàn bộ các yêu cầu cho bạn.

Tại Connected, chúng tôi tư vấn miễn phí về thiết kế và tăng tốc website giúp bạn tối ưu tỉ lệ chuyển đổi. Gọi cho chúng tôi qua số hotline 090 36 36 270 hoặc đề nghị một cuộc gọi lại. Tư vấn viên sẽ liên lạc với bạn ngay trong vòng 2 giờ làm việc.
Tham khảo những dự án website chúng tôi đã thực hiện tại đây.

Nếu bạn cần giúp đỡ hay có ý kiến đóng góp, hãy comment phía dưới nhé. Connected rất hoan nghênh comment của bạn.

Tham khảo:


Liên hệ

Trụ sở chính
61 Mai Xuân Thưởng, P.3, Q.6, TP.HCM
Hotline
090.3636.270
Email
info@connected.com.vn

Kết nối

Về Connected

Made with ❤️ by Connected