15 bí quyết cho tối ưu hiệu năng website

15 bí quyết cho tối ưu hiệu năng website

15 bí quyết cho tối ưu hiệu năng website – Bên cạnh việc thiết kế web tạo nên ấn tượng thương hiệu thì việc tối ưu hóa hiệu năng website luôn được xem là ưu tiên hàng đầu khi phát triển và duy trì một trang web, đặc biệt khi có quá nhiều đối thủ cạnh tranh kênh online.

Nếu bạn đang đi tìm cách tối ưu website của mình thì hãy thủ 15 bí quyết (Tip) hàng đầu tối ưu website sau đây.

Lưu ý: trước khi đi sâu vào tìm hiểu các Tips, bạn nên đánh giá chính xác hiện trạng hiệu suất trang web của mình. Nếu như bạn xác định được nguyên nhân làm chậm website của bạn, thì bạn có thể thay đổi thứ tự ưu tiên của các Tips bên dưới.

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

Theo cuộc khảo sát với 20 chuyên gia về làm 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.

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

(WebP là một loại định dạng hình ảnh được tạo ra bởi Google, với mục đích thay thế cho JPEG, PNG và GIF, đồng thời hỗ trợ tốt nén, hình ảnh trong suốt và các hiệu ứng.)

Dưới đây là các đơn vị cung cấp công cụ dùng để 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

Khi trình duyệt của bạn lấy dữ liệu từ máy chủ nó sẽ dùng HTTP (Hypertext Transfer Protocol). Đây là phương thức yêu cầu/ 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ẽ tải càng chậm.

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

