15 Mẹo Để Tối Ưu Hiệu Suất Website

Nếu bạn đang tìm kiếm cách tối ưu hóa hiệu suất website của mình, hãy tham khảo 15 bí quyết hàng đầu sau đây.

Lưu ý: Trước khi khám phá các bí quyết, hãy đánh giá chính xác tình trạng hiệu suất trang web của bạn. Xác định nguyên nhân khiến website của bạn chậm có thể giúp bạn điều chỉnh thứ tự ưu tiên của các bí quyết dưới đây.

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

Dựa trên cuộc khảo sát với 20 chuyên gia về thiết kế website, 46% trong số họ cho biết việc tối ưu hóa hình ảnh là ưu tiên hàng đầu khi làm việc với các trang web.

Báo cáo của HTTP Archive năm 2016 cho thấy 64% dung lượng của một website chủ yếu đến từ hình ảnh. Theo Google, hình ảnh định dạng WebP (do Google phát triển để thay thế JPEG, PNG và GIF) có kích thước nhỏ hơn khoảng 26% so với PNG và từ 25% đến 34% so với JPEG. WebP hỗ trợ nén hiệu quả, hình ảnh trong suốt và các hiệu ứng đặc biệt.

Dưới đây là các công cụ hữu ích để nén và tối ưu hóa 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

Khi trình duyệt của bạn yêu cầu dữ liệu từ máy chủ, nó sử dụng giao thức HTTP (Hypertext Transfer Protocol), phương thức giao tiếp giữa máy khách và máy chủ theo kiểu yêu cầu/ phản hồi.

Tổng quát, càng có nhiều yêu cầu HTTP, trang web của bạn sẽ tải càng chậm.

Bạn có thể giảm số lượng yêu cầu HTTP bằng cách:

Sử dụng nội tuyến JavaScript (chỉ khi mã nhỏ).

Áp dụng CSS Sprites.

Giảm bớt nội dung từ các plugin bên thứ ba, làm tăng yêu cầu từ bên ngoài.

Tránh sử dụng các framework bên thứ ba trừ khi thật sự cần thiết.

Giảm mã nguồn sử dụng.

Kết hợp các file CSS và JS.

Ví dụ về việc tối ưu hóa yêu cầu HTTP:

Một ví dụ điển hình về yêu cầu HTTP không cần thiết là khi bạn bật tính năng tiếp thị và quảng cáo trong Google Analytics mà không sử dụng chúng thực sự. Thông thường, khi bạn kích hoạt tính năng này, sẽ xuất hiện yêu cầu HTTP thứ hai đến URL https://stats.g.doubleclick.net/r/collect?, dẫn đến redirect 302 trong header phản hồi.

Nếu bạn không sử dụng các tính năng đó, bạn có thể tắt “Remarketing” và “Advertising Reporting Features” trong mục “Data Collection” trên cài đặt Google Analytics của bạn.

Hoặc, bạn có thể tắt tính năng này thủ công bằng cách thêm đoạn mã sau vào Google Analytics: ga('set', 'displayFeaturesTask', null);

Sau khi tắt tính năng này, yêu cầu HTTP thứ hai sẽ không còn và script chính của bạn sẽ không bị redirect 302. Đây là một ví dụ về việc tối ưu hóa yêu cầu HTTP.

Một ví dụ khác về việc tối ưu hóa yêu cầu HTTP là trường hợp bạn đang sử dụng WordPress. Theo mặc định, WordPress sẽ tự động thêm một file JavaScript, wp-emoji-release.min.js?ver=4.3.1, vào header của bạn. Dù biểu cảm emoji có thể thú vị, nhưng liệu có thật sự cần thiết phải thêm một file JavaScript chỉ để hỗ trợ chúng?

Câu trả lời thường là không. Bạn có thể tắt tính năng Emoji trong WordPress bằng cách thêm đoạn mã sau vào file functions.php của bạn.

Ngoài ra, bạn cũng có thể sử dụng plugin miễn phí "Disable Emojis" từ WordPress repository để thực hiện việc này.

Hãy tránh để các yếu tố không cần thiết tạo ra yêu cầu HTTP! Đừng chỉ tập trung vào việc tối ưu hóa trang chính của bạn; các trang khác cũng cần được chú ý để cải thiện hiệu suất tổng thể.

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

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

