Jetpack Image CDN

Image CDN là một tính năng trong plugin Jetpack, cách đây tầm tháng nhớ là họ dùng tên Photon, không hiểu sao bữa nay vào coi lại thì đổi lại tên thành Image CDN 😀

Với tính năng Image CDN (Speed up images and photos) gần như bạn không cần phải dùng thêm bất cứ một plugin nào khác để tối ưu ảnh nữa, vì Image CDN đã làm tất cả, với truy cập từ Việt Nam thì hình như kết nối tới server tại Sing hoặc Hong Kong gì đó, ping khoảng 30-50 ms, hệ thống CDN ảnh của họ cũng rất trâu, so với các CDN khác, thậm chí so với cả Cloudinary với hệ thống CDN từ Akamai có location tại Việt Nam mà mình thấy cũng chẳng thua kém bao nhiêu, thậm chí tổng thể còn có thể nhanh hơn

Điều này vừa là ưu, vừa là khuyết của Image CDN, đầu tiên là họ chỉ có dùng 3 định dạng ảnh là gif, png, jpg, được truy xuất theo HTTP (80) hoặc HTTPS (443), tiếp theo là ảnh khi lần đầu tiên được sử dụng, nó sẽ được cache vĩnh viễn vào hệ thống của Image CDN, kết quả ta có 1 tấm ảnh load cực kì nhanh từ lần xem thứ 2, tuy thế nếu vì lý do nào đó, bạn cần thêm sửa bức ảnh, nó sẽ không được cập nhập, và vẫn giữ như lần đầu tiên được cache, khắc phụ thì bạn có thể đổi lại tên của bức hình để nó cache lại 😀

Nhờ chuyện này, ảnh được load từ lần thứ 2, nó không phải xử lý thêm gì nhiều, nên load rất nhanh, Cloudinary thì ảnh được xử lý quá nhiều tham số thêm vào, nên đôi lúc mình có cảm giác nó chưa được xé gió lắm :]]

Họ cũng như Cloudinary, khi sử dụng Jetpack Image CDN bạn có thể tăng giảm kích thước ảnh chỉ với việc thêm 1 dòng lệnh đơn giản sau link ảnh, bạn có thể tham khảo thêm từ Photon API, kiểu na ná như bên dưới

DSC01205.jpg?w=300
DSC01205.jpg?w=15%
DSC01205.jpg?crop=12,25,60,60

Nếu bạn active Image CDN từ Jetpack thì nó sẽ random trong 3 cụm server là i0.wp.com, i1.wp.com, i2.wp.com, tuy thế thường mình chỉ bật Jetpack lần đầu để kết nối tới WordPress.com để active Image CDN, sau đó xóa đi cho nhẹ và đỡ phải thêm 1 rừng chuỗi và kí tự sau link bức ảnh

Có 2 cách để bạn có thể chạy Image CDN mà không cần phải cài Jetpack Ah, câu này ngày xưa mình viết sai ý, thực tế 2 cách bên dưới là để tắt các request thừa từ Jetpack chứ không phải là chạy mà không cần cài Jetpack, tại lâu lâu Jetpack nó vẫn cần kết nối tới site để lấy các thông tin

Cách 1:

Dùng sub_filter để đổi lại link ảnh sang dịch vụ của Image CDN,  sửa trong file config nginx của domain
Nếu dùng Webinoly thì đường dẫn file config thường là /etc/nginx/sites-available/bibica.net
Nếu dùng Centmin Mod thì đường dẫn file config thường là /usr/local/nginx/conf/conf.d/bibica.net.conf

Ví dụ có thể như bên trên, thêm dòng đó vào bên trong phần server {} bạn có thể thêm vào các năm tiếp theo như 2020, 2021 gì đóa thì tùy 😀 (đổi hxxp sang http hoặc https và domain của bạn lại là được)

Sau đó chạy tiếp dòng dưới, reload lại nginx, để thay đổi có hiệu lực

Sau này muốn thêm gì trong file config thì vào thư mục đó là được ?