• Nội tuyến JavaScipt (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

   Ví dụ dọn dẹp request HTTP thứ nhất

Đây là một ví dụ của HTTP thêm vào thường thấy có thể xóa được. Chúng ta thường gặp nhiều người bật tiếp thị và quảng cáo trên Google Analytics, và họ lại không thật sự sử dụng chức năng này. Người dùng phổ thông thường có thói quen nhấn enable cho mọi thứ bằng việc mở tính năng này bạn sẽ thật sự có request HTTP thứ 2 cho URL này https://stats.g.doubleclick.net/r/collect? mà sau đó tạo ra redirect 302 trong header phản hồi.

Nếu bạn không dùng những tính năng đó bạn có thể tắt đi “Remarketing” và “Advertising Reporting Features” dưới mục “Data Collection” trong settings Google Analytics của bạn.

Hoặc bạn có thể tắt thủ công bằng việc thêm đoạn script sau cho Google Analytics ga(‘set’,‘displayFeaturesTask’,null);

Sau khi tắt đi bạn sẽ không còn thấy request HTTP thứ 2 và script chính của bạn sẽ không có redirect 302. Đây là một ví dụ cho việc dọn dẹp yêu cầu HTTP.

   Ví dụ dọn dẹp yêu cầu HTTP thứ hai

Một ví dụ nữa của việc dọn dẹp yêu cầu HTTP là nếu như bạn đang vận hành WordPress, theo mặc định, sẽ bao gồm thêm một file JavaScript wp-emoji-release.min.js?ver=4.3.1 trong header của bạn. Biểu cảm emojis thì thú vị, nhưng thực sự cần thiết không? Nó có đáng thêm thời gian và độ nặng để thêm một file JavaScript không?

Câu trả lời có lẽ là không. Bạn có thể tắt Emojis trong WordPress bằng cách thêm đoạn code dưới đây vào file functions.php của bạn.

Hoặc bạn cũng có thể dùng plugin Disable Emojis miễn phí trong WordPress repo.

Đừng để những thứ không dùng tạo ra request! Cũng đừng chỉ tối ưu homepage của bạn, những trang còn lại cũng đáng để bạn lưu tâm đến.

3. 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ư là:

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

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

 Plugin giảm thiểu cho hệ thông công việc tự động

   JavaScript

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

   CSS

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

Nếu bạn đang dùng WordPress bạn cũng có thể giảm thiểu CSS và JavaScript với WordPress Cache Enabler.

4. Đườ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 độ trang web của bạn, 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. Đây 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. 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.

   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

Khi nhắc đến JavaScript có một vài phương pháp tốt luôn để trong lòng.

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ỏ.

Async cho phép script được tải ở sau nền mà không có chặn. Sau đó, khi nó hoàn tất tải, thông dịch bị chặn và script thực thi. Thông dịch tiếp tục khi script thực thi xong.

<scriptasyncsrc=”foobar.js”></script>

Lựa chọn khác của bạn là defer JavaScript. Lệnh này hoạt động giống như async, trừ việc nó đảm bảo rằng scripts thực hiện theo trình tự được cụ thể trong trang. Patrick Sexton có một ví dụ hay về việc dùng defer JavaScript rõ ràng.

Chúng ta sẽ bàn luận ý kiến của bạn về font sau này trong bài viết.

5. 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 ở nhiều nơi, làm nhiệm vụ lưu bản sao của các nội dung tĩnh bên trong website, sau đó phân tán nó ra nhiều máy chủ khác (đượ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.

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 đó.

Chúng tôi đã chạy kiểm tra để cho bạn thấy sự khác biệt trong thời gian trễ khi có và không có dùng CDN. Đây chỉ đơn giản là về góc nhìn kết nối. Chúng tôi dùng ping test tool của KeyCDN cho phép chúng tôi kiểm tra cùng lúc từ 10 địa điểm sau đây một cách thuận lợi. Và đây là kết quả của 2 bên. Tuy nhiên việc sử dụng CDN sẽ tốn nhiều chi phí 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 website.

6. TTFB

Thời gian đến byte đầu tiên (TTFB) is 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. 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

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

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

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

Điều hướng là “sát thủ hiệu năng”. Tránh điều hướng khi có thể. Một điều hướng sẽ tạo ra thêm thời gian khứ hồi (round trip times RTT) và vì thế gấp đôi thời gian yêu cầu để tải dữ liệu HTML khởi tạo thậm chí 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. Người ta khuyến khích bộ nhớ có thời gian tối đa 7 ngày cho những trường hợp như vậy. Có những loại header HTTP khác nhau như là:

1. Cache-control

2. Pragma

3. Expires

4. Validators

Một trong các HTTP cache header quan trọng có lẽ là Cache-Control, 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.

Nếu bạn đang dùng KeyCDN bạn có thể thêm hoặc chỉnh sửa trường header phản hồi Expire và Cache-Control được gửi đến client. Chúng có sẵn trong dashboard của KeyCDN trong 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, where t is the time specified in the directive in minutes converted to seconds

Setting 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 trình duyệt và không có lên bộ nhớ đệm của KeyCDN.

   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 đó. Đây là một ví dụ thi triển nó trong mục HEAD của HTML như thế nào:

<linkrel=”dns-prefetch”href=”//www.example.com”>

Hai dấu gạch chéo để chỉ rằng URL bắt đầu với tên của máy chủ (được nêu trong RFC1808).

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. Các kết nối như DNS Lookup, TCP Handshake, và TLS negotiation có thể được khởi tạo trước, loại bỏ các độ trễ 2 chiều cho những kết nối đó và tiết kiệm thời gian cho người dùng.

Ví dụ sau đây cho cho thấy mở kết nối trước cho đường dẫn Zone Alias của KeyCDN sẽ như thế nào: <linkhref=’https://cdn.keycdn.com’rel=’preconnect’crossorigin>

10. HTTP/2

Jeff Atwood, đồng sáng lập Stack Exchange and Discourse đã trả lời các câu hỏi về hiệu năng web và một số mẩu lời khuyên ông ta đưa ra là “Quen với HTTP/2 trong mọi mặt – một bước cải thiện lớn cho mọi người.” Chúng tôi thích cách trả lời của Jeff vì chúng tôi hoàn toàn đồng ý rằng HTTP/2 là tương lai và có lợi ích về hiệu năng to lớn.

Tiếp theo, ngôn ngữ lập trình, có một ví dụ hay khi bạn phải giải quyết nhiều hình ảnh trong trang và cho thấy HTTP/2 vượt trội hơn HTTP/1 như thế nào.

Để bật HTTP/2 những gì bạn cần là chứng chỉ SSL (yêu cầu TLS) và một máy chủ hỗ trợ HTTP/2. Bạn có thể dùng công cụ kiểm tra HTTP/2 của KeyCDN để xem nếu nó có hỗ trợ. Và hiện tại KeyCDN cung cấp chứng chỉ SSL miễn phí với công nghệ tích hợp Let’s Encrypt của chúng tôi. Vẫn chưa chuyển sang HTTPS? Chúng tôi cũng có hướng dẫn chuyển từ HTTP sang HTTPS.

11. Hiệu năng font cho Web

Theo HTTP Archive, 60% các website hiện giờ đều dùng custom font. Đây là tăng hơn 850% từ năm 2011. Các bất lợi của font web, như Google Fonts, là nó thêm các request HTTP tới các tài nguyên ngoài. Font web cũng là tài nguyên chặn. Dưới đây là các lời khuyên để tăng hiệu năng tốt hơn cho font web.

1. Ưu tiên các font mà trình duyệt hỗ trợ

2. Chỉ chọn các style bạn cần

3. Giữ các bộ ký tự đến tối thiểu

4. Lưu font trong nội bộ hoặc tải trước.

5. Lưu trong Kho lưu trữ cục bộ bằng mã hóa Base64

Bạn có thể thấy ví dụ cho mỗi phương pháp trên trong bài đăng về phân tích hiệu năng của font web. Georgia là một hệ thống font tuyệt vời vừa dễ nhìn vùa dễ hiểu.

Bạn cũng có thể chuyển Google Font vào CDN của bạn. Chúng tôi đã thực hiện các so sánh giữa việc dùng CDN của Google và KeyCDN, và kết quả nhanh hơn khi dùng KeyCDN. Tại sao? Bởi vì nó giảm thiểu số request HTTP, DNS lookup, cho phép bạn lấy ưu điểm của một kết nối HTTP/2 đơn, và có nhiều kiểm soát hơn cho

12. Bảo vệ Hotlink

Bảo vệ hotlink giống như ngăn chặn HTTP referrer để không cho bên ngoài nhúng tài nguyên của bạn vào website của họ. Bảo vệ hotlink sẽ tiết kiệm băng thông bằng cách không cho các trang khác hiển thị ảnh của bạn.

Ví dụ: URL của trang bạn là www.domain.con . Để ngăn chặn hotlink ảnh của bạn từ trang khác và hiển thị ảnh thay thế như là donotsteal.jpg từ ảnh máy chủ, đặt đoạn code này trong file .htaccess

RewriteEngine OnRewriteCond%{HTTP_REFERER} !^http://(.+\.)?domain\.com/[NC]RewriteCond%{HTTP_REFERER} !^$RewriteRule .*\.(jpe?g|gif|bmp|png)$ http://i.imgur.com/donotsteal.gif[L]

KeyCDN cũng có một cách dễ dàng để bật bảo vệ hotlink nhằm bảo vệ băng thông CDN của bạn. Xem hướng dẫn của chúng tôi về cách tạo một Zone Referrer như thế nào.

13. Sửa lỗi 404

Bất cứ file thiếu nào sẽ tạo ra lỗi 404 HTTP. Tùy vào nền tảng bạn đang dùng lỗi 404 có thể khá nặng cho máy chủ của bạn. Ví dụ, Drupal có lỗi 404 rất tốn tài nguyên. Trong một trang bình thường với một module tải bình dân, bạn có thể thấy từ 60-100MB bộ nhớ tiêu thụ trên server khi dẫn đến trang 404.

Chúng tôi không khuyến khích cài plugin hoặc module để kiểm tra 404, thay vì đó chúng tôi khuyên bạn thường xuyên chạy website của bạn qua các dịch vụ bên ngoài như Online Broken Link Checker hoặc công cụ như Screaming Frog. Điều này đảm bảo bạn không phí tài nguyên của server vào công việc này. Bạn cũng có thể xem chúng trong Google Search Console.

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

Đa số các trường hợp này thường xảy với ở các website bán hàng(bạn có thể xem thêm bài viết tạo website bán hàng miễn phí tốt nhất), website về tin tức vì luôn chưa một lượng lớn hình ảnh. Và trên thực tế ngày nay người đọc cũng có xu hướng xem hình nhiều hơn là chú tâm vào nội dung.  Và lời khuyên cho bạn ở tip này chính là:

Bạn luôn nên up ảnh của bạn đã tỉ lệ và không lệ thuộc vào CSS để chỉnh size ảnh. Nếu bạn làm vậy bạn sẽ gặp lời khuyên nho nhỏ của Google Pagespeed: “Lời khuyên tối ưu: “Bạn có thể tiết kiệm 5.8 KB (51%) bằng việc nén và điều chỉnh size của …”

Lời nhắc đó nói đến việc ảnh của bạn đang bị tỉ lệ bằng trình duyệt, Ví dụ, có thể ảnh bạn up có độ rộng 400px, nhưng mà cột đặt ảnh chỉ có độ rộng 300px. Điều này dẫn đến ảnh bạn bị tỉ lệ còn 300px do CSS để nó vừa cho size cột. Tốt hơn vẫn là bạn thường xuyên up ảnh ở tỉ lệ và up nhiều phân giải cho ảnh để dùng độ phân giải đúng cho từng thiết bị.

Lưu ý: Không phải lúc nào cũng khả thi để tránh tỉ lệ bằng CSS, đặc biệt là nếu bạn đang làm với các thiết bị retina với 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

Tóm tắt

Như bạn có thể thấy cách thiết kế trang web thì đơn giản nhưng để website hoạt động 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, Từ tối ưu ảnh, tới thi triển CDN, tới caching trình duyệt và server, tận dụng lợi thế của HTTP/2, Gzip, PHP7, HHVM và hơn nữa!