10 tips tối ưu hiệu năng website

Tối ưu hiệu năng website luôn là công việc quan trọng mà các quản trị viên trang web quan tâm để tối ưu trải nghiệm người dùng. Nếu trải nghiệm website không tốt có thể khiến khách hàng mất lòng tin, khiến họ một đi không trở lại.

Nếu bạn đang tìm cách tối ưu hiệu năng website thì hãy bỏ túi 15 tips hàng đầu tối ưu website sau đây.

1.Tối ưu hình ảnh

Theo cuộc khảo sát với 20 chuyên gia làm về website thì có hơn 46% trong số chuyên gia cho biết một trong những phương pháp đầu tiên để tối ưu hiệu năng website chính là làm 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.

Chính vì thế, WebP ra đời là một dạng thức để hỗ trợ tốt nén hình ảnh trong suốt và các hiệu ứng. Theo Google, hình theo định dạng WebP loại lossless nhỏ hơn PNG 26% và JPEG 25-34%.

Dưới đây là những đơn vị cung cấp công cụ nén và tối ưu hình ảnh

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)
  

2.Giảm bớt các request HTTP

HTTP là Hypertext Transfer Protocol là phương thức yêu cầu giữa phản hồi của khách và máy chủ khi trình duyệt hoạt động. Khi trình duyệt của bạn càng nhiều yêu cầu HTTP, nó sẽ tải càng chậm từ đó ảnh hưởng đến quá trình tối ưu hiệu năng website.

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

• Nội tuyến JavaScript (chỉ khi nó rất nhỏ)
• 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
• Dùng ít code hơn!
• Kết hợp file CSS và JS

Đừng để những thứ không dùng tạo ra request! Bạn nên dọn dẹp request HTTP thường xuyên và đúng quy trình. 

3.Giảm bớt CSS và JavaScript

Tối ưu hiệu năng website bằng cách giảm bớt CSS và JavaScript. Giảm bớt có nghĩa là xóa những ký tự không cần thiết mà không cần tải lại trong HTML, JavaScript, và CSS do bạn hoặc công cụ thiết kế website tạo ra, như là: 

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

Ngoài ra, sử dụng Plugin để giảm thiểu thời gian bằng cách cho hệ thống tự động làm công việc. 

 JavaScript

• Grunt: grunt-contrib-uglify
• Gulp: gulp-uglify

CSS

• Grunt: grunt-contrib-cssmin
• Gulp: gulp-minify-css

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

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 là những thứ có thể chặn DOM, gây ảnh hưởng đến hiệu năng website. Dưới đâ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 từ đó tối ưu hiệu năng website của bạn hơn.

CSS

    1) Gọi file CSS rõ ràng

    2) 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.

    3) Giảm thiểu lượng file CSS( gộp các file CSS của bạn vào một file)

    4) Giảm bớt CSS( bỏ bớt các khoảng trống, ký tự, comment, vân vân)

    5) Dùng ít CSS theo tổng quát.

 JavaScript

    1) Di chuyển script của bạn xuống dưới trang ngay trước tag </body>.

    2) Dùng lệnh async hoặc defer để tránh chặn thông dịch.

    3) Gộp các file JS vào 1 file

    4) Giảm thiểu JavaScript (loại bỏ khoảng trắng, ký tự, vân vân)

    5) Nội tuyến JavaScript nếu nhỏ.

5.Giảm độ trễ CDN

Khi một tập tin được phân phối bởi CDN, người dùng truy cập vào nó thì PoP phân phối gần nhất so với người dùng sẽ trả nội dung về cho người dùng xem. Ngược lại, Khi người dùng xem một tập tin mà không có CDN, nghĩa là họ đã gửi một request thẳng đến máy chủ chứa website để truy cập tập tin đó.

Tuy nhiên việc sử dụng CDN sẽ tốn khá nhiều chi phí khi thiết kế website vì vậy các bạn nên lập kế hoạch chi phí trước khi tiến hành sử dụng CDN để tối ưu hiệu năng website.

6.TTFB

TTFB là viết tắt của “Time To First Byte” là khoảng thời gian mà trình duyệt cần phải đợi để nhận được phần thông tin đầu tiên từ máy chủ web sau khi gửi yêu cầu nhận nó.

Công thức tính TTFB được tính như sau:

Thời gian yêu cầu HTTP + Thời gian yêu cầu process + Thời gian phản hồi HTTP

7. Tránh điều hướng 301

Điều hướng 301 chính là sát thủ hiệu năng. Vì thế cần phải tránh điều hướng 301 khi có thể. Một số điều hướng sẽ làm chậm thời gian tải dữ liệu HTML và thậm chí là trước khi tải các tài nguyên khác. 

8.Caching

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

Tận dụng bộ nhớ đệm của trình duyệt là cần thiết cho nội dung ít khi thay đổi. Có những loại header HTTP khác nhau như là:

• Cache-control
• Pragma
• Expires
• Validators

Cache-Control là một trong các HTTP cache header quan trọng, một header bao gồm một bộ các lệnh cho phép bạn định nghĩa một phản hồi nên được lưu đệm khi nào/ như thế nào và bao lâu. HTTP caching xảy ra khi trình duyệt lưu trữ các bản sao của tài nguyên để truy cập nhanh hơn. Điều này có thể tận dụng để triển khai HTTPS.

Bộ nhớ đệm Server

Có nhiều dạng server-side caching khác nhau khi nói đến tối ưu hiệu năng website. Điều này thường gặp ở các trang có lượng traffic cao. Varnish cache là một ví dụ rất lợi hại khi kết hợp với một plugin cache và CDN.

9.Tải trước và kết nối trước

Tải trước tên miền là giải pháp tốt để giải quyết các tên miền trước khi người dùng thật sự theo đường dẫn đó. Kết nối trước cho phép trình duyệt thiết lập các kết nối sớm trước khi request HTTP thật sự được gửi đến server.

10.Tối ưu database

Tối ưu hóa database (Performance tuning) là một vấn đề khó và không có một quy tắc. Dù là dọn dẹp các bảng cũ không dùng hoặc tạo chỉ mục để truy cập nhanh hơn thì luôn có các cách để tối ưu hiệu năng website.

 

Thiết kế website thì đơn giản nhưng để vận hành tốt thì có hàng trăm cách để tối ưu hiệu năng website bạn có thể triển khai để cải thiện hơn nữa trong việc truyền tải và tốc độ nội dung của bạn. Hy vọng 10 tips tối ưu hiệu năng website mà Webo đã cung cấp giúp bạn cải thiện trang web của mình.