Bản tin webvocuc.com

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

18/04/2021

7273

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:

Grunt: grunt-contrib-imagemin
Gulp: gulp-imagemin

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

TinyPNG
Kraken.io
JPEGmini (app available for OSX, iOS, Windows)

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

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.

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.