Bạn cũng có thể đổi cụm i2.wp.com sang i0.wp.com hoặc i1.wp.com tùy thích, dùng thì mình thấy cụm i2.wp.com có vẻ nhanh hơn nên dùng thôi 😀

Cách 2:

Nếu không có quyền truy cập từ phía server bạn cũng có thể dùng 1 plugin nho nhỏ tại đây để tự đổi lại link ảnh của bạn sang Jetpack Image CDN 😀

Về cơ bản thì cách 1 khá tiện, bạn không cần thêm thêm plugin gì vào, tuy thế nó chỉ set được 1 server, cách 2 thì random đủ server, nhưng nó lại không đổi link khi click vào ảnh to :]] thành ra để đạt hiệu quả cao nhất bạn nên dùng cả 2 cách 😀

Thông thường nếu không chỉnh gì thì trình duyệt mặc định nó chỉ load 6 file 1 lúc từ 1 domain, thành ra nếu dùng cách 1 hiệu quả không cao, vì trong trường hợp bạn có 10-20 bức ảnh trong 1 bài, nó chỉ load tối đa được 6 bức 1 lúc, các ảnh sau phải chờ tới lượt 😀

Nếu dùng thêm cách 2 thì nó random 3 cụm server  i0.wp.com, i1.wp.com, i2.wp.com nên thường sẽ load được nhiều file cùng lúc hơn, có điều thực tế ở các bài post thông thường thì vấn đề này cũng không quan trọng lắm, vì khi load ra các bức ảnh đầu bạn kéo chuột xuống thì nó cũng load xong cả rồi, thành ra dùng cách nào cũng được, dùng cả 2 cách thì về lý thuyết thời gian load trang sẽ nhanh hơn, chọn cách nào tùy bạn 😀

Tất nhiên cách 1 về lý thuyết là nhẹ hơn, vì không phải xử lý thêm php dòng nào, cách 2 phải xử lý thông qua php thì tất nhiên nặng hơn 😀 cơ mà khi nào site của bạn có cỡ 1000-2000 người online cùng lúc thì mới phải nghĩ, còn lại thì chẳng vấn đề gì

Chú ý:

Về cơ bản thì chuyện không dùng WordPress hoặc không cài plugin Jetpack mà chạy các dịch vụ CDN ảnh của họ là  là vi phạm chính sách của WordPress.com Terms of Service hé, thành ra nếu dùng các cách trên nếu họ biết thì có thể bị khóa không cho dùng nữa á ^_^

Họ gần như không giới hạn gì cả, ảnh được upload lên thoải mái, không giới hạn số lượng và băng thông sử dụng, yêu cầu duy nhất là phải dùng WordPress và cài plugin Jetpack vào mà thôi, thành ra nếu bạn nào không quá khắt khe thì hãy cài plugin Jetpack vào ủng hộ họ, các tính năng khác của cũng rất hay và cần thiết 😛

Dịch vụ cũng ra mắt được 3-4 năm rồi, nên mình nghĩ kế hoạch dùng FREE vẫn đang tiếp tục, vẫn chưa có chính sách gì mới ^_^ còn nếu các cụ đòi tiền thì nói nhanh gọn là bố dí lol vào =)) thiếu gì dịch vụ FREE khác để bố dùng :]]

Update 22/04/2018: hôm nay mình vào lại manga.bibica.net, 1 trang up load truyện của mình :]] vô tình phát hiện là 1 chuyện khá hay

Do trang truyện nên mình đã tắt chế độ tự tạo ảnh thumbnails đi cho nhẹ, vô tình phát hiện ra là cái theme GeneratePress và Jetpack đã tự xử lý vấn đề tạo ảnh thumbnails luôn rồi, nghĩa là bạn set giá trị ảnh làm thumbnails ngoài trang chủ, trong bài viết là bao nhiêu, thì Jetpack tự thêm giá trị đó sau bức ảnh, kết quả là bạn sẽ không bao giờ cần tính năng tạo ảnh thumbnails nữa, bất kể sau này thích đổi lại kích cỡ ảnh bao nhiêu cũng được, GeneratePress xử lý trong code (hay css gì đó mình không chắc) và bắn sang Jetpack các giá trị đó, site của bạn sẽ tiết kiệm “cực kì” nhiều dung lượng cho ảnh và nó rất nhẹ nữa, vì server bây giờ không phải tốn sức tạo thumbnail cho mỗi tấm ảnh bạn upload lên nữa

