Các phương pháp tối ưu tốc độ website hiệu quả

 27/11/2019 09:47:00 Trịnh Duy Thanh

Các cách tăng tốc độ load website hiệu quả

Xóa bỏ bớt những plugin và tiện ích bổ sung không cần thiết

Phương pháp đầu tiên dùng để tối ưu tốc độ website đó là loại bỏ bớt plugin. Trong trường hợp thấy hệ thống máy của bạn đang bị quá đầy các plugin đang chạy, lại còn là những plug in nặng nữa thì nó sẽ kéo tốc độ tải trang của bạn xuống nhiều, đồng thời còn gây ra thêm những vấn đề bảo mật, giảm cả tính an toàn của website. Vì thế bạn hãy xóa đi những plugin không cần thiết, chỉ nên giữ lại những plugin chất lượng, cần dùng để tập trung hỗ trợ cải thiện tốc độ website.

Xóa bớt plugin không dùng đến

Xóa bớt plugin không dùng đến

Để phát hiện plugin hoặc để kiểm tra, tốt nhất là các bản kiểm tra tốc độ tải trang thông qua các công cụ như: GTMetrix, Google Pagespeed Insights. Các công cụ sẽ tiến hành phân tích tình trạng, sau đó các bạn truy cập vào danh sách plugin và tắt các plugin đó đi. Bạn cũng nên chạy thử lại máy để xem tình hình tốc độ tải trang web đã được cải thiện hay chưa.

Tối ưu hóa mã nguồn website

Việc tối ưu hóa mã nguồn website cũng quan trọng chẳng kém gì so với những phương pháp khác, mà nguồn cũng là một trong những nguyên nhân gây nên tình trạng chậm chạp cho website của bạn. Bạn cần phải chỉnh sửa, loại bỏ đi những yếu tố không cần thiết, giảm tải dung lượng cho mã nguồn.

Với WordPress, thì bạn sử dụng plugin Better WordPress Minify là có thể giúp tối ưu hóa. Nếu bạn không sử dụng CME, thông qua các công cụ tiện ích như Chrome của Chrome Pagespeed Insights để tối ưu mã nguồn. Khi đó, chúng sẽ giúp bạn tạo ra các phiên bản thu nhỏ code. Thêm nữa sử dụng minify CSS và các tập tin Javascript tốt, cả khi các tập CSS, Javascript ở cùng một chỗ cũng sẽ vẫn giúp tăng tốc độ truy cập website lên rất tốt.

Tối ưu hóa, giảm kích thước hình ảnh

Ảnh là yếu tố ảnh hưởng rất lớn đến khả năng tăng tốc độ load trang web. Thử tưởng tượng, website của bạn có rất nhiều ảnh, dung lượng mỗi ảnh lớn, không được tối ưu hóa thì chỉ riêng nó thôi đã ngốn một khoảng lớn tài nguyên của máy rồi. Chính vì thế mà bạn cần xử lý lại ngay, tối ưu hóa và giảm kích thước của chúng đi.

Hãy kiểm tra chi tiết phần dung lượng và kích thước ảnh trên website của bạn. Nên có một mức dung lượng tối đa để áp dụng cho các ảnh khi tải lên, ví dụ như chỉ cho phép dung lượng ảnh tối đa là 100Mb chẳng hạn, vậy thì mỗi khi cần đăng tải ảnh bạn sẽ phải thực hiện nén ảnh, crop lại ảnh để đảm bảo vẫn giảm dung lượng nhưng tính thẩm mĩ được giữ nguyên.

Cắt, chỉnh ảnh để giảm kích cỡ

Cắt, chỉnh ảnh để giảm kích cỡ

Với những bạn nào đang sử dụng Wordpress thì có thể tham khảo cài đặt thêm plugin WPSmush hỗ trợ tự động giảm dung lượng ảnh. Hay trước khi muốn tải ảnh lên, check ảnh qua công cụ tên Tiny PNG cũng để giảm dung lượng ảnh mà không làm ảnh hưởng đến chất lượng ảnh. Caesium cũng là một công cụ nổi tiếng để nén ảnh, đổi đuôi ảnh JPG, PNG,… chất lượng nhé.

  • Thực hiện xóa bỏ những comment ảnh.
  • Định dạng hình ảnh.
  • Chọn đuôi file ảnh là JPEG sẽ tốt nhất (PNG cũng tốt, nhưng một số trình duyệt không hỗ trợ đầy đủ).
  • Khi dùng GIF thì GIF có thể sử dụng với 10×10 pixels, sử dụng 3 bảng màu trở xuống.
  • Không nên sử dụng BMPs hoặc TIFFs..

Giảm thiểu các yêu cầu của HTTP

Dựa vào các thống kê thì phải đến 80% thời gian tải trang là để load các yếu tố của website như: tập lệnh, hình ảnh, stylesheets, Flash… Mỗi một yêu cầu của HTTP yêu cầu thực hiện các lệnh này sẽ làm tăng thời gian tải website.

