Những bí quyết tối ưu hiệu năng website

0
7282

Những bí quyết tối ưu hiệu năng website. Ngoài việc thiết kế website thật ấn tượng thì việc tối ưu hiệu năng nên được ưu tiên.

Những bí quyết tối ưu hiệu năng website

Tối ưu hình ảnh

Theo cuộc khảo sát với 20 chuyên gia về website đã đưa ra ý kiến về lỗi tối ưu các website hay mắc phải thì 46% trong số chuyên gia cho biết tiêu chí đầu tiên họ làm là tối ưu hình ảnh.

Theo báo cáo của HTTP Archive năm 2016 thì 64% dung lượng của website là đến từ hình ảnh trong trang web.

Theo Google, hình theo định dạng WebP loại lossless nhỏ hơn PNG 26% và hình ảnh JPEG 25-34%.

Sau đây là các đơn vị cung cấp công cụ dùng để nén và tối ưu hình ảnh cho bạn.

   Plugins:

   Công cụ của đối tác:

Giảm bớt các request HTTP

Khi trình duyệt của bạn lấy dữ liệu từ máy chủ thì nó sẽ dùng HTTP (Hypertext Transfer Protocol). Đây là phương thức yêu cầu hay phản hồi giữa máy khách và máy chủ.

Nhìn chung càng nhiều yêu cầu HTTP trang web bạn thực hiện, nó sẽ càng tải càng chậm hơn.

Có nhiều cách bạn có thể giảm bớt số lượng yêu cầu ví dụ như:

  • Nội tuyến JavaScipt
  • Sử dụng CSS Sprites
  • Giảm bớt lượng nội dung của các plugin ở bên thứ 3 làm tăng lượng yêu cầu ở bên ngoài
  • Không sử dụng framework bên thứ 3 trừ khi thật sự cần thiết
  • Dùng ít code hơn càng tốt
  • Kết hợp file CSS và JS với nhau

Những bí quyết tối ưu hiệu năng website

Giảm bớt CSS và JavaScript

Giảm thiểu tài nguyên có nghĩa là xóa những ký tự không cần thiết trong HTML, JavaScript, và CSS do bạn hoặc công cụ thiết kế website tạo ra, như:

  • Những ký tự khoảng trắng (white space)
  • Những ký tự xuống dòng
  • Comment không cần
  • Dấu phân cách

Điều này giúp tăng tốc thời gian tải của bạn vì nó giảm bớt lượng code phải được yêu cầu từ server.

Đường găng (Critical Path) và tài nguyên chặn thông dịch (CSS + JS)

Khi nói đến phân tích tốc độ của một trang web, bạn luôn cần cân nhắc những thứ có thể chặn DOM, gây chậm trễ khi tải trang web. Nó cũng được biết đến là  tài nguyên chặn thông dịch (render blocking resources), như là HTML, CSS( bao gồm cả font web), và JavaScript. Sau đây là một số gợi ý để đề phòng CSS và JavaScript của bạn chặn DOM bằng cách tối ưu đường găng thông dịch này.

   CSS

  • Gọi tên file CSS rõ ràng.
  •  Dùng media queries để đánh dấu những tài nguyên CSS không phải là tài nguyên chặn thông dịch.
  • Giảm thiểu lượng file CSS( gộp các file CSS của bạn vào một file).
  • Giảm bớt các CSS không cần thiết( bỏ bớt các khoảng trống, ký tự, comment, vân vân).
  • Dùng ít CSS theo tổng quát.

   JavaScript

Khi nhắc đến JavaScript có một vài phương pháp tốt như:

  • Di chuyển script trong trang xuống dưới trang ngay trước tag </body>.
  • Dùng lệnh async hoặc defer để tránh chặn các thông dịch.
  • Gộp các file JS vào 1 file gọn nhất.
  • Giảm thiểu JavaScript (loại bỏ khoảng trắng, ký tự, vân vân)

Giảm độ trễ CDN

CDN (Content Delivery Network) có thể hiểu là một hệ thống các server được đặt rải rác ở khắp nơi. Nó làm nhiệm vụ lưu lại bản sao của các nội dung tĩnh có bên trong website. Sau đó phân tán nó ra nhiều máy chủ khác nữa (được gọi là PoP – Points of Presence) và từ các PoP đó nó sẽ gửi tới cho người dùng khi họ truy cập vào website của bạn.

Những bí quyết tối ưu hiệu năng website

TTFB

Thời gian đến byte đầu tiên (TTFB) là phương pháp đo lường tính responsive của một web server. Cơ bản là khoảng thời gian mất để trình duyệt của bạn bắt đầu nhận thông tin được yêu cầu từ server.

Bằng cách sử dụng CDN này, một máy chủ host trang web nhanh gọn và một đơn vị cung cấp DNS đáng tin cậy bạn có thể giảm đáng kể thời gian TTFB tổng quan cho web.

Webvocuc

Cảm ơn bạn đã theo dõi bài viết của Webvocuc.com! Cập nhật các bài viết khác từ Webvocuc để biết thêm nhiều thông tin mới nhất về thiết kế website chuyên nghiệp và marketing online.

  • Tham khảo các gói dịch vụ thiết kế website tại webvocuc.vn
  • Tham khảo thêm gói chăm sóc web và chạy quảng cáo hiệu quả tại webvocuc.com

Webvocuc

Cảm ơn bạn đã xem bài viết Những bí quyết tối ưu hiệu năng website
* Tuyệt với hơn nếu bài viết này nhận được ý kiến của bạn!

BÌNH LUẬN

Please enter your comment!
Please enter your name here

Thiết kế website chuyên nghiệp