• Các ký tự khoảng trắng
• Ký tự xuống dòng
• Comment
• Dấu phân cách

Việc này giúp tăng tốc thời gian tải trang bằng cách giảm lượng mã cần được gửi từ server.

Dưới đây là các công cụ tự động giảm thiểu cho hệ thống công việc của bạn:

JavaScript

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

CSS

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

Nếu bạn đang sử dụng WordPress, bạn cũng có thể giảm thiểu CSS và JavaScript bằng plugin WordPress Cache Enabler.

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

Khi phân tích tốc độ trang web, bạn cần chú ý đến các yếu tố có thể làm chậm quá trình tải trang, đặc biệt là những tài nguyên chặn thông dịch (render blocking resources) như HTML, CSS (bao gồm cả font web) và JavaScript. Dưới đây là một số gợi ý để tối ưu hóa CSS và JavaScript nhằm giảm thiểu tình trạng chặn DOM:

CSS

• Gọi file CSS rõ ràng: Đảm bảo rằng các file CSS được gọi đúng cách và không gây ra độ trễ không cần thiết.
• Sử dụng media queries: Đánh dấu các tài nguyên CSS không cần thiết phải chặn thông dịch bằng cách sử dụng media queries.
• Giảm thiểu số lượng file CSS: Gộp các file CSS vào một file duy nhất để giảm số lượng yêu cầu HTTP.
• Giảm bớt CSS: Loại bỏ khoảng trắng, ký tự không cần thiết, và comment trong CSS.
• Sử dụng ít CSS hơn: Cố gắng tối ưu hóa và sử dụng ít CSS hơn khi có thể.

JavaScript

Khi làm việc với JavaScript, bạn có thể áp dụng các phương pháp sau:

• Di chuyển script xuống dưới trang: Đặt các script của bạn ngay trước thẻ </body> để giảm thiểu ảnh hưởng đến thời gian tải trang.
• Sử dụng lệnh async hoặc defer:

async: Cho phép script được tải song song với nội dung trang và không chặn thông dịch. Khi tải xong, script sẽ được thực thi.

defer: Đảm bảo rằng các script sẽ thực thi theo thứ tự đã được xác định trong trang, mà không chặn quá trình tải trang.

Gộp các file JS: Kết hợp các file JavaScript vào một file duy nhất để giảm số lượng yêu cầu HTTP.

Giảm thiểu JavaScript: Loại bỏ khoảng trắng, ký tự không cần thiết, và comment trong mã JavaScript.

Sử dụng JavaScript nội tuyến nếu mã nhỏ: Nếu đoạn mã JavaScript rất nhỏ, bạn có thể đưa nó vào nội tuyến trong HTML.

Chúng ta sẽ thảo luận về việc tối ưu hóa font trong các bài viết sau.

5. Giảm độ trễ CDN

CDN (Content Delivery Network) là một hệ thống các máy chủ phân tán rộng rãi, lưu trữ bản sao của nội dung tĩnh từ website và phân phối chúng đến các máy chủ khác, gọi là PoP (Points of Presence). Khi người dùng truy cập vào website, nội dung sẽ được gửi từ PoP gần nhất để giảm thiểu độ trễ và cải thiện tốc độ tải trang. Nếu không sử dụng CDN, yêu cầu sẽ được gửi trực tiếp đến máy chủ gốc của website, dẫn đến thời gian tải lâu hơn.

Chúng tôi đã thực hiện các bài kiểm tra để so sánh thời gian trễ giữa việc sử dụng CDN và không sử dụng CDN. Dưới đây là kết quả từ công cụ kiểm tra ping của KeyCDN, cho phép chúng tôi đánh giá từ 10 địa điểm khác nhau. Kết quả cho thấy sự khác biệt rõ rệt trong thời gian phản hồi giữa hai phương pháp. Tuy nhiên, việc triển khai CDN có thể làm tăng chi phí thiết kế website, vì vậy bạn nên cân nhắc và lập kế hoạch chi phí trước khi quyết định sử dụng CDN để tối ưu hóa hiệu suất website.

