Tốc độ là một yếu tố quan trọng trong trải nghiệm trực tuyến của người dùng, và trang web của bạn không phải là ngoại lệ. Trong cuộc hành trình này, chúng ta đã tìm hiểu cách tối ưu hóa tốc độ trang web từ phần 1 và phần 2. Bây giờ, hãy bước vào Phần 3 của chuyến đi này để tìm hiểu cách tối ưu hóa hình ảnh và font trên trang web của bạn.
Hình ảnh và font không chỉ là phần thiết yếu của thiết kế trang web, mà còn là yếu tố quyết định trong việc tạo ra trải nghiệm trực tuyến đáng nhớ. Chúng ảnh hưởng đến tốc độ tải trang, tiêu thụ băng thông, và thậm chí cả SEO. Vì vậy, chúng ta sẽ khám phá cách tối ưu hóa chúng để đảm bảo trang web của bạn hoạt động nhanh chóng và mượt mà.
Hãy sẵn sàng để khám phá những chiến lược mạnh mẽ và các bước thực hiện để cải thiện tốc độ và hiệu suất của trang web. Bắt đầu với việc tối ưu hóa hình ảnh và font!
Tối ưu ảnh và video cho website
Hình ảnh và video thực tế là những loại dữ liệu rất đơn giản, không đòi hỏi nhiều xử lý phức tạp từ máy chủ web. Nơi họ làm chậm việc tải trang của bạn là trong việc giao hình ảnh qua các mạng và hiển thị trên trình duyệt của người dùng. Nếu làm hình ảnh quá lớn, chúng sẽ mất thời gian để gửi và tiêu thụ bộ nhớ của trình duyệt. Hơn hết, hình ảnh ảnh hưởng đến thời gian tải trang web của bạn theo cách mà người dùng cảm nhận.
Dưới đây là các chiến lược của tôi để phục vụ hình ảnh không chỉ tải nhanh mà còn giữ cho trang web của bạn vẫn trông đẹp như bạn đã thiết kế.
Chọn định dạng hình ảnh
- JPEG – tạo ra các tệp nhỏ hơn cho các bức ảnh hoặc hình ảnh có nhiều màu sắc.
- PNG (còn gọi là “png-8”) – tạo ra các tệp nhỏ hơn cho hình ảnh có ít màu sắc, đường nét và đối sáng, và cũng có thể tạo độ trong suốt.
- PNG 24 – phiên bản chất lượng cao hơn của PNG thích hợp cho các bức ảnh, nhưng kích thước tệp vẫn lớn hơn so với JPEG, nên không được khuyến nghị trừ khi bạn cần tính trong suốt.
- WEBP – kết hợp điểm mạnh của JPEG và PNG, cho phép chất lượng ảnh tốt và trong suốt, và nén tốt hơn so với JPEG (kích thước tệp nhỏ hơn). Có thể sử dụng thay thế cho JPEG hoặc PNG 24, nhưng nên có sự thay thế trong trường hợp cần thiết! (Theo ý kiến của tôi, tôi chưa sử dụng WebP.)
- GIF – phổ biến nhất trong các hoạt ảnh meme chất lượng thấp. Hữu ích khi bạn muốn chia sẻ một video, nhưng không cần độ nét hoặc âm thanh. GIF cơ bản là định dạng trình chiếu hình ảnh giả mạo là định dạng video chất lượng thấp. Hiếm khi được sử dụng trong môi trường chuyên nghiệp như một trang web, nơi bạn thường muốn hình ảnh và video có độ phân giải cao. Chỉ cần biết rằng GIF cũng có thể được tối ưu hóa.
Chọn kích thước hình ảnh phù hợp
- Thay đổi kích thước hình ảnh sao cho phù hợp với kích thước khu vực cụ thể. (ví dụ: sử dụng hình ảnh có chiều rộng 400px cho khu vực có chiều rộng 400px.)
- Để hình ảnh quan trọng hoặc lớn hơn hiển thị tốt hơn trên màn hình retina, hãy sử dụng hình ảnh có kích thước gấp đôi khu vực (ví dụ: hình ảnh có chiều rộng 800px cho khu vực có chiều rộng 400px.)
- Hình ảnh không quan trọng hoặc nhỏ hơn có thể được thay đổi kích thước chính xác theo kích thước khu vực (không cần phải tương thích với màn hình retina).
- Tôi tin rằng hầu hết mọi người không sử dụng màn hình retina hoặc ultra-HD ở độ phân giải đầy đủ. Nhiều người sẽ co giãn lên 150%, điều này có nghĩa là bạn (có lẽ) có thể thoát khỏi việc chỉ sử dụng hình ảnh có kích thước 1,5 lần.
- Đừng tải lên các bức ảnh nguyên bản trực tiếp từ máy ảnh của bạn. Hãy thay đổi kích thước, cắt và chỉnh sửa chúng trước! Hoặc sử dụng plugin nén hình ảnh để tối ưu hóa tự động các bức ảnh được tải lên.
- Một lãng phí lớn sẽ là tải một bức ảnh có chiều rộng 2000px vào một không gian có chiều rộng 300px. Điều này lãng phí lưu trữ máy chủ, băng thông internet và xử lý trình duyệt.
Dùng hình ảnh responsive (adaptive) cho thiết bị nhỏ hơn
- Hãy đảm bảo rằng chủ đề của bạn có tính năng thích ứng với thiết bị di động (hầu hết các chủ đề đều có) và hiển thị hình ảnh nhỏ hơn cho các thiết bị nhỏ hơn.
Tính năng này mặc định trong WordPress và hầu hết các chủ đề được viết tốt, và cũng có thể được kích hoạt bằng các plugin hình ảnh thích ứng. Rõ ràng, việc tải hình ảnh kích thước máy tính để bàn cho các thiết bị di động không tốt! Vấn đề là một số chủ đề không kích hoạt tính năng này đúng cách. Hoặc họ chỉ tải phiên bản kích thước máy tính để bàn cho tất cả các thiết bị, hoặc thậm chí tệ hơn… họ tải CẢ HAI (kích thước máy tính để bàn và di động) cho tất cả các thiết bị.
Nếu trang web của bạn sử dụng hình ảnh nền lớn, bạn nên đảm bảo rằng tính năng này hoạt động đúng cách trên thiết bị di động!
Nén hình ảnh
- Nén JPEG thủ công – sử dụng phần mềm chỉnh sửa hình ảnh (ví dụ: Photoshop) để quyết định chất lượng đầu ra chính xác mà bạn muốn. 60% cho định dạng jpeg là an toàn. Bạn có thể thử nghiệm vài điểm phần trăm lên hoặc xuống. Tốt cho hình ảnh lớn hoặc quan trọng.
- Nén PNG thủ công – sử dụng phần mềm chỉnh sửa hình ảnh và điều chỉnh số lượng màu sắc.
- Nén tự động – sử dụng một plugin để thực hiện việc này. Các plugin nén hình ảnh yêu thích của tôi (theo thứ tự) là ShortPixel, LiteSpeed Cache, WP Compress, EWWW Optimizer. Bạn có thể sử dụng chúng cho các hình ảnh không quan trọng hơn hoặc cho người dùng không chuyên về công nghệ.
Một cách nhanh chóng khác để nén hình ảnh thủ công: chỉ cần tải lên công cụ nén hình ảnh của ShortPixel (miễn phí).
Chuyển đổi các hình ảnh PNG trong suốt không cần thiết sang định dạng JPEG
Tôi thường thấy có rất nhiều hình ảnh PNG trong suốt lớn nằm trên nền màu trắng đơn giản. Chúng chiếm rất nhiều không gian khi chúng có thể dễ dàng chỉ chiếm một nửa kích thước và thậm chí có vẻ tốt hơn khi chuyển thành định dạng JPEG.
Nếu hình ảnh PNG trong suốt của bạn đặt trên nền màu đơn, bạn có thể dễ dàng chuyển đổi hình ảnh đó sang định dạng JPEG và phù hợp với màu sắc của nền. Bạn sẽ tiết kiệm rất nhiều byte và không thấy bất kỳ sự khác biệt nào! Nếu hình ảnh của bạn đơn giản, thì một hình ảnh PNG với nền màu đơn vẫn có thể nhẹ hơn so với hình ảnh PNG trong suốt.
Vẽ lại hình ảnh hoặc biểu tượng bằng CSS
- Một số chủ đề hoặc plugin không cần thiết sử dụng tệp hình ảnh cho các đồ họa rất đơn giản (đường, khối, biểu tượng) có thể dễ dàng được vẽ bằng CSS.
- Bạn có thể kiểm tra bằng cách kiểm tra các trang trí trực quan xung quanh chủ đề trang web của bạn.
- Vẽ lại chúng bằng CSS và bạn sẽ tiết kiệm vài yêu cầu HTTP không cần thiết.
Bạn có thể kết hợp hình ảnh và CSS cùng nhau. Sử dụng CSS để vẽ hình dạng trong hình ảnh hoặc bộ lọc màu. Có rất nhiều cách thông minh để tiết kiệm không gian và trông tốt hơn.
- Màu gradient – đã có từ khá lâu trong CSS, đặc biệt trong thời kỳ web 2.0.
- Bóng – sử dụng CSS thay vì đặt bóng ở mép của hình ảnh của bạn!
- Bộ lọc đen trắng – tuyệt vời để sử dụng lại một hình ảnh màu đã có.
- Bộ lọc màu – ngược lại với trường hợp trên.
Biểu tượng dạng font hay SVG
Trong thế giới phát triển, có rất nhiều tranh luận về việc biểu tượng có nên được sử dụng dưới dạng SVG hay dạng font biểu tượng. Các nhà phát triển có tự do lựa chọn vì họ biết cái nào phù hợp với mục đích và quy trình làm việc của họ. Dưới đây là những hướng dẫn của tôi:
- Biểu tượng đơn giản (mũi tên, kính lúp, menu hamburger) có thể vẽ bằng CSS.
- Biểu tượng phức tạp (biểu tượng mạng xã hội, giỏ hàng, bút ký, v.v.) cần sử dụng SVG hoặc font biểu tượng.
- Nếu bạn chỉ có 2-3 biểu tượng, SVG sẽ nhẹ hơn (và có thể được nhúng trực tiếp).
- Nếu bạn có 10 biểu tượng trở lên, hãy sử dụng dịch vụ tạo font biểu tượng tùy chỉnh (Fontastic, Fontello, IcoMoon). Hoặc tạo font tùy chỉnh của riêng bạn.
- Font biểu tượng tự làm (là sự lựa chọn yêu thích của tôi) và tải nội dung từ máy chủ nhanh nhất, bởi vì một tệp font biểu tượng nhỏ 2kb có thể tải được 10-20 biểu tượng, đó là tất cả những gì bạn thực sự cần.
- Công việc phiền phức với font biểu tượng tự làm là nó mất nhiều thời gian hơn để cập nhật nếu bạn muốn thêm/sửa một biểu tượng sau này.
- Font biểu tượng tồi nhất là những font từ bên thứ ba được tải từ bên ngoài! Ví dụ, Font Awesome có kích thước từ 30-200kb và tải nhiều biểu tượng không sử dụng.
- Nếu bạn sử dụng SVG, bạn có thể tối ưu hóa chúng bằng công cụ SVGOMG của Jake Archibald. Xem xét những gì bạn có thể tắt hoặc giảm chất lượng mà không ảnh hưởng đến giao diện.
- Vui lòng không nhúng trực tiếp SVG trừ khi nó thực sự nhỏ và chỉ sử dụng tại một nơi trên trang web.
Hầu hết mọi người không có kỹ năng vẽ lại bằng CSS hoặc tạo font biểu tượng của riêng họ. Tất cả những gì tôi yêu cầu là bạn sử dụng SVG hoặc tuân theo một trong những dịch vụ font tùy chỉnh đó. Bất kể bạn làm gì, đừng tải FontAwesome vì nó có kích thước khoảng 40-75kb và tốn 100-150ms thời gian tải. Tất nhiên, nhiều nhà phát triển chủ đề tải FA vì đó là cách dễ dàng và lười biếng nhất để đưa nhiều biểu tượng vào một chủ đề.
Xóa các kích thước phương tiện không sử dụng
- Liệu có phải việc có rất nhiều tệp hình ảnh sẽ làm cho trang web của bạn chạy chậm không? Có lẽ không.
- Liệu nó có làm chậm chức năng trang web phía sau không? Có thể.
- Nó có thể ảnh hưởng đến tốc độ trang web của bạn trong thời gian sao lưu dài hơn không? Có!
- Liệu nó có làm cho việc lưu trữ web của bạn trở nên đắt hơn không? Có.
Hơn hết, nó làm cho trang web của bạn trở nên lộn xộn và nặng nề hơn cần thiết. Hãy dọn dẹp điều này. Hãy vào cài đặt chủ đề và plugin của bạn và bỏ chọn/tắt bất kỳ kích thước phương tiện nào bạn không cần. Một số công việc này có thể đòi hỏi một nhà phát triển kiểm tra kỹ lưỡng tất cả các mẫu trang của bạn, chỉnh sửa functions.php và tắt thủ công các kích thước phương tiện không sử dụng.
Bạn gặp khó khăn trong việc tìm tất cả các kích thước phương tiện mà trang web của bạn đang sử dụng? Một mẹo hữu ích đối với tôi là cài đặt một trong những plugin nén hình ảnh đó. Chúng sẽ liệt kê tất cả các kích thước ở một nơi tiện lợi.
- Loại bỏ các kích thước phương tiện không sử dụng.
- Cũng có thể loại bỏ các kích thước giống nhau quá nhiều. (Giữ lại kích thước lớn hơn.)
- Sau khi bạn đã xóa các kích thước phương tiện không sử dụng, bạn sẽ phải xóa các hình ảnh không sử dụng… nhưng hãy cẩn thận!
- Có các plugin khẳng định rằng họ có thể làm công việc này. Hãy nghiên cứu và thử nghiệm cẩn thận. Tôi thật sự không chắc chắn về các plugin nào chỉ xóa các kích thước phương tiện không sử dụng và các plugin nào xóa toàn bộ hình ảnh không sử dụng.
- Hãy cẩn trọng với những chủ đề báo/magazine có nhiều kích thước hình ảnh!
Sử dụng CSS sprites
CSS sprites là một chiến thuật cũ nhưng vẫn hoạt động trong một số trường hợp sử dụng. Lâu đời trước đây, một số nhà phát triển đã kết hợp nhiều hình ảnh nhỏ thành một tệp hình ảnh và sau đó chỉ gọi ra từng phần trong CSS. Đó là một cách thông minh để giảm các yêu cầu HTTP. Hiện nay, chiến thuật này không cần thiết nữa vì HTTP/2 cho phép bạn có nhiều yêu cầu HTTP hơn và hầu hết các hình ảnh nhỏ có thể được vẽ trong CSS, font biểu tượng và SVG. (Màu sắc thiết kế cũng trở nên phẳng hơn nhiều, thay vì thời kỳ WEB 1.0 có màu sắc quá nhiều.)
Bạn có thể thử sử dụng CSS sprites nếu bạn có nhiều hình ảnh nhỏ có nhiều màu sắc (và/hoặc không thể được vẽ bằng font biểu tượng hoặc SVG).
Nén video
- Nén video càng nhiều càng tốt.
- Xuất ra định dạng webm hoặc mp4. (Tôi thích mp4.)
Bất kỳ video nào tự động phát khi tải trang cần phải được nén mạnh. Nếu bạn là một biên tập viên chuyên nghiệp và biết cách tạo ra sự cân bằng hoàn hảo giữa kích thước tệp nhỏ và chất lượng tốt, hãy làm theo cách của bạn. Đối với mọi người khác, hãy làm theo cách tôi dễ dàng!
- Tải video lên Vimeo, Youtube, Facebook, v.v.
- Sau đó tải xuống phiên bản nén của họ.
Các dịch vụ này đăng tải hàng tỷ video mỗi ngày, tôi nghĩ rằng họ đã có thuật toán tốt nhất! Sự nén của Youtube là sự cân bằng tốt nhất giữa kích thước nhỏ và chất lượng tốt. Nếu bạn muốn chất lượng cao hơn một chút, hãy thử Vimeo. Nếu bạn muốn kích thước nhỏ hơn, hãy thử Facebook.
- Quan trọng hơn việc nén video là quyết định bạn cần gì từ nó:
- Bạn có thực sự cần âm thanh không? (Loại bỏ nếu không cần.)
- Bạn có thực sự cần màu sắc không?
- Video có phải chỉ là nền cho văn bản không? (Có thể giảm chất lượng thậm chí hơn nữa.)
- Nó có thực sự phải lớn như vậy không?
Bạn có thực sự cần video không? Nó có được xem không? Có lẽ hình ảnh lớn và đẹp hơn để sử dụng!
Hẹn gặp bạn ở phần 4