Thèng bibica.net thì vẫn dùng Jetpack, tuy thế mình lại không thích các ảnh có thêm giá trị phía sau, nên mỗi ảnh upload lên vẫn phải tốn space cho 1 cái ảnh nhỏ làm thumnails, chưa kể nếu sau này đổi lại kích thước, là phải tạo lại ảnh thumbnails lại nữa 🙁

Update 04/04/2019: cũng không có gì quá quan trọng, hôm nay mình đã chuyển thèng bibica.net về dùng lại tính năng Photon trong bộ Jetpack

Thực tế mình cũng có nói khá nhiều lần về vấn đề này, mình luôn cân đối giữa tốc độ, hiệu năng và tính năng, để ảnh như bình thường, nén lại, cắt ra theo từng vị trí, rất rườm ra và nhiêu khê, tuy thế nhờ Cloudflare đã có location Việt Nam, nên gần như nó gánh cho bạn chuyện này cực tốt 😀 thực tế cái tấm ảnh 200 kb, cache từ Cloudflare còn load nhanh hơn tấm ảnh 100 kb mình load từ Photon, tuy thế cách WordPress xử lý các tấm ảnh cắt nó rất tệ, ảnh gốc full hd, cắt nhỏ ra tầm 300 x 300 nó … xấu đui xấu mù

Photon xử lý từ ảnh gốc, nên các ảnh thumbnail rất rõ và đẹp, nhất là ảnh nào nhiều text sẽ thấy rõ ràng chuyện này hơn

3 cụm server của họ là i0, i1, i2 mình thấy ổn, location Singapore thật ra ~ 3x ms là rất tốt rồi, cá nhân mình không có gì phàn nàn, và độ trâu chóa của họ là tầm thế giới rồi, nên cái xác xuất ảnh load từ server của nó bị lỗi chắc nó cũng hiếm cỡ chuyện Google bị sập :]]

Yeb, dùng Photon thì thời gian truy cập thèng bibica.net, thường sẽ “tăng” từ 1s lên tầm gần 2s, tuy thế mình … chấp nhận chuyện đó 😀 trải nghiệm đọc và nhìn các hình ảnh ổn hơn, không thể vì bạn muốn nhanh, mà bạn nén cái ảnh lại nhìn xấu đui con mắt người xem được 

Khi load ảnh qua các domain ngoài như wp.com, bạn nên dùng thêm tính năng DNS Prefetch và Preconnect, nó hay có trong các plugin tối ưu cho WordPress, như ở đây mình vẫn đang dùng là Perfmatters 😀 

Cải thiện vấn đề hiện ảnh từ Jetpack ra rất khá 😛

Tổng thể thì thế thôi, chắc mình sẽ dùng luôn dịch vụ Photon cho các ảnh trên bibica.net 😀

