Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
6 Cách Cải Thiện Tốc Độ Website 2021

6 Cách Cải Thiện Tốc Độ Website 2021


Ngày 17 Tháng 6 Năm 2021

Tốc độ trang web được xem là một trong những yếu tố quan trọng hàng đầu mà bạn cần lưu ý khi xây dựng và thiết kế website (đặc biệt là các trang bán hàng). Nó sẽ quyết định khách hàng sẽ tiếp tục ở lại và mua hàng trên trang web của bạn hay không. Ngoài ra nó cũng tác động đến thứ hạng website của chúng ta trên các công cụ tìm kiếm như Google, Bing... Do đó trong bài viết hôm nay mình sẽ hướng dẫn bạn một số cách để cải thiện tốc độ website nhé!

Tăng Tốc Độ Website

Tối Ưu Hình Ảnh Cho Website

Hình ảnh được xem là một yếu tố không thể thiếu trong các trang web hiện nay đặc biệt là các website bán hàng (Càng nhiều hình ảnh về sản phẩm thì khách hàng càng có thêm nhiều thông tin, khả năng mua hàng sẽ được nâng cao). Nhưng nếu chúng ta sử dụng quá nhiều hình ảnh thì sẽ gây ra tình trạng trang web bị load chậm. Do đó bạn nên nén hình ảnh trước khi tải lên máy chủ.

Tối Ưu Hình Ảnh Video Cho Website

Bạn có thể tham khảo các công cụ compress image ở đây nhé.

Sử Dụng Đúng Kiểu Định Dạng Cho Hình Ảnh.

Hiện nay có rất nhiều kiểu định dạng khác nhau được sử dụng cho hình ảnh do đó mình sẽ liệt kê các chức năng chính của từng loại hình ảnh nha.

  • JPEG là một định dạng thích hợp sử dụng cho website với tính năng chính là dung lượng thấp bằng cách tối ưu các thẻ data cho image.
  • PNG thích hợp sử dụng cho các loại hình ảnh chất lượng cao.
  • Gif thích hợp sử dụng cho các hình ảnh dạng chuyển động.
  • Webp là một định dạng hình ảnh mới giúp giảm hơn 25% đến 35% kích thước so với các định dạng khác.(Được Google khuyến khích sử dụng).

Dùng Dịch Vụ CDN Image.

CDN image là dịch vụ chuyên cung cấp nơi lưu trữ, tối ưu và xử lý hình ảnh dành cho website.

CDN image

Các dịch vụ cdn image phổ biến là:

Nếu bạn muốn tham khảo chi tiết từng dịch vụ CDN image thì truy cập ở đây nha.

Sử Dụng Lazy Loading

Do đó Lazy Loading ra đời để giúp bạn có thể cải thiện và tối ưu hiệu suất cho các thành phần ảnh hưởng đến quá trình tải trang như là video, hình ảnh... bằng cách chỉ tải trước các nội dung được yêu cầu và sau đó sẽ tải các thành phần khác khi người dùng thật sự cần tới. Và để hiểu rõ hơn bạn xem hình ảnh sau nhé!

Trang Web Được Sử dụng lazy loading

Có hai lợi ích chính khi chúng ta sử dụng lazy loading là:

  • Cải thiện hiệu suất: Bạn sẽ giảm được số lượng thành phần cần phải tải trong trang web. Từ đó thời gian mà trình duyệt xử lý và phân tích sẽ được cải thiện hơn. Do đó nội dung website đến với người dùng sẽ nhanh hơn.
  • Giảm Chi phí: Có một số hosting lưu trữ hình ảnh thì sẽ tính chi phí dựa trên số byte mà bạn sử dụng. Do đó kỹ thuật này sẽ giúp bạn tránh được tình trạng tải các thành phần trên website mà người dùng không bao giờ dùng tới.

Nếu bạn muốn tìm hiểu thêm về cách sử dụng lazy loading cho trang web thì có thể tham khảo ở đây nhé!

Sử Dụng CDN Dành Cho Trang Web

