Không tải lên, 100% cục bộ, không cần tài khoản

Bài viết

Tối ưu media website cho tốc độ và Core Web Vitals

Hình ảnh thường chiếm khoảng 40 phần trăm tổng dung lượng của một trang web, nhiều hơn bất kỳ loại tài nguyên nào khác, và video còn thêm vào đáng kể trên các trang nhiều nội dung đa phương tiện. Làm đúng phần này là việc có đòn bẩy lớn nhất bạn có thể làm cho tốc độ tải, điểm Core Web Vitals và thứ hạng tìm kiếm. Tin vui: không phần nào trong đó đòi hỏi phần mềm chuyên dụng hay máy chủ, và tệp của bạn không bao giờ cần rời khỏi thiết bị.

Tác giả: Bastien Sulyan · Ngày đăng:

Chọn đúng định dạng trước mọi thứ khác

Chọn định dạng quan trọng hơn bất kỳ thanh trượt chất lượng nào. Với ảnh chụp trên trang web, WebP là mặc định đúng đắn: nó nhỏ hơn JPEG từ 25 đến 35 phần trăm ở cùng chất lượng hiển thị và mọi trình duyệt hiện đại đều hỗ trợ. AVIF nén còn tốt hơn nữa, hơn JPEG tới 50 phần trăm, đổi lại là mã hóa chậm hơn. Dùng AVIF cho ảnh tiêu đề và ảnh sản phẩm mà bạn nén một lần; dùng WebP cho mọi thứ bạn xử lý hàng loạt hoặc cần gấp. PNG chỉ thuộc về nơi bạn cần độ chính xác không mất dữ liệu hoặc nền trong suốt. SVG là lựa chọn hợp lý duy nhất cho logo, biểu tượng và minh họa: nó co giãn tới bất kỳ kích thước nào và thường chỉ nặng vài kilobyte so với hàng trăm kilobyte cho một bản raster tương đương.

Nén ảnh mà không làm giảm chất lượng nhìn thấy được

Hãy bắt đầu bằng cách thay đổi kích thước về đúng kích thước hiển thị thực tế: một ảnh tiêu đề hiển thị ở chiều rộng 1280 pixel không cần đến 4000 pixel dữ liệu. Thay đổi kích thước trước, rồi mới nén. Với ảnh chụp, chất lượng 80 ở WebP hoặc JPEG là ngưỡng thực dụng mà dưới đó người xem bình thường bắt đầu nhận ra, nên hãy nhắm tới khoảng 75 đến 85 và xem kết quả ở mức phóng to tối đa trước khi đăng. Với đồ họa có chữ và vùng màu phẳng, PNG không mất dữ liệu hoặc SVG giữ được độ sắc nét mà định dạng mất dữ liệu sẽ làm nhòe. Trình nén ảnh trên trang này xử lý tất cả các định dạng đó, chạy hoàn toàn trong trình duyệt của bạn, và áp dụng cùng các thuật toán như những công cụ máy tính để bàn chuyên dụng.

Chuyển đổi video cho web mà không tải nó lên

Vòng lặp nền và video nhúng là nơi việc tối ưu media web thường còn thiếu sót. Một tệp MP4 với H.264 chạy được ở mọi nơi, và WebM là lựa chọn miễn phí bản quyền được mọi trình duyệt hiện đại hỗ trợ. Trình chuyển đổi video của trang này mã hóa WebM bằng VP8, nằm cùng nhóm nén với H.264: chỉ đổi định dạng container thôi sẽ không làm tệp nhỏ hơn, lợi ích thực sự là một chuỗi codec hoàn toàn miễn phí bản quyền và hỗ trợ gốc cho kênh alpha. Cách thực dụng là chuyển đổi một lần sang WebM, phục vụ nó như nguồn ưu tiên trong một phần tử video, và giữ MP4 làm phương án dự phòng cho các trình duyệt cũ hơn. Việc chuyển đổi chạy ngay trong trình duyệt của bạn thông qua FFmpeg được biên dịch sang WebAssembly: không có gì được tải lên, và các tệp lên đến 500 MB được chuyển đổi mà không cần chờ hàng đợi. Với video nền nội tuyến, hãy cân nhắc thêm công cụ cắt video để loại bỏ những giây thừa trước khi mã hóa: thời lượng là yếu tố lớn nhất quyết định dung lượng tệp.

