Select Page

Tối ưu hóa FEO- Front End Optimization

Tối ưu hóa FEO- Front End Optimization
This entry is part 4 of 6 in the series CDN- Kiến thức tổng hợp từ A- Z

Front End Optimization ( Tối ưu hóa FEO) còn được gọi là tối ưu hoá nội dung, là quá trình tinh chỉnh trang web của chúng ta để làm cho trình duyệt của khách truy cập thân thiện hơn và nhanh hơn. Trên ngữ cảnh của dịch vụ web, thuật ngữ “front end- giao diện người dùng” liên quan đến sự tương tác giữa trang web của chúng ta và trình duyệt của khách truy cập.
Tối ưu hóa FEO- Front End Optimization- Thác nước

Nói chung, tối ưu hóa FEO tập trung vào việc giảm kích thước tệp và giảm thiểu số lượng yêu cầu cần thiết cho một trang web nhất định để cung cấp nội dung toàn bộ cho người dùng.

Trong quá trình Front End Optimization, các nhà web designers tạo ra sự khác biệt giữa perceived load time và page load time thực tế. Perceived load time được đánh giá là độ ảnh hưởng của trang web đối với trải nghiệm người dùng chung( UX), trong khi page load time thường được sử dụng làm thước đo hiệu suất hoạt động.

Tối ưu hóa FEO làm giảm đến 80% thời gian phản hồi của trang web khi có khách hàng truy cập.

Mạng phân phối nội dung (CDN) đóng một vai trò quan trọng trong quá trình tối ưu hoá FEO vì chúng thường được sử dụng để sắp xếp nhiều nhiệm vụ tối ưu hóa đòi hỏi nhiều thời gian hơn. Ví dụ, một CDN điển hình cung cấp tính năng auto- file compessionauto- file minification, giải phóng chúng ta khỏi việc tự tay tinker với các nguồn tài nguyên trên trang web cá nhân.

Time To First Byte( TTTB)

Là thời gian để byte đầu tiên, được sử dụng để đo lường thời gian phản hồi của trang web, là một trong những yếu tố quan trọng nhất trong quá trình cải thiện hiệu suất back-end cũng như tối ưu hóa FEO, nhưng cũng là một trong những chỉ số hiệu suất bị hiểu nhầm nhiều nhất. Từ quan điểm thời gian tải thực tế, TTFB là khoảng thời gian cần cho byte dữ liệu đầu tiên đến từ máy chủ đến trình duyệt yêu cầu. Tuy nhiên, TTFB lại là khoảng thời gian cần cho trình duyệt phân tích cú pháp đầu tiên sau khi tải xuống tệp HTML.
Time To First Byte

Chỉ khi chúng ta nhận thấy TTFB ảnh hưởng đến trải nghiệm của người dùng, thì Time To First Byte trở nên có giá trị hơn trong hai thước đo Actual and  Perceived. Hoặc bạn có thể tìm hiểu chi tiết thêm về TTTB ở bài viết Time To First Byte- Chỉ số tăng tốc cho Website.

Một số cách tối ưu hóa FEO – Front End Optimization

CDN Caching- Tối ưu hóa FEO

Reducing HTTP Requests

Khi tải một trang web, một trình duyệt phải mở một kết nối TCP riêng cho mỗi yêu cầu HTTP được thực hiện, tương đương với số lượng các phần tử trang mà nó được yêu cầu tải xuống.

Giảm yêu cầu HTTP tối ưu hóa FEO

Vấn đề là có một giới hạn cho số lượng các kết nối đồng thời một trình duyệt có thể mở cho một máy chủ duy nhất. Hạn chế này tồn tại để bảo vệ một máy chủ bị quá tải với một số lượng lớn các yêu cầu HTTP. Tuy nhiên, nó cũng phục vụ như một nút cổ chai tiềm năng, thường buộc trình duyệt để bắt đầu xếp hàng các yêu cầu kết nối.

Khi ngưỡng kết nối tối đa đạt được nhanh chóng, các kỹ thuật tối ưu hóa FEO khác nhau được sử dụng để giảm thiểu số lượng các phần tử trang riêng lẻ. Một trong những cách phổ biến nhất là củng cố tài nguyên- gộp nhiều tập tin nhỏ hơn lại với nhau.

Ví dụ:

Giả sử mẫu trang web của chúng ta bao gồm một tệp HTML, 2 tệp CSS và 16 ảnh( bao gồm biểu trưng và các trình đơn khác nhau). Tổng cộng, một trình duyệt cần phải thực hiện 19 yêu cầu HTTP để tải trang trống trên trang web của chúng ta.

Một khách truy cập sử dụng Chrome chỉ có thể mở 6 TCP đến máy chủ của chúng ta, Chrome sẽ xếp hàng 13 yêu cầu còn lại. Tuy nhiên, nếu chúng ta hợp nhất tất cả các hình mẫu vào một tệp duy nhất, chúng ta có thể giảm số lượng yêu cầu từ 19 còn 4.

