Ngày nay, tốc độ và hiệu suất website cực kỳ quan trọng hơn bao giờ hết. Sự kỳ vọng của người dùng tăng lên và sự kiên nhẫn sẽ bị giảm xuống. Nếu một website tải quá chậm, người dùng sẽ nhanh chóng di chuyển tới một website khác còn hơn là chờ thêm vài giây. Thậm chí nếu người dùng không rời đi, một website có tốc độ tải chậm chạp cũng sẽ khiến cho người dùng cảm thấy thất vọng, và có khả năng họ sẽ từ bỏ website của bạn ngay cả khi họ đang muốn mua sắm online.
Hơn nữa, Google đã tuyên bố rằng tốc độ của website sẽ ảnh hưởng đến kết quả xếp hạng của site đó trong kết quả tìm kiếm. Vì vậy, để giữ cho cả người dùng lẫn Google tin tưởng, đánh giá cao, thì điều quan trọng là bạn cần phải chú ý đến tốc độ website của mình.
Trong khi tiêu đề bài viết này nói về các phương pháp tối ưu hóa tốc độ website có vẻ đơn giản, nhưng thực đây không phải là điều dễ dàng gì cả. Thay vào đó, những gì mình muốn trình bày trong bài viết này là chia sẻ cho các bạn 5 cách hữu ích nhất bạn có thể sử dụng để tăng tốc độ website.
Dưới đây là 5 cách cơ bản để tăng tốc độ website
1. Dùng gói Hosting chất lượng
Nếu bạn đang sử dụng mã nguồn WordPress, tất cả sẽ bắt đầu bằng việc lựa chọn gói lưu trữ WordPress tại những công ty cung cấp dịch vụ lưu trữ tốt. Thậm chí trước khi nói về tốc độ, bạn phải lựa chọn một công ty đáng tin tưởng với phần cứng nhanh chóng và cơ sở hạ tầng tốt. Nếu nhà cung cấp hosting của bạn không đáng tin cậy, thì bạn không thể biết tốc độ trang xử lý trang web sẽ nhanh hay chậm thế nào. Khách truy cập sẽ bỏ chạy và không bao giờ muốn quay lại website của bạn nữa. Hãy tìm kiếm các trang web review và xem các bài viết đánh giá từ người dùng về chất lượng dịch vụ hosting của công ty cung cấp mà bạn muốn sử dụng.
Quay lại vấn đề tốc độ website, hầu hết các nhà cung cấp dịch vụ hosting, như Bluehost, cung cấp rất nhiều các gói dịch vụ khác nhau, từ shared hosting cho đến máy ảo, máy chủ chuyên dụng, và máy chủ cloud. Chi phí sẽ tăng khi bạn dịch chuyển lên các gói cao cấp hơn và tài nguyên sử dụng đương nhiên cũng sẽ được tăng thêm. Có thể mọi thứ đều ổn khi bạn bắt đầu xây dựng website với gói shared hosting, nhưng nên nhớ bạn cần phải thường xuyên theo dõi lưu lượng truy cập và tài nguyên sử dụng để có thể nâng cấp lên gói hosting tốt hơn trước khi khách truy cập bắt đầu cảm thấy chán nản và bỏ qua website của bạn vì nó bắt đầu chậm dần.
2. Sử dụng caching
Nói một cách đơn giản, cache là một thuật ngữ kỹ thuật nói về việc lưu trữ dữ liệu trong một khu vực lưu trữ tạm thời. Điều này giúp cải thiện hiệu suất website vì phần lớn nội dung của các page được chuẩn bị sẵn trong một khu vực lưu trữ mà không cần phải nạp và xử lý dữ liệu trong database để hiển thị tới người dùng. Nó cũng giúp giảm tải tài nguyên trên nhiều hệ thống khác nhau của server.
Xem thêm: Cache là gì
Trường hợp các bạn đang sử dụng mã nguồn WordPress, mình khuyến khích các bạn nên dùng một số plugin caching được cung cấp bởi nhà cung cấp hosting, vì nó được xây dựng để làm việc một cách hiệu quả nhất trong môi trường đó. Bạn có thể tìm các thiết lập cache trong trang peformance của plugin nhà cung cấp hosting hoặc phần WordPress trong control panel.
Nếu website của bạn không phải là WordPress, sử dụng cache có thể sẽ phức tạp hơn, đòi hỏi bạn phải có một số kỹ thuật lập trình. Để tìm hiểu rõ hơn về cách sử dụng cache từ RAM Disk, các bạn có thể theo dõi bài viết tại đây. Trong trường hợp nào đi nữa, các bạn nên thảo luận với nhà cung cấp dịch vụ hosting để tìm hướng giải pháp tốt nhất cho mình, vì họ thường có những giải pháp và đề xuất tối ưu tốt nhất trên hệ thống của họ.
3. Sử dụng CDN
Có lẽ tiếp theo là cách hiệu quả nhất để tăng tốc độ website là sử dụng Content Delivery Network (CDN). CDN là một mạng lưới các máy chủ trên toàn thế giới cho phép bạn sao chép và lưu trữ nội dung các file, thuộc tính tĩnh trên website của bạn (như video, CSS, javascript, hình ảnh, documents, video,… ). Những thuộc tính này sau đó được phân phối tới khách truy cập từ một server gần nhất so với vị trí máy chủ vật lý của họ. Ví dụ, nếu website của bạn được đặt trên một server tại Mỹ, khách truy cập từ những nơi khác trên thế giới sẽ phải chờ một khoảng thời gian (tương đối) dài cho đến khi nội dung được hiển thị trên trình duyệt. Với CDN, thời gian đó được giảm xuống đáng kể, vì các nội dung tĩnh sẽ được cung cấp từ các máy chủ địa phương (local server) gần chúng ta nhiều hơn so với máy chủ bên Mỹ.
4. Tối ưu hóa hình ảnh
Khi người dùng truy cập website mong muốn những hình ảnh trên site của bạn phải thật chất lượng, kích cỡ của những hình ảnh này sẽ dần trở thành vấn đề lớn đối với tốc độ website của bạn. Hầu hết các hình ảnh có thể được giảm kích cỡ xuống bằng cách sử dụng các công cụ chỉnh sửa đồ họa hoặc phần mềm nén ảnh, mà người dùng khi truy cập sẽ không thể phân biệt được các bước ảnh bị giảm chất lượng xuống.
5. Tối ưu hóa HTML, Javascript, và CSS
Những website và các ứng dụng web hiện nay đang ngày càng phụ thuộc vào CSS và Javascript, do đó, điều quan trọng là bạn cần phải giảm kích thước của những file này lại. Tối ưu hóa những file này là cách tuyệt vời góp phần tăng tốc website. Cụ thể, để tối ưu hóa các têp này nghĩa là ta sẽ loại bỏ các thuộc tính dư thừa có trong file như: comments, khoảng trắng, ngắt dòng để làm cho file có kích thước nhẹ hơn và giảm bớt lượng dữ liệu cần truyền. Do đó ta sẽ có thể giảm tốc độ tải website nhanh hơn một cách đáng kể.
Ví dụ điển hình tối ưu hóa tốc độ – thegioididong.com
Chắc chắn bạn đã từng nghe nói đến thế giới di động (thegioididong.com) rồi phải không? Khi bạn truy cập vào website của họ, bạn sẽ cảm nhận được mọi thứ diễn ra cực kỳ nhanh.
Đối với một hệ thống, thường sẽ được chia ra làm 2 phần bao gồm backend và frontend. Vì mình không thể nào biết trong backend của họ xây dựng những gì, thiết kế website ra sao. Nên chúng ta sẽ cùng phân tích frontend thế giới di động từ một số cách tối ưu mình đã trình bày bên trên.
Theo mình được biết, frondtend của thegioididong không hề sử dụng một framework nổi tiếng nào cả (Anguler, Vuejs,..) mà chỉ dùng HTML, javascript cơ bản và jQuery. Thế nhưng, chính những công nghệ cũ này đã tạo nên một website thế giới di động có tốc độ tải trang nhanh một cách “bá đạo” đấy.
Frontend của họ được tối ưu hóa cực tốt , tiếp theo chúng ta sẽ cùng phân tích xem
1. Kích thước của trang web nhỏ
Mở inspection từ trình duyệt Chrome lên
Tại đây mình mở một page hoàn toàn mới để kiểm tra, thấy toàn bộ trang web bao gồm HTML, CSS, Javascript, … tải xuống chỉ vỏn vẹn 2.2M và mất 912ms.
Quan sát một chút vào một file ảnh, kích cỡ mỗi file ảnh chỉ khoảng 40KB, cho thấy hình ảnh trên website đã được tối ưu hết mức có thể. Bên cạnh đó, họ còn áp dụng kỹ thuật lazy load nghĩa là ta kéo (scroll) website tới đâu, web sẽ được load tới đó. Do vậy có thể tối ưu hóa được lượng dữ liệu tải xuống. Ví dụ, trang web thế giới có 100 sản phẩm hiển thị trên trang chủ, khi bạn truy cập trang chủ, tại màn hình chính chỉ hiển thị 10 sản phẩm thôi, nghĩa là bạn chỉ cần tải 10 hình ảnh sản phẩm tại thời điểm load trang lần đầu tiên.
2. Xử lý CSS và Javascript
Đối với các file javascript của họ tương đối nhỏ chỉ khoảng 400B trở xuống, và sử dụng hotjar. Còn CSS đa số họ bỏ thẳng vào thẻ head của file HTML, đây còn được coi là một mẹo để tăng đốc website, vì trình duyệt không cần phải tải file CSS riêng lẻ, đỡ tốn thời gian render.
3. Cache mọi thứ
Nếu bạn để ý kỹ những tài nguyên trên trang web thegioididong đều có cache-control=31536000 nghĩa là các tài nguyên trên website được cache trong 1 năm.
Do đó, trong một năm, khi bạn load website thì nó sẽ không cần phải tải thêm tài nguyên như hình ảnh, javascript, css nữa. Vừa có thể tăng tốc độ tải website, lại vừa giảm tải hiệu quả.
4.Dùng CDN
Khi view source code của website lên, ta cũng có thể thấy website cũng sử dụng CDN từ dòng code sau:
<!doctype html>
<html lang="vi">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://cdn.tgdd.vn/v2015/Scripts/desktop/detectie/html5shiv.js"></script>
<script src="https://cdn.tgdd.vn/v2015/Scripts/desktop/detectie/respond.min.js"></script>
<![endif]-->
<head>
Kết luận
Để tối ưu hóa và tăng tốc độ website về mặt frontend không hề khó, các bạn chỉ cần thực hiện theo một số các cách ở trên mình đã trình bày là khá ok rồi. Nếu các bạn vẫn chưa tin, hãy tối ưu hóa tốc độ website của mình bằng 5 cách mình đã trình bày nhé, đảm bảo website của bạn sẽ đạt được tốc độ chóng mặt so với lúc chưa tối ưu đấy.