Địa điểm Server (POP)	RTT không có CDN (ms)	RTT với KeyCDN (ms)	Chênh lệch %
New York, US	36.908	18.096	- 50.97%
Dallas, US	0.751	1.138	+ 51.53%
San Francisco, US	39.645	18.900	- 52.33%
Frankfurt, DE	123.072	3.734	- 96.97%
London, UK	127.555	4.548	- 96.43%
Paris, FR	112.417	689	- 98.5%
Amsterdam, NL	118.418	10.364	- 91.25%
Singapore, SG	202.682	2.002	- 99.01%
Sydney, AU	191.848	0.705	- 99.63%
Tokyo, JP	130.804	3.379	- 97.42%

6. TTFB

Thời gian đến byte đầu tiên (TTFB) là một chỉ số quan trọng để đo lường khả năng phản hồi của máy chủ web. Nó đại diện cho khoảng thời gian từ khi trình duyệt gửi yêu cầu cho máy chủ đến khi nhận được byte đầu tiên của dữ liệu phản hồi. Công thức tính TTFB bao gồm:

• Thời gian yêu cầu HTTP
• Thời gian xử lý yêu cầu
• Thời gian phản hồi HTTP

Trong Chrome Dev Tools, TTFB được hiển thị bằng thanh chờ màu xanh lục.

Bằng cách sử dụng CDN, chọn một máy chủ lưu trữ trang web nhanh, và sử dụng dịch vụ DNS đáng tin cậy, bạn có thể giảm đáng kể thời gian TTFB.

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

Điều hướng có thể là một yếu tố giảm hiệu năng đáng kể. Nếu có thể, hãy hạn chế việc điều hướng. Mỗi lần điều hướng sẽ tạo thêm thời gian khứ hồi (RTT), làm tăng gấp đôi thời gian yêu cầu để tải dữ liệu HTML ban đầu, ngay cả 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à rất quan trọng cho các nội dung ít thay đổi. Thời gian lưu trữ tối đa được khuyến nghị là 7 ngày cho các loại nội dung này. Các header HTTP chính liên quan đến bộ nhớ đệm bao gồm:

1. Cache-Control
2. Pragma
3. Expires
4. Validators

Trong số các header HTTP cache, Cache-Control là một trong những cái quan trọng nhất. Header này cho phép bạn chỉ định cách và khi nào một phản hồi nên được lưu trữ trong bộ nhớ đệm, cũng như thời gian lưu trữ. Bộ nhớ đệm HTTP giúp trình duyệt lưu trữ bản sao của tài nguyên để truy cập nhanh hơn, và điều này có thể được tích hợp với HTTPS.

Nếu bạn sử dụng KeyCDN, bạn có thể thêm hoặc chỉnh sửa các trường header phản hồi Expires và Cache-Control gửi đến client. Những tùy chọn này có sẵn trong dashboard của KeyCDN tại mục “Zones” -> “Edit Zone” -> “Show Advanced Features”.

• -1 Cache-Control: no-cache
• 0 Push Zone: disabled / Pull Zone: as received from the origin (header honoring)
• >0 Cache-Control: max-age=t, trong đó t là thời gian được chỉ định trong chỉ thị tính bằng phút, chuyển đổi thành giây

Cài đặt này sẽ ghi đè lên giá trị nhận được từ điểm gốc trong trường hợp có Pull Zone. Giá trị expire chỉ ảnh hưởng đến bộ nhớ đệm của trình duyệt và không ảnh hưởng đến bộ nhớ đệm của KeyCDN.

Bộ nhớ đệm server

Có nhiều dạng caching server-side khi tối ưu hóa hiệu suất website, đặc biệt là với các trang có lượng traffic cao. Varnish Cache là một ví dụ nổi bật khi kết hợp với plugin cache và CDN để cải thiện hiệu suất.

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

Tải trước tên miền là một giải pháp hiệu quả để chuẩn bị các tên miền trước khi người dùng thực sự truy cập chúng. Đây là cách bạn có thể triển khai nó trong phần <head> của HTML

Dấu gạch chéo đôi chỉ ra rằng URL bắt đầu với tên máy chủ (theo RFC 1808).

Kết nối trước cho phép trình duyệt thiết lập các kết nối trước khi gửi yêu cầu HTTP thực tế đến server. Các kết nối như DNS Lookup, TCP Handshake, và TLS negotiation có thể được khởi tạo sớm, giúp loại bỏ độ trễ hai chiều của các kết nối đó và tiết kiệm thời gian cho người dùng.

10. HTTP/2