24 thoughts on “Jetpack Image CDN”

  1. Vậy ảnh gốc có còn được lưu trên hosting nữa không bác? Hay là đã được cache rồi thì nó xóa?

    • Ảnh gốc bắt buộc phải còn trên hosting vì lâu lâu Jetpack họ cũng check lại file gốc mà, thấy không còn file gốc thì không load được ảnh ra đâu 😀

  2. Bạn ơi mình config jetpack CDN image kết hợp với WP Rocket như thế này đã đúng chưa? Có gì bạn hướng dẫn mình thêm hay cho lời khuyên gì được không?

    Bạn xem qua hình mình gửi cái WP Rocket mình cấu hình CDN cho jetpack: https://imgur.com/a/hD9f4NP

    Mình điền như thế đã đúng chưa? Mình làm theo hướng dẫn của bạn ở ngoirungdui: https://i2.wp.com/ngoirungdui.com/wp-content/uploads/2017/11/11-24-2017-10-45-48-AM_zp35yt_wzumgu.png

    Link bài viết: https://ngoirungdui.com/100-diem-cho-gtmetrix-pingdom-va-pagespeed-insights/

    Ngoài ra có đoạn này hướng dẫn:

    2.2 Kèm theo phải set cookie cho mấy file font này, nếu server chạy Nginx thì set như bên dưới

    location ~* .(?:ttf|ttc|otf|eot|woff|woff2)$ {
    expires 1M;
    access_log off;
    add_header Pragma public;
    add_header Cache-Control “public”;
    }

    Mình vào nginx thì thấy trong rocket-nginx có 1 đoạn khá giống hoặc tương tự rồi, mình có cần điền thêm cái bạn hướng dẫn vào không? Đoạn dưới là mình lấy trong file cnf của rocket-nginx.

    ###################################################################################################
    # BROWSER MEDIA CACHE
    #
    location ~* \.(ico|gif|jpe?g|png|svg|eot|otf|woff|woff2|ttf|ogg)$ {
    etag on;
    expires 30d;

    }

    Cám ơn bạn, mong sớm nhận được câu trả lời từ bạn.

    • Set CDN chọn images trong WP Rocket thế là ổn rồi mà 😀

      Mà thực ra mình set như thế chủ yếu là để link ảnh nó là link thực, không có mấy giá trị kiểu ?w=300 đằng sau để đạt 100 điểm khi check ở mấy trang chấm điểm thôi

      Dùng thì nên dùng thuần bản gốc Photo của Jetpack để nó tự sửa các link ảnh thumnails, ảnh gốc …. đúng giá trị, tiết kiệm dung lượng cho server, với nó cũng hiệu quả hơn nữa 😛

      • Mình không hiểu lắm, thế config CDN trong WP Rocket có tác dụng gì vậy? Ngoài ra như mình hỏi về cái config nginx nữa đó, mong bạn giải đáp. Cám ơn bạn.

        P/S: Cái tiết kiệm dung lượng cho server là như nào? Mình thấy lúc up sản phẩm lên web nó vẫn tự tạo ra 1 đống thumbnails ấy 🙁

        • Mình nói rồi còn gì “Mà thực ra mình set như thế chủ yếu là để link ảnh nó là link thực, không có mấy giá trị kiểu ?w=300 đằng sau để đạt 100 điểm khi check ở mấy trang chấm điểm thôi”

          Mà để có link thực như thế thì phải set trong CDN của WP Rocket như thế 😀

          Dùng bình thường thì chỉ cần cài Jetpack vào, bật cái Photo lên là được 😛

          • Cám ơn bạn nhé, mà bạn bảo Jetpack chỉ hỗ trợ CDN images, mình cài vô còn thấy thêm 1 dòng “Speed up static file load times”, cái này là tính năng mới của nó hay có lâu rồi nhưng bạn không khuyến khích dùng? Có phương pháp khác hiệu quả hơn?

          • Ah, cái đó là phần Asset CDN (https://jetpack.com/support/site-accelerator/)

            Nôm na cũng tương tự như ảnh, họ dùng server của họ để CDN các file tĩnh, kiểu js, css … về lý thuyết thì không hiệu quả cho speed lắm, cho chịu tải thì có thể hiệu quả, có điều site bạn chắc phải > 1000 người online 1 lúc mới thấy hiệu quả mất 😀

            Nói chung CDN ảnh, Image CDN của Jetpack dùng các công nghệ rất tiến bộ, về lý thuyết là hiệu quả, có điều do location gần nhất của họ cũng là Singapore thôi đâm ra nó không hiệu quả về speed lắm, vì gần như giờ ai cũng dùng host tại Singapore hay Japan cả rồi

            Mà từ ngày Cloudflare hỗ trợ location Việt Nam, gần như nhanh thiên hạ vô địch rồi 😀 (http://haproxy.tech trang này mình đang cache để làm mẫu cache bằng Cloudflare này)

            Mà chung quy cũng phải xem nhu cầu thế nào mà chọn dịch vụ, chứ theo trao đổi nãy giờ mình cũng khó nói gì thêm được :]]

          • 🙁 Mình làm woocomerce bạn ạ, mới chuyển từ Shopify, store mình rất lớn, cỡ ~10k products cơ, hiện đang học tối ưu và tăng hiệu suất của server lên, host mình đang chạy bên digital ocean + serverpilot, database sử dụng percona. Mọi thứ cũng hòm hòm rồi giờ chỉ còn vụ tối ưu file ảnh nữa là ok vì 1 sản phẩm của mình chứa rất nhiều ảnh, mỗi lần load là ác mộc X_X

            P/S: Theo bạn có nên bật cái CDN các file tĩnh của jetpack không? Shop mình bán ở thị trường mỹ và châu âu. Mình không quan tâm lượng truy cập từ VN.

  3. Cái này không sử dụng ảnh trên web mình là link ảnh từ web khác vậy có ảnh hưởng tới seo image k b

    • Lý thuyết là có 😀

      Thực tế rất nhiều trang họ bỏ không dùng comment ngoài như Disqus … cũng vì lý do này

      Nói chung tùy quan điểm thôi 😛

  4. Bác có nhận dịch vụ tối ưu tốc độ website + tăng các chỉ số điểm ở google pagespeed + gtmetrix ko? Nếu có thì chi phí ra sao? site của em là http://www.beefone.vn nhé. Em xin cảm ơn

    • beefone.vn nhanh và sử lý vấn đề cache tốt lắm rồi 😀

      Nói chung ảnh dùng qua Jetpack và dùng cache rồi thì gần như speed và chịu tải gần như kịch rồi, thêm nữa cũng chỉ là râu ria cả thôi

      • Không hiểu sao e thấy điểm thấy quá bác ạ. check ra điểm có 38 điểm trên GG pagespeed thôi 🙁 gtmetrix cũng không khá khẩm hơn

          • ok. cảm ơn bác 🙂 Bác không làm về diễn đàn nhỉ? Mong 1 bài cài đặt diễn đàn xen 2 và discourse, flarum trên VPS từ bác 🙂

          • sau khi cài plugin này thì site của mình bị vỡ giao diện mobile bạn ạ 🙁 Mình buộc phải xoá nó đi rồi. Hầy

        • Chủ yếu nó tự setting chiều cao, dài … ảnh ở tất cả các vị trí từ 1 tấm ảnh gốc, với nó nén và CDN ảnh luôn, và nó làm điều này ở tầng server < -> server 😀 nên con server gốc gần như thoát khỏi vấn đề về ảnh 😀

          Chạy thì nó chỉ đổi link từ link gốc sang thành link của họ thôi, lỗi nếu có chắc do vấn đề khác (như đụng với plugin nào khác) chứ nó chạy sao có lỗi ta 😀

          • em xoá nó đi rồi và hết lỗi. Site trở lại bình thường. Chỉ lỗi ở giao diện mobile thôi, dùng laptop vẫn thấy bình thường, thế mới lạ ạ. Hiện em đang dùng cái shortpixel để tối ưu ảnh, wp rocket để cache, xem tình hình có khá hơn không. Size của e bị thấp điểm là do thằng fb messenger. Giờ gỡ cũng không ổn vì cần kết nối với khách hàng qua fb để tiện chăm sóc. Thế mới dở chứ :))

  5. hướng dẫn lại cách dùng sub_filter đi bạn, có phải ssh vào gõ như trong hình hướng dẫn là được, có cần phải gõ gì để khỏi chạy modul đó lên không hoặc là di chuyển tới thư mục nào rồi mới gõ lệnh trên hình?

  6. Hi, mừ…
    Mình dùng cái này cache ảnh lên wp.com xong rồi xóa ảnh trong thư viện (media) của site wp mình được không? (site lấy ảnh về từ i2.wp.com…. blalalalal….)
    nếu được tiết kiệm được dung lượng host nhiều đấy….

Leave a Comment