Bkhost sẽ giới thiệu tới các bạn cách cải thiện tốc độ trang web qua các thao tác cơ bản dưới đây:

  • Sắp xếp hợp lý lại số lượng các yếu tố trên trang.
  • Sử dụng công cụ CSS thay cho hình ảnh khi nào có thể.
  • Sử dụng kết hợp nhiều stylesheets thành một.
  • Giảm thiểu các tập lệnh và đặt chúng ở cuối trang.

Nhìn chung, ngay từ ban đầu bạn nên giảm thiểu nhất có thể các yếu tố, giúp bạn đỡ tốn thời gian chỉnh sửa nhiều, giảm tải được các phần trên website sẽ giúp tổng quan web nhẹ hơn nhiều, tăng hiệu suất tải trang, truy cập nhanh hơn.

Bật bộ nhớ đệm trình duyệt

Bộ nhớ đệm của trình duyệt hay vùng nhớ tạm thời, mỗi lần bạn truy cập website các dữ liệu của website sẽ được lưu tại bộ nhớ đệm này, giúp cho những lần truy cập tiếp theo của bạn dễ dàng hơn, không cần đăng nhập hay điền pass,… Khi có bộ nhớ đệm thì trình duyệt thì trình duyệt của bạn chỉ cần phải tải xuống một phần tài nguyên, phần còn lại sẽ được lưu trữ lại trong bộ nhớ đệm mỗi khi mà bạn muốn truy xuất, thay vì như trước đây hệ thống phải toàn bộ tài nguyên đơn lẻ xuống. Điều này giúp tăng tốc độ website của bạn lên rất nhiều.

Từ lần thứ 2 truy cập web nào đó, trình duyệt máy của bạn cũng tải nhanh gập bội vì không cần gửi yêu cầu truy cập HTTP về máy chủ.

Giảm thời gian phản hồi của máy chủ

Nếu như bạn có đang đặt ra mục tiêu phải giảm thời gian phản hồi của máy chủ xuống chỉ dưới 200ms để nâng cao hiệu quả. Điều đấy là hoàn toàn có thể, bạn có thể làm theo các bước sau đây:

  • Google khuyến cáo sử dụng Web application monitoring solution, kiểm tra để phân tích và tiến hành loại bỏ các yếu tố làm ảnh hưởng đến quá trình tăng tốc độ load website của bạn.
  • Sử dụng các công cụ hộ trợ như Yslow để đánh giá tốc độ trang web, sau đó thực hiện theo các cách khắc phục mà sau khi phân tích Yslow sẽ gợi ý. Công cụ khác cũng chất lượng để bạn dùng đó là PageSpeed của Google để tìm hiểu thêm về hiệu suất tốc độ thực tế.
  • Hoặc có một cách khác đó là bạn nên tìm kiếm một địa chỉ cho thuê máy chủ uy tín, chất lượng để website cảu bạn hoạt động tốt nhất.

Sử dụng Yslow kiểm tra tốc độ web

Sử dụng Yslow kiểm tra tốc độ web

Thuộc tính SRC

Sau khi bạn đã chọn được đúng kích thước thì định dạng mã code cho hình ảnh cũng cần phải đúng. Không nên để mã hình ảnh bị trống.

Trong HTML, mã dùng cho hình ảnh bao gồm: <img src=””>. Khi mã hình ảnh không có thuộc tính SRC, trình duyệt web sẽ yêu cầu chỉ dẫn về thư mục của trang. Việc này làm tăng thêm lưu lượng không cần thiết sử dụng vào máy chủ, có khi người dùng sẽ thấy báo hình ảnh dữ liệu hỏng/không tải được.

Kết luận: bạn nên chỉnh sửa hình ngay từ đầu trước khi bạn tiến hành upload lên. Thêm đủ thuộc tính SRC và chắc chắn có một URL hợp lệ. Bạn cũng có thể tiến hành thêm plugin WP Smush.it vào trang web, nó sẽ phần nào giúp tăng tốc hình ảnh được tải lên nhanh hơn.

Bật chế độ nén

Những trang web có nội dung chất lượng cao hầu hết đều có dung lượng 100Kb trở lên, chúng khá lớn nên đòi hỏi tài nguyên và làm cho tốc độ tải trang bị giảm đi. Điều bạn cần làm lúc này là tiến hành nén lại.

Việc nén sẽ giúp dung lượng băng thông của bạn được giảm đi, giảm phản hồi từ HTTP. Để thực hiện nén bạn có thể sự dụng công cụ hỗ trợ là Gzip. Đa số các máy chủ có thể nén các tệp ở định dạng Gzip, nghiên cứu từ Yahoo đã cho thấy việc nén này làm giảm thời gian tải trang xuống 70%. Bởi 90% lưu lượng internet hiện giờ đều chạy qua trình duyệt hỗ trợ Gzip.

Nén giảm bớt dung lượng

Sử dụng CDN

Khoảng cách vẫn luôn, mãi luôn là một yếu tố làm ảnh hưởng tới website. Vậy thì cách tối ưu hóa tốc độ website trong tình huống này như thế nào?

