Việc tinh chỉnh, chỉnh sửa hình ảnh sao cho đúng và phù hợp cũng là điều kiện cần quan trọng trong quá trình SEO website, nhưng việc này đôi khi cũng tốn khá nhiều thời gian vì thao tác quá rườm rà, trong thời gian qua AnhThienAD’s Blog có biết và sử dụng đến Shortpixel, là một plugin có giải pháp giúp tối ưu hóa ảnh chuẩn SEO cho website rất hiệu quả. Hiện Thiện đang áp dụng vào rất nhiều dự án của bản thân.
Ưu điểm của ShortPixel
ShortPixel và plugin của nó có những ưu điểm sau:
- Hỗ trợ nén ảnh lossy và lossless cho các định ảnh phổ biến như JPG, PNG, GIF và WebP cộng với file PDF.
- Không giới hạn kích thước file
- Hỗ trợ chuyển đổi hình ảnh sang định dạng WebP cho tốc độ tải tối ưu.
- Hỗ trợ chuyển đổi định dạng CMYP sang RGP giúp hiển thị tốt trên mọi kích thước màn hình
- Cho phép loại bỏ các thẻ EXIF như dữ liệu GPS, ngày tháng và thiết bị sử dụng để chụp hình…
- Bạn có thể sử dụng một api key trên nhiều website
- Hỗ trợ backup hình ảnh gốc để khôi phục khi cần
- Có nhiều loại gói trả phí giúp bạn dễ dàng chọn một gói phù hợp với nhu cầu của bạn.
- Hỗ trợ nén ngoài bên ngoài thư mục uploads
Nhược điểm
Nhược điểm lớn nhất là chỉ miễn phí 100 hình ảnh mỗi tháng. Tuy nhiên, bạn có thể nhận thêm quota nếu sử dụng tham gia chương trình Tell a Friend. Tốt nhất bạn nên mua gói trả phí để sử dụng cho thoải mái. Chi phí ở đây không quá đắt.
1. Hướng dẫn cài đặt plugin shortpixel cDN
- Đầu tiên bạn cần phải đăng ký một tài khoản ShortPixel tại đây, khi đăng ký mặc định bạn được miễn phí 2 tháng với mỗi tháng 100 credits.
- AnhThienAD’s Blog khuyên bạn nên mua gói ONE-TIME IMAGES, nghĩa là với mỗi lần mua sẽ không bị giới hạn thời gian dùng miễn là tài khoản bạn còn credits.
- Sau đó, một email sẽ được tự động gửi vào hộp thư của bạn kèm theo API Key và mật khẩu đăng nhập tài khoản ShortPixel.
- Ta tiến hành cài đặt plugin ShortPixel tại đây.
- Vào mục cài đặt => ShortPixel, nhập API Key vào tab General, sau đó nhấn nút Validate.
2. Hướng dẫn cấu hình plugin Shortpixel CDN
Compression Tab
- Compression Level: Có 3 hình thức nén: lossy (nén giảm chất lượng-nhưng khó nhận ra được bằng mắt thường), glossy (giảm một chút) hoặc lossless (nén không giảm chất lượng). Nếu trang bạn không cần các bức ảnh với độ phân giải lớn, sắc nét thì cứ chọn lossy là ổn rồi.
- Next-gen Images Support: trong đó Serve the images in the WebP để tạo phiên bản WebP của hình ảnh chỉ sau khi ảnh đã được tối ưu, cung cấp khả năng nén không làm giảm chất lượng vượt trội cho hình ảnh trên web. Việc này có thể giúp ảnh PNG giảm dung lượng 3 lần và giúp ảnh JPG giảm 25% dung lượng. Và AVIF next-gen image giúp tạo phiên bản AVIF cho ảnh, nhưng hiện tại định dạng này vẫn còn chưa được hỗ trợ nhiều trên các trình duyệt.
- Remove EXIF: Chức năng giúp giữ lại các thông số của bức ảnh như thông tin máy ảnh, ngày chụp, giờ chụp, vị trí chụp,… blogger tụi mình thì không cần quan tâm đến cái này.
Behavior Tab
- Fade-in effect: Hiệu ứng làm mờ, giúp cho quá trình tải ảnh trở nên mượt mà hơn trong mắt người dùng, ta chọn bật mục này.
- Smart crop: Crop hình một cách thông minh, mục này ta tắt.
- Replace method: Tùy chọn này quy định cách plugin thay thế hình ảnh đã tối ưu với hình ảnh ban đầu (ShortPixel thay đổi url của ảnh sau khi tối ưu hóa chúng). Ta chọn SRC, bật nút Generate <noscript> tag, SRC: đây là phương pháp được khuyến khích, nó đảm bảo các hình ảnh chỉ còn lại thuộc tính src.
- API URL: Đừng sửa đổi mục này nếu như bạn chưa hiểu nó.
- Lazy-load threshold: Tùy chọn này là để quy định khi nào một ảnh được tải, ví dụ khi ta để là 500px thì nghĩa là một hình ảnh được tải khi ta gần khung nhìn với khoảng cách 500px.
- Images hover handling: Bật tính năng này nếu bạn muốn khi di chuột vào ảnh nó chuyển màu.
- Logged-in users: Hủy kích hoạt tùy chọn này nếu tối ưu hóa hình ảnh xung đột với trình tạo trang của bạn. Xin lưu ý rằng trong trường hợp này, bạn sẽ không thể sử dụng Công cụ kiểm tra hình ảnh nữa.
- LQ image placeholders: Tính năng này đơn giản sẽ tạo ra một ảnh có dung lượng thấp của bức ảnh hiện tại, để trong trường hợp chất lượng internet quá tệ thì thiết bị vẫn tải được ảnh và khi mọi thứ ổn hơn thì bức ảnh chất lượng thấp đó được thay thế với bức được tối ưu chuẩn hơn, điều này giúp trải nghiệm người dùng tốt hơn. Bạn bật tính năng này lên.
- Native lazy-loading: Nếu trình duyệt của bạn có hỗ trợ tính năng lazy-loading thì hãy bật mục này, thường thì nhiều ảnh sẽ được load hơn là chỉ dùng ShortPixel.
- Alter width and height: Sửa đổi các thuộc tính chiều rộng và chiều cao của thẻ IMG để phản ánh kích thước hình ảnh đã thay đổi kích thước. Kích hoạt tính năng này nếu bạn gặp vấn đề về kích thước màn hình với hình ảnh được JavaScript xử lý sau khi chúng được thay đổi kích thước bởi ShortPixel.
- Sizes from postmeta: Kiểm tra bảng postmeta để biết kích thước hình ảnh, nếu hình ảnh không xuất hiện cục bộ. Kích hoạt tính năng này nếu bạn có hình ảnh được tải xuống và bạn gặp phải sự thay đổi bố cục trong khi trang được hiển thị trong trình duyệt.
areas tab
- Lazy-load the backgrounds: Có hai tùy chọn, tải background từ các khối STYLE nội tuyến và tải và thay đổi kích thước background theo kiểu nội tuyến TAGS. Phần này ta để yên.
- Backgrounds maximum width: Thiết lập chiều rộng tối đa của background, trên tất cả các thiết bị. Sử dụng để thu nhỏ các background lớn không được tải chậm. Giá trị được đề xuất là 1920px.
- Replace in CSS files: Thay thế background và phông chữ trong CSS được lưu trong bộ nhớ cache của LiteSpeed Cache.
- Serve JS from the CDN: Cung cấp các tệp JavaScript từ CDN. Các tệp JS từ các miền khác không bị ảnh hưởng bởi tùy chọn này.
- Replace in the JS blocks: Xem kĩ phần này nếu bạn muốn thay thế các hình ảnh được cung cấp trong các khối JavaScript. Đối với một số thư viện ảnh hoặc plugin, hình ảnh sẽ không được thay đổi kích thước trừ khi bạn kích hoạt tùy chọn này.
- Replace in JSON data: Quan tâm mục này nếu bạn có các phần nội dung cụ thể được phân phối bằng Javascript trong các gói được mã hóa JSON.
exclusions tab
Phần này đơn giản là dùng khi bạn muốn loại trừ những trang hay những thư mục ảnh mà mình không muốn tối ưu và sử dụng các tính năng load ảnh kể trên.
- Excluded selectors
- Excluded URLs
3. Cách tính Credits trong Plugin ShortPixel
Cách tính credits như sau, cứ 1 credit = 1 ảnh hay thumbnail, tức 1 credit tương đương với 1 ảnh được tối ưu hóa. Ngoài ra, nếu bạn lựa chọn tạo WebP hoặc AVIF thì cũng sẽ được tính vào credits.
4. Cách sử dụng Plugin Shortpixel
Sau khi đã cài đặt xong như trên, bạn thực hiện:
- Bạn truy cập vào mục media
- Chọn Bulk ShortPixel
- Click vào Start Optimizing để nén các ảnh đã up lên website
Quá trình diễn ra lâu hay chậm phụ thuộc vào số lượng ảnh có trên website của bạn, và kết nối mạng giữa hosting với máy chủ của ShortPixel.
Bạn nhớ không nên tắt tab hay trình duyệt khi đang khởi chạy plugin, nếu tắt thì quá trình cũng sẽ bị dừng lại cho đến khi bạn mở trở lại.
Câu hỏi thường gặp về Shortpixel
1/ Shortpixel là gì ?
Shortpixel là 1 giải pháp tối ưu hóa ảnh của bạn trên Website/blog đến từng “centimet” nhờ công nghệ nén đặc biệt giúp tối ưu nén ảnh đến 90% nhưng không bị làm ảnh hưởng chất lượng ảnh quá nhiều nếu nhìn bằng mắt thường.
2/ Shortpixel dùng cho ai ?
Hiện, Thiện thấy giải pháp này phù hợp cho những người làm blog như mình, làm thương mại điện tử, bán hàng online dạng nhỏ lẻ, tầm 10,000 sản phẩm đổ lại. Mới bước chân vào thế giới này thì bạn có thể dùng thử để trải nghiệm nhé !
3/ Tại sao nên lựa chọn Shortpixel ?
Trong hơn 10 năm kinh nghiệm vọc WordPress và các trang khác thì Thiện chọn Shortpixel vì sự đơn giản, support khá nhanh và giá rẻ so với những dịch vụ tương tự khác như tinypng, imagefy, … Đặc biệt hơn, Shortpixel cho sử dụng miễn phí 10,000 credit trước để cảm nhận.
Cá nhân mình từng là 1 lập trình viên về Website, mình rất thích cách Shortpixel tự cắt màn hình thiết bị thông minh, lưu ảnh đó về cache trên CDN để mọi người truy cập web 1 cách nhanh chóng hơn. Ngoài ra, giảm tải tài nguyên CPU cho server chứa website của bạn khi website có lượng truy cập khá lớn.
4/ Tôi có thể đọc hỗ trợ về plugin Shortpixel này ở đâu ?
Bạn có thể vào trang này để tìm hiểu toàn bộ các lỗi thường gặp về Shortpixel nếu bạn mắc phải hoặc gửi email hoặc chat trực tiếp trên Web để dịch vụ này support nhé !
Dễ phải không nào, qua bài viết hướng dẫn cấu hình plugin ShortPixel này, AnhThienAD’s Blog chúc bạn cài đặt thành công và trải nghiệm sự tuyệt vời của plugin ShortPixel này nhé!