Jeff Atwood, đồng sáng lập Stack Exchange và Discourse, đã chia sẻ rằng “Làm quen với HTTP/2 trên mọi mặt - đây là một bước cải thiện lớn cho mọi người.” Chúng tôi đồng ý với quan điểm của Jeff, vì HTTP/2 mang lại những lợi ích hiệu suất đáng kể.

Một ví dụ rõ ràng về sự vượt trội của HTTP/2 so với HTTP/1 là khi xử lý nhiều hình ảnh trên trang web.

Để kích hoạt HTTP/2, bạn cần có chứng chỉ SSL (yêu cầu TLS) và một máy chủ hỗ trợ HTTP/2. Bạn có thể sử dụng công cụ kiểm tra HTTP/2 của KeyCDN để xác định xem máy chủ của bạn có hỗ trợ công nghệ này không. Hiện tại, KeyCDN cung cấp chứng chỉ SSL miễn phí thông qua công nghệ tích hợp Let’s Encrypt. Nếu bạn vẫn chưa chuyển sang HTTPS, chúng tôi cũng có hướng dẫn chi tiết về cách chuyển từ HTTP sang HTTPS.

11. Hiệu năng font cho Web

Theo HTTP Archive, hiện nay 60% các website sử dụng font tùy chỉnh, tăng hơn 850% so với năm 2011. Tuy nhiên, việc sử dụng font web như Google Fonts có thể tạo thêm các yêu cầu HTTP đối với tài nguyên bên ngoài và làm tăng độ trễ. Để cải thiện hiệu suất khi sử dụng font web, hãy cân nhắc các lời khuyên sau:

1. Ưu tiên các font được trình duyệt hỗ trợ: Chọn các font có sẵn trên hầu hết các trình duyệt.
2. Chọn chỉ các kiểu cần thiết: Không tải tất cả các kiểu và trọng số của font nếu bạn chỉ sử dụng một phần nhỏ.
3. Giới hạn bộ ký tự: Chỉ sử dụng các ký tự cần thiết để giảm kích thước của font.
4. Lưu trữ font nội bộ hoặc tải trước: Lưu font trên máy chủ của bạn hoặc tải trước chúng để giảm số lượng yêu cầu HTTP.
5. Sử dụng mã hóa Base64: Lưu font trong kho lưu trữ cục bộ bằng cách mã hóa chúng thành Base64.

Ví dụ cho từng phương pháp có thể được tìm thấy trong bài viết phân tích hiệu suất font web. Georgia là một ví dụ tuyệt vời về font dễ đọc và dễ hiểu.

Ngoài ra, bạn có thể chuyển Google Font sang CDN của bạn. Chúng tôi đã so sánh hiệu suất giữa việc sử dụng CDN của Google và KeyCDN, và kết quả cho thấy KeyCDN cung cấp tốc độ tải nhanh hơn. Điều này là do KeyCDN giảm số lượng yêu cầu HTTP và DNS lookup, đồng thời tận dụng kết nối HTTP/2 đơn và cung cấp nhiều tùy chọn kiểm soát hơn.

Kiểm tra tốc độ	Google CDN (ms)	KeyCDN (ms)	Kết quả
Thời gian tải WebPageTest	1871 ms	1815 ms	KeyCDN
Thời gian tải đầy đủ WebPageTest	1929 ms	1862 ms	KeyCDN
Thời gian tải Pingdom	355 ms	324 ms	KeyCDN

12. Bảo vệ Hotlink

Bảo vệ hotlink giúp ngăn chặn việc bên ngoài nhúng tài nguyên của bạn vào trang web của họ, tương tự như việc ngăn chặn HTTP referrer. Điều này không chỉ bảo vệ băng thông của bạn mà còn ngăn các trang web khác hiển thị ảnh của bạn.

Ví dụ, nếu URL trang web của bạn là www.domain.com, bạn có thể ngăn chặn hotlink ảnh từ các trang khác và hiển thị ảnh thay thế như donotsteal.jpg bằng cách thêm đoạn mã sau vào file .htaccess:

RewriteEngine On

RewriteCond %{HTTP_REFERER} !^http://(.+\.)?domain\.com/ [NC]

RewriteCond %{HTTP_REFERER} !^$

RewriteRule \.(jpe?g|gif|bmp|png)$ http://i.imgur.com/donotsteal.gif [L]