Khoảng cách từ máy chủ để lưu trữ đến người dùng có thể hiểu đơn giản là ở càng xa thì sẽ web của bạn sẽ chạy càng chậm, tất nhiên rồi vì đường truyền xa. Vậy thì giải pháp lúc này là bạn sử dụng công cụ CDN. CDN sẽ giúp bạn phần phối các tệp trong website trên mạng lưới máy chủ toàn cầu, lúc này khi muốn truy cập website thì bạn sẽ chỉ cần phải đợi để kết nối với máy chủ gần nhất, tốc độ tải web chắc chắn được cải thiện.

Giảm bớt tài nguyên

Nguồn tài nguyên WYSIWYG cho phép bạn có thể xây dựng một website dễ dàng, cấu hình giao diện website theo những gì mà bạn mong muốn đưa tới người dùng. Chính vì vậy mà đôi khi sẽ dẫn đến tình trạng nhiều mã lộn xộn gây ảnh hưởng đến biện pháp cải thiện tăng tốc độ load website. Vậy thì tiến hành loại bỏ đi những tài nguyên không cần thiết.

Để giảm bớt tài nguyên của website thì Memcached là một trong những sự lựa chọn hoàn hảo bởi nó được tích hợp có tác dụng giảm tải cơ sở dữ liệu cho ứng dụng, website và tăng tốc độ truy cập cho trang web của người dùng. Tuy nhiên Memcached là gì thì không phải ai cũng biết.

Theo đề xuất của Google thì bạn nên:

  • Đầu tiên là giảm thiểu HTML, bạn có thể sử dụng công cụ PageSpeed Insights Chrome Extension để tạo ra một phiên bản HTML tối ưu hóa.
  • Tiến hành giảm thiểu CSS, bạn có thể sử dụng cssmin.js.
  • Giảm thiểu JavaScript thì bạn nên sử dụng công cụ như: Closure Compiler, JSMin.

Ưu tiên nội dung lên đầu trang

Khi sử dụng CSS bên ngoài, bạn nên kết hợp ưu tiên nội dung lên đầu trang.

Giảm/Hạn chế chuyển hướng

Khi có chuyển hướng đồng nghĩa với việc sẽ có thêm nhiều yêu cầu được gửi tới HTTP, dẫn đến lại làm tăng thời gian load. Vì thế mà theo Google khuyên dùng thì:

  • Có thể sử dụng chuyển hướng HTTP chuyển hướng người dùng đến phiên bản di động, không sử dụng thêm chuyển hướng trung gian khác thêm.
  • Chèn thêm liên kết <link rel=”alternate”> trên desktop để Googlebot có thể nhận biết, đọc URL phiên bản di động.

Tối ưu CSS Delivery

Tăng tốc độ tải trang web còn có thể được cải thiện hơn nữa qua việc tối ưu CSS Delivery. Cơ chế hiển thị thông tin theo 2 cách đó là: 1 tập tin bên ngoài (chèn vào đầu HTML) và 1 tập tin bên trong (chèn vào trong HTML).

CSS bên ngoài có mẫu dưới đây:

  • <!—Your styles –>
  • <link rel=”stylesheet” type=”text/css” media=”all” href=http://yourURL/style.css />

Tối ưu hóa CSS

Tối ưu hóa CSS

Bkhost khuyên dùng CSS ngoài vì nó giúp giảm dung lượng, kích thước, ít tạo ra mã trùng lặp nữa.

Một trong những cách giúp tốc độ load website được cải thiện đó là sử dụng hệ thống máy chủ ổn định cũng như bạn có thể dễ dàng quản lý thì chắc chắn Cloud Vps là gì là vấn đề mà bạn nên quan tâm.

Tăng tốc độ load website là cực kì quan trọng. Bạn sẽ có thể bị tới 11% số lần người dùng truy cập vào trang, giảm mất 16% về mức độ hài lòng của khách hàng, bỏ đi 7% chuyển đổi nếu như website của bạn bị chậm đi 1s (theo nghiên cứu của Aberdeen Group).

Thông qua bài viết, Bkhost giới thiệu tới các bạn cách tối ưu hóa tốc độ website, nâng cao trải nghiệm người dùng và tối ưu hóa chất lượng cho website của bạn. Chúc các bạn thành công và hãy nhớ đón đọc thêm các bài viết khác trên blog của Bkhost nhé!

Tôi là Trịnh Duy Thanh, hiện đang là CEO & Co - Founder Công ty Cổ Phần Giải Pháp Mạng Trực Tuyến Việt Nam - BKHOST. Với sứ mệnh mang tới dịch vụ trên Internet tốt nhất cho các cá nhân và doanh nghiệp trong nước và quốc tế, tôi luôn nỗ lực hết mình chủ động đầu tư vào phần cứng và nâng cao chất lượng dịch vụ chăm sóc khách hàng để đem đến những sản phẩm hoàn hảo nhất cho người tiêu dùng. Vì vậy, tôi tin tưởng sẽ đem đến các giải pháp CNTT mới nhất, tối ưu nhất, hiệu quả nhất và chi phí hợp lý nhất cho tất cả các doanh nghiệp với mọi quy mô.