CDN (Content Delivery Network) là một hệ thống máy chủ toàn cầu với nhiệm vụ chính là lưu trữ các file tĩnh như HTML, CSS, Javascript, hình ảnh... cho website của bạn. Nó được ra đời vào cuối những năm 1990 và được xem là một giải pháp giúp giảm bớt sự tắc nghẽn về hiệu suất cho Internet. Ngày nay thì CDN phát triển rất nhanh với nhiều dịch vụ tiện ích khác như là video streaming(phát trực tuyến video), load balancing(cân bằng tải), phát âm thanh trực tiếp, bảo mật chống DDoS, tường lửa cho ứng dụng web...

Ví Dụ Về CDN

Ví dụ nếu bạn có một website đặt hosting ở nước ngoài thì người dùng ở Việt Nam khi muốn kết nối website của bạn sẽ mất một khoảng thời gian khá lâu do đường truyền dữ liệu tới máy chủ ở khá xa so với khách hàng. Còn khi website của bạn sử dụng CDN thì các trạm máy chủ(data center) được đặt khắp nơi trên thế giới. Do đó nó sẽ căn cứ vào vị trí hiện tại của người dùng để thiết lập và lấy dữ liệu từ máy chủ gần nhất để gửi dữ liệu đến khách hàng từ đó tốc độ tải trang của bạn sẽ được giảm đáng kể.

Bạn có thể tham khảo các CDN dành cho website ở đây nhé!

Minify Và Gộp Các File Lại Với Nhau

HTTP Request là hành động yêu cầu của trình duyệt để tải các thành phần trang web từ máy chủ như là hình ảnh, file HTML, CSS style sheet, Javascript... Nếu các thành phần này càng nhiều thì sẽ gây ra tình trạng load chậm cho website.

Để giải quyết vấn đề này thì mình nghĩ bạn nên gộp lại các file CSS, Javascript... để giảm bớt các yêu cầu tới máy chủ lưu trữ website.

Ngoài ra nếu bạn muốn giảm kích thước của các file HTML, CSS, Javascript...(nhằm tăng tốc độ xử lý của trình duyệt) thì chúng ta có thể sử dụng công cụ minify như hình dưới đây nhé.

Tối Ưu Hình Ảnh Video Cho Website

Bạn có thể tham khảo Công cụ minify ở đây nha.

Lựa Chọn Gói Hosting Phù Hợp Cho Website

Thông thường các dự án web sẽ thường khác nhau về quy mô, số lượng khách hàng truy cập, mức độ yêu cầu khả năng xử lý của máy chủ... do đó người ta sẽ chia web hosting thành 6 dạng chính để phù hợp với mục đích, nhu cầu của khách hàng :

  • Shared Web Hosting: Trang web của bạn được lưu trữ trên cùng một máy chủ với các website khác. Điểm mạnh của loại này là chi phí rẻ thường phù hợp với các blog cá nhân, doanh nghiệp vừa và nhỏ.
  • Virtual private servers (VPS): Cũng dùng chung một máy chủ nhưng nó sẽ cung cấp thêm cho bạn máy chủ ảo riêng với toàn quyền truy cập để cấu hình cho trang web. Theo mình thấy thì loại này bảo mật tốt hơn so với Shared Web Hosting. Nếu website của bạn đã phát triển đủ lớn và nhiều lượng truy cập thì mình khuyên nên sử dụng VPS để làm hosting cho website.
  • Dedicated Hosting: Nó cung cấp cho bạn máy chủ chuyên dụng mà không chia sẻ máy chủ với các trang web khác. Bạn có toàn quyền kiểm soát như tích hợp những ứng dụng thích hợp mà bạn thích, thực hiện thay đổi với các hệ điều hành, cấu hình lại máy chủ... Tuy nhiên giá thành để sử dụng thì hơi cao và cần phải kiến thức tốt để thiết lập dịch vụ cho máy chủ.
  • Cloud Hosting: là máy chủ ảo được chạy trong môi trường điện toán đám mây và giải pháp có thể nói là đang hot ở thời điểm hiện tại. Điểm mình cực kỳ thích ở dịch vụ này là nếu máy chủ gặp sự cố thì sẽ được tự động chuyển sang máy chủ khác ngay lập tức, nó giúp người dùng lúc nào có thể truy cập trang web của bạn bất kỳ thời điểm nào. Đồng thời chi phí trang web sử dụng.