Tài nguyên nội tuyến: base64 và SVG

Những ảnh rất nhỏ, biểu tượng và favicon được nhúng trực tiếp vào HTML hoặc CSS dưới dạng chuỗi base64 sẽ loại bỏ một lượt đi về mạng cho mỗi tài nguyên. Điều này hợp lý với những tài nguyên dưới khoảng 2 KB xuất hiện trên mọi trang, chẳng hạn một sprite logo hoặc một biểu tượng đang tải. Các tài nguyên lớn hơn nên giữ ở dạng tệp riêng vì base64 mã hóa nặng hơn 33 phần trăm so với dạng nhị phân, và trình duyệt lưu cache các tham chiếu tệp chứ không lưu cache dữ liệu nội tuyến một cách độc lập. Trình tối ưu SVG loại bỏ phần dư thừa của trình chỉnh sửa khỏi các tệp SVG xuất ra mà không đụng đến phần hiển thị. Trình chuyển ảnh sang base64 tạo ra URI data sẵn sàng để dán ngay trong trình duyệt của bạn.

Sự đánh đổi giữa một tệp riêng được lưu đệm cần thêm một yêu cầu HTTP và một tài nguyên nội tuyến Base64 lớn hơn khoảng 33% và được gửi lại ở mỗi trang

Phục vụ đúng kích thước và tải trước

Hai chi tiết phân phối quan trọng không kém bản thân các tệp. Thứ nhất là định cỡ theo thiết bị. Với danh sách srcset gồm các mô tả độ rộng (image-400.webp 400w, image-800.webp 800w và tiếp theo), trình duyệt chọn tệp nhỏ nhất vẫn đủ bao phủ màn hình, nhân chiều rộng CSS với tỉ lệ điểm ảnh thiết bị (device pixel ratio) trước khi yêu cầu bất cứ thứ gì. Một điện thoại có bố cục rộng 390px và màn hình 3x cần khoảng 1170 điểm ảnh, vì vậy nó tải phiên bản 1200w và bỏ qua bản gốc desktop. Thứ hai là độ ưu tiên. Trình duyệt chạy một preload scanner (bộ quét tải trước) đọc trước và bắt đầu tải hình ảnh trước khi trình phân tích cú pháp chính đến chúng; thêm fetchpriority="high" vào hình ảnh lớn nhất ở vùng hiển thị đầu tiên (above-the-fold) cho trình duyệt biết cần kéo nó trước tiên, điều thường quyết định Largest Contentful Paint của bạn.

Biểu đồ cột so sánh ảnh gốc từ máy ảnh 4000 pixel, kích thước 1200 pixel mà bố cục trang sử dụng và ảnh thu nhỏ 480 pixel, cho thấy việc thay đổi kích thước tiết kiệm nhiều hơn so với việc chỉnh chất lượng

Công cụ trong bài viết này

Câu hỏi thường gặp

Nén ảnh có ảnh hưởng đến thứ hạng tìm kiếm của tôi không?

Google dùng Core Web Vitals như một tín hiệu xếp hạng, và Largest Contentful Paint gần như luôn là một hình ảnh hoặc khung hình đại diện video. Một trang có ảnh tiêu đề tải trong chưa đầy một giây sẽ được chấm điểm tốt hơn trang mất ba giây. Việc nén và chọn đúng định dạng ảnh hưởng trực tiếp đến chỉ số này, vậy nên đúng vậy, tối ưu ảnh có tác động SEO đo lường được. Tác động mạnh nhất trên di động, nơi kết nối chậm hơn và cái giá phải trả cho ảnh nặng lớn hơn.

Vì sao nên xử lý media tại máy thay vì dùng dịch vụ web?

Hầu hết công cụ media trực tuyến đòi hỏi tải tệp của bạn lên một máy chủ từ xa, việc này tốn thời gian, ngốn băng thông, và đồng nghĩa với một bản sao tệp của bạn tồn tại trên hạ tầng bạn không kiểm soát. Các công cụ trên trang này chạy hoàn toàn trong trình duyệt của bạn: hình ảnh và video của bạn được xử lý trên thiết bị và kết quả được tải về trực tiếp. Không cần tài khoản, không phải chờ tải lên, và không một thông tin nào về tệp của bạn từng được gửi tới máy chủ.