Thực hiện điều này cho phép Chrome phân tích cú pháp trang trong “sitting”, nó còn giảm số lượng round- trip time để tải trang.

Reducing HTTP Requests

CDN có thể làm giảm reducing HTTP request và tối ưu hóa FEO bằng cách kết nối trước các kết nối và đảm bảo rằng chúng vẫn mở trong suốt một phiên. Khi CDN không làm giảm số lượng yêu cầu mỗi lần, việc tổng hợp trước( nén file) cải thiện đáng kể hiệu suất bằng cách loại bỏ thời gian chậm trễ liên quan đến việc đóng và mở các kết nối TCP
Giao thức HTTP/2 vẫn ở giai đoạn early adoption stage, introduces multiplexing- một phương pháp kết nối cho phép gửi nhiều yêu cầu và phản hồi thông qua một kết nối TCP. Trong tương lai gần, điều này có thể giảm thiểu lợi ích của việc kết hợp tài nguyên.

File Compression

Mỗi một trang web của chúng ta được xây dựng từ một tập hợp các code HTML, JavaScript, CSS,… Trang càng phức tạp, tệp code càng lớn thì thời gian tải càng dài. Với việc nén tập tin, các tệp này có thể được thu nhỏ lại thành phần so với kích thước ban đầu để cải thiện khả năng đáp ứng của trang web, tối ưu hóa FEO. Ưu tiên cho thời gian quick encoding/ decoding times và high compression rates, GZIP là lựa chọn nén tập tin phổ biến nhất. Nó có thể làm giảm code một tập tin từ 60- 80%.

 Gziping không có hiệu quả trong việc giảm kích thước tệp .img vì chúng đã được nén.

Điểm mạnh của Gzip là ở một mức độ nào đó, khả năng hợp nhất tất cả các tệp vào một file nén duy nhất( a.k.a, tarball). Nhược điểm là nó ngăn ngừa khai thác tập tin cá nhân. Tuy nhiên, đây không phải là vấn đề về nội dung web vì nó được giải nén dù toàn bộ trang được tải đúng cách.

File Compression

Trong quá trình tối ưu hóa FEO, gần như tất cả các CDN cung cấp khả năng nén tập tin tự động, Gziping tất cả các mã nén( ví dụ: e.g, .css, .js) trước khi phục vụ chúng cho khách truy cập trang web.

Cache Optimization

HTTP cache headers đóng một vai trò quan trọng trong cách trình duyệt phân tích trang web, vì họ xác định mục nội dung nào được lưu trữ và lưu trữ trong thời gian bao lâu.

Cache Optimization

Caching đang lưu trữ các static file của chúng ta, thường là các tệp lớn nhất, bên ngoài Origin Server hoặc trên các Local drives của visitor hoặc CDN PoP gần đó. Điều này có thể cải thiện đáng kể tốc độ tải trang web.

Nhược điểm của Cache headers thủ công có thể là một công việc tẻ nhạt và không hiệu quả. Hơn nữa, các cơ chế caching thường gặp phải các vấn đề khi xử lý các dynamic file được tạo ra khi bắt đầu tải trang( ví dụ: .e.g, AJAX, thậm chí là cả dynamic file generated HTML files).

Nhiều CDN cung cấp các tùy chọn kiểm soát caching, thông thường là một bảng điều khiển thân thiện với người sử dụng. Với nó, chúng cho phép chúng ta thiết lập các chính sách trên toàn trang, quản lý các quy tắc caching cho các mục riêng lẻ và thậm chí thiết lập các chính sách cho toàn bộ các nhóm tập tin dựa trên loại tệp và vị trí( ví dụ: luôn luôn nhớ cache tất cả các hình ảnh trong thư mục “/blog” trong 60 ngày).

CDN cũng đã bắt đầu tích hợp các kỹ thuật “learing technique”. Chúng làm theo các mẫu sử dụng nội dung để tự động tối ưu hóa các chính sách caching, do đó lưu trữ các “uncacheable” dynamic content. Điều này làm giảm gần như tất cả các nhiệm vụ quản lý caching.

sự khác biệt khoảng cách giữa các developers write code và machines read it. Ý tưởng là trong khi các developers viết code cho việc đọc hiểu dễ dàng, với các space, ngắt dòng, nhận xét. Trình duyệt có thể đọc code như không có bất kỳ yếu tố nào kể trên biến những ý tưởng dễ đọc thành những thứ không cần thiết. Các ý tưởng này được cắt giảm và thường thực hiện việc này trước khi nén.

Code Minification

 CDN có khả năng đáp ứng hoàn toàn tự động hóa việc mã hóa code. Là một dịch vụ tiên tiến, đã tối ưu hóa FEO và phục vụ phần lớn nội dung của một trang web, rất dễ dàng để CDN giảm tất cả các tệp .js, .html, .css ngay cả khi chúng được gửi đến trình duyệt của khách truy cập.

Gzip và Minify