Nếu bạn sử dụng KeyCDN, bạn có thể dễ dàng bật bảo vệ hotlink để bảo vệ băng thông CDN của bạn. Hãy xem hướng dẫn của KeyCDN để biết cách thiết lập một Zone Referrer và bảo vệ tài nguyên của bạn hiệu quả.

13. Sửa lỗi 404

Bất kỳ tập tin nào bị thiếu sẽ dẫn đến lỗi HTTP 404. Tùy thuộc vào nền tảng bạn sử dụng, lỗi 404 có thể tiêu tốn tài nguyên máy chủ đáng kể. Ví dụ, trên Drupal, lỗi 404 có thể rất tốn kém về tài nguyên. Trong một trang bình thường với một module tải nhẹ, bạn có thể thấy mức tiêu thụ bộ nhớ từ 60-100MB khi dẫn đến trang 404.

Chúng tôi không khuyến khích cài đặt plugin hoặc module để kiểm tra lỗi 404. Thay vào đó, hãy thường xuyên sử dụng các dịch vụ bên ngoài như Online Broken Link Checker hoặc công cụ như Screaming Frog để kiểm tra lỗi. Điều này giúp bạn tiết kiệm tài nguyên máy chủ. Bạn cũng có thể theo dõi các lỗi này thông qua Google Search Console.

14. Dùng ảnh đã được tỉ lệ

Lỗi liên quan đến hình ảnh thường gặp trên các trang web bán hàng hoặc tin tức, nơi chứa lượng lớn hình ảnh. Hiện nay, người đọc có xu hướng xem nhiều hình ảnh hơn là chỉ chú trọng vào nội dung văn bản. Lời khuyên cho bạn là:

Hãy luôn tải lên hình ảnh với kích thước thực tế và không phụ thuộc vào CSS để điều chỉnh kích thước hình ảnh. Nếu không, bạn có thể gặp cảnh báo từ Google PageSpeed: “Lời khuyên tối ưu: Bạn có thể tiết kiệm 5.8 KB (51%) bằng cách nén và điều chỉnh kích thước của…”.

Cảnh báo này cho thấy hình ảnh của bạn đang được thay đổi kích thước bởi trình duyệt. Ví dụ, nếu bạn tải lên một hình ảnh có độ rộng 400px nhưng cột chứa ảnh chỉ có độ rộng 300px, CSS sẽ điều chỉnh kích thước của hình ảnh xuống còn 300px để phù hợp với kích thước cột. Thay vì làm vậy, hãy tải lên hình ảnh với kích thước chính xác và cung cấp nhiều độ phân giải khác nhau để phù hợp với các thiết bị.

Lưu ý: Tránh điều chỉnh kích thước bằng CSS không phải lúc nào cũng khả thi, đặc biệt là với các thiết bị retina có độ phân giải cao.

15. Tối ưu database

Và cuối cùng là tối ưu database. 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

Xem thêm: Thiết kế website chuẩn seo thời cạnh tranh – Tại sao phải chuẩn seo?

Xem thêm: Hướng Dẫn Tối Ưu Hóa SEO Trên Google Maps

Xem thêm: Canonical là gì? Ý nghĩa và ứng dụng trong SEO

Xem thêm: Organic Keywords: Hướng dẫn SEO Cơ Bản Dành Cho Người Mới Bắt Đầu

Kết Luận

Dù thiết kế trang web có vẻ đơn giản, nhưng việc đảm bảo website hoạt động hiệu quả đòi hỏi nhiều chiến lược Tối Ưu Hiệu Suất Website. Bạn có thể triển khai hàng trăm phương pháp để cải thiện khả năng truyền tải và tốc độ của nội dung, từ việc tối ưu hóa hình ảnh, triển khai CDN, đến cấu hình bộ nhớ đệm (caching) cho trình duyệt và máy chủ, tận dụng lợi ích của HTTP/2, Gzip, PHP 7, HHVM và nhiều hơn nữa!

CÔNG TY CỔ PHẦN GIẢI PHÁP CÔNG NGHỆ WEBCHATLUONG

- Hotline: 0975168808
- Website: https://webchatluong.vn/
- Fanpage: https://www.facebook.com/thietkewebsitenhatha
- Youtube: https://www.youtube.com/@LinhWebsite
- Trụ sở Hà Nội: 25 Ngõ 60, Tân Triều, Triều Khúc, Thanh Trì, Hà Nội