Những Loại Web Hosting

Bạn có thể tham khảo các dịch vụ hosting website ở đây nhé!

Tối Ưu HTM

Vị trí đặt CSS và Javascript:
Điều đầu tiên bạn cần phải ghi nhớ là luôn đặt file CSS ở phía trên Javascript để giúp hiển thị giao diện nhanh nhất khi người dùng truy cập website. Thông thường thì mình sẽ đặt file CSS ở trong thẻ head và file Javascript thì đặt ở dưới cùng trong thẻ body.

Sử dụng phương pháp preload:
Nó giúp bạn có thể tìm và tải trước các tài nguyên cần thiết cho website và lưu trữ vào bộ nhớ đệm của trình duyệt. Sau này khi người dùng di chuyển đến nội dung khác trong website thì nó có thể sử dụng ngay lập tức mà không cần phải tải lại.

Hạn chế sử dụng iframes trong trang web ít nhất có thể.

Tối Ưu CSS

Giảm kích thước file CSS:
Bạn có thể sử dụng các ứng dụng để tìm các thuộc tính CSS không cần thiết cho website và loại bỏ nó như:

Hạn chế dùng tính năng @import:
Vì nó sẽ tăng thời gian load trang vì phải đợi download các phần được import trong CSS.

Sử dụng preload CSS:
Do file CSS là dạng render-blocking resources (bắt buộc phải tải trước khi render website) do đó chúng ta có thể sử dụng thuộc tính preload để yêu cầu tìm và nạp trước các file CSS.

<link rel="preload" href="styles.css" as="style">

Hạn chế dùng các thuộc tính CSS border-radius, transform, position: fixed, filter, opacity, box-shadow:
Vì đây là các thuộc tính CSS làm chậm quá trình tải trang.

Không sử dụng inline style trực tiếp cho phần tử HTML.

Đối với các file CSS nhỏ bạn có thể trực tiếp nhúng vào website thông qua thẻ style để giảm chuyển hướng khi load trang.

Hạn chế sử dụng !important trong CSS.

Tối Ưu Javascript

Sử dụng async và defer :
Đối với các đoạn mã chưa cần thực hiện ngay lập tức thì chúng ta có thể sử dụng lệnh defer hay async để tăng tốc độ tải trang.
Nếu bạn muốn tìm hiểu thêm về cách sử dụng async và defer thì truy cập ở đây nhé.

Thường xuyên update thư viện :
Bạn nên cập nhật các thư viện javascript thường xuyên để tối ưu cũng như tăng tính bảo mật cho trang web.

Sử dụng công cụ module bundler :
Module Bundler là công cụ giúp các lập trình viên có thể gộp các Javascript modules thành một tệp duy nhất và thường được dùng để chạy trong trình duyệt.

Sử Dụng Công Cụ Kiểm Tra Trang Web

Nó sẽ giúp bạn phân tích đầy đủ các yếu tố ảnh hưởng tới tốc độ website để từ đó chúng ta có thể cải thiện trang web tốt hơn:

  • Time to First Byte: Thời gian từ khi trình duyệt gửi yêu cầu trang và thông tin đầu tiên được máy chủ trả về.
  • Xác định thời gian tải của các file HTML, CSS, Javascript.
  • Kiểm tra tốc độ trên nhiều trình duyệt phổ biến và địa điểm trên thế giới.
  • Kiểm tra định dạng và kích thước hình ảnh, font...
  • Tìm các file lớn làm chậm quá trình load trang.
  • Kiểm tra và phân tích HTTP header.
  • Thời gian người dùng có thể tương tác trên trang web.

Kiểm tra tốc độ website

Để tham khao các công cụ này bạn có thể truy cập ở đây nha.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những cách tăng tốc website hữu ích cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Tìm Kiếm Bài Viết