Gzip and Minify
Trong khi minify và gziping code có vẻ dư thừa, kết hợp cả hai phương pháp cung cấp kết quả tốt nhất. Do đó, minifying các tập tin trước khi gzip chúng sẽ thu nhỏ kích thước file thêm 5- 10%.

 

 

Image Optimization

Caching và compression là 2 phương pháp tối ưu hóa hình ảnh phổ biến nhất, tuy nhiên caching là phương pháp được xem là hiệu quả hơn. Lý do: không giống như các tệp code, tất cả các định dạng hình ảnh đã được nén.

Do đó, để giảm kích thước tệp hình ảnh chúng ta phải giả mạo dữ liệu của ảnh đó bằng cách xóa thông tin tiêu đề or giảm chất lượng hình ảnh ban đầu. Đây được gọi là phương pháp lossy compression.

Image Optimization

Mặc dù việc loại bỏ dữ liệu và giảm độ phân giải thường không được quan tâm, việc lossy compression có thể hữu ích đối với một số hình ảnh có độ phân giải cao, bởi đôi mắt của chúng ta không thể nhận thức được toàn bộ thông tin mà hình ảnh đó muốn truyền tải.

Lossy compression có thể loại bỏ sự thay đổi màu sắc và giảm độ phân giải phức tạp của điểm ảnh mà không ảnh hưởng đáng kể đến thông tin chính của hình ảnh.

CDN là giải pháp tối ưu cho bộ nhớ đệm hình ảnh và cũng thường được mua cho mỗi mục đích đó. Hơn nữa, CDN cũng giúp tự động hóa quá trình image compression, cho phép chúng ta chọn giữa tốc độ tải trang và chất lượng hình ảnh.

CDN tiên tiến hơn cũng cung cấp một tùy chọn rendering tiến bộ, đưa một twist trên khái niệm lossy compression. Với việc hiển thị tiến bộ, CDN tiến hành tải một phiên bản pixel hình ảnh một cách nhanh chóng. CDN dần dần thay thế bằng một loạt các biến thể tốt hơn và đẹp hơn cho đến khi hình ảnh thực tế đã sẵn sàng để tải.

Hiển thị toàn bộ rất hữu ích cho khả năng giảm thời gian tải được cảm nhận mà không ảnh hưởng đến chất lượng.

Progressive Rendering in Progress

Vector and Raster Image

Một kỹ thuật image optimization khác là thay thế một số hình ảnh thường xuyên của chúng ta( raster) với các đối tượng vector của chúng. Kỹ thuật này áp dụng cho các hình ảnh bao gồm các hình dạng hình học đơn giản: đường thẳng, đường cong, đa giác,… Một hình ảnh vector điển hình là một biểu tượng hoặc một sơ đồ.

Vector and Raster Image

Chúng ta nên sử dụng hình  ảnh vector bất cứ khi nào có thể, bởi vì:

  • Chúng có kích thước rất nhỏ, vì chúng chỉ cần giữ dữ liệu cho một tập hợp các tọa độ chứ không phải cho mỗi pixel riêng lẻ.
  • Có độ phân giải độc lập, chúng có thể được phóng to và thu nhỏ vô thời hạn mà không ảnh hưởng đến chất lượng. Điều này làm cho chúng trở nên hoàn hảo hơn cho thiết kế đáp ứng.

Lời kết

Front End Optimization- Tối ưu hóa FEO là một công việc tối ưu tốc độ, cải thiện RTT, TTTB, hiệu suất back-end, đánh giá mức độ thân thiện của website với người dùng. Tuy nhiên, đây không phải là một công việc thú vị gì, bởi rất mất thời gian, và cần sử dụng đến nhiều kỹ thuật khác nhau, cụ thể:

  1. Reducing HTTP Requests
  2. File Compression
  3. Cache Optimization
  4. Code Minification
  5. Image Optimization

Với hầu hết nhiều người, thì đây quả thật là điều không tưởng. Tuy nhiên, với hầu hết các dịch vụ CDN hiện nay sẽ giúp chúng ta trong phần lớn công việc này, với các tùy chọn rendering đơn giản trong khu vực CDN dashboard. Giúp chúng ta có nhiều thời gian để xử lý các công việc hoàn chỉnh, chuyên nghiệp hơn.

Series Navigation<< Bộ nhớ đệm của CDN- CDN CachingSSL/TLS- CDN và giao thức bảo mật Website >>

About The Author

Rain Nguyen

Tôi là Rain, người sáng lập và là biên tập viên của blog RN DOT COM. Tôi làm việc để xây dựng một cộng đồng vững mạnh bằng cách hướng dẫn mọi người viết blog kiếm tiền, xây dựng hệ thống kinh doanh của chính mình qua hệ thống bài viết của tôi. Nếu bạn thấy bài viết nào đó hay, hãy chia sẻ nó như một cách giúp tôi hỗ trợ những ai đang khao khát như bạn. I love all my friends!

Leave a reply

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Tùy chọn tìm kiếm tên miền