{"topic":{"id":14939,"title":"使用 webp_server 加速 Discourse 图片加载","slug":"topic","categoryId":4,"createdAt":"2025-07-15 14:59:33.906158","bumpedAt":"2025-07-16 14:55:09.23707","views":159,"postsCount":5,"highestPostNumber":5,"likeCount":2,"closed":false,"pinned":false,"pinnedGlobally":false,"pinnedAt":null,"pinnedUntil":null,"isBanner":false,"excerpt":"通过将所有 png/jpg 图片转换成 webp，减少加载图片所需流量和时间 cat /etc/nginx/sites-enabled/disxj.conf server { ... location @fallback_static { root $public; add_header Access-Control-Allow-Origin *; try_files $uri =404; } ... location ~* \\.(we…","deletedAt":null,"isAnonymous":false,"category":{"id":4,"name":"谈笑风生","slug":"general","color":"25AAE2"},"author":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif"},"tags":[]},"posts":[{"id":61266,"postNumber":1,"raw":"通过将所有 png/jpg 图片转换成 webp，减少加载图片所需流量和时间\n\ncat /etc/nginx/sites-enabled/disxj.conf \n```\nserver {\n...\n location @fallback_static {\n root $public;\n add_header Access-Control-Allow-Origin *;\n try_files $uri =404;\n }\n...\n location ~* \\.(webp|avif)$ {\n add_header Access-Control-Allow-Origin *;\n try_files $uri =404;\n }\n location ~* \\.(gif|png|jpg|jpeg|bmp|tif|tiff|ico)$ {\n add_header Access-Control-Allow-Origin *;\n proxy_pass http://127.0.0.1:2350;\n #proxy_pass http://127.0.0.1:2350$uri;\n proxy_connect_timeout 3s;\n proxy_read_timeout 5s;\n error_page 502 503 504 = @fallback_static;\n }\n...\n```\n\ncat /srv/webpsh/docker-compose.yml\n```\nservices:\n webp:\n image: webpsh/webp-server-go\n # image: ghcr.io/webp-sh/webp_server_go\n restart: unless-stopped\n #command: [\"/usr/bin/webp-server\", \"--config\", \"/etc/config.json\", \"-prefetch\", \"-jobs=1\"]\n environment:\n - MALLOC_ARENA_MAX=1\n - LD_PRELOAD=/usr/lib/x86_64-linux-gnu/libjemalloc.so.2\n # - LD_PRELOAD=/usr/lib/x86_64-linux-gnu/libtcmalloc_minimal.so.4.5.6\n - WEBP_ALLOWED_TYPES=jpg,png,jpeg,bmp,gif,heic,nef,webp,avif,tif,tiff,ico\n #- WEBP_CONVERT_TYPES=webp\n volumes:\n - /var/www/discourse/public:/opt/pics\n - ./exhaust:/opt/exhaust\n - ./metadata:/opt/metadata\n ports:\n - 127.0.0.1:2350:3333\n deploy:\n resources:\n limits:\n memory: 500M\n cpus: '1.5'\n```","cooked":"

通过将所有 png/jpg 图片转换成 webp，减少加载图片所需流量和时间

cat /etc/nginx/sites-enabled/disxj.conf

server {\n...\n   location @fallback_static {\n          root $public;\n          add_header Access-Control-Allow-Origin *;\n          try_files $uri =404;\n      }\n...\n         location ~* \\.(webp|avif)$ {\n          add_header Access-Control-Allow-Origin *;\n          try_files $uri =404;\n      }\n      location ~* \\.(gif|png|jpg|jpeg|bmp|tif|tiff|ico)$ {\n          add_header Access-Control-Allow-Origin *;\n          proxy_pass http://127.0.0.1:2350;\n          #proxy_pass http://127.0.0.1:2350$uri;\n          proxy_connect_timeout 3s;\n          proxy_read_timeout 5s;\n          error_page 502 503 504 = @fallback_static;\n      }\n...\n

cat /srv/webpsh/docker-compose.yml

services:\n  webp:\n    image: webpsh/webp-server-go\n    # image: ghcr.io/webp-sh/webp_server_go\n    restart: unless-stopped\n      #command: [\"/usr/bin/webp-server\", \"--config\", \"/etc/config.json\", \"-prefetch\", \"-jobs=1\"]\n    environment:\n      - MALLOC_ARENA_MAX=1\n      - LD_PRELOAD=/usr/lib/x86_64-linux-gnu/libjemalloc.so.2\n      # - LD_PRELOAD=/usr/lib/x86_64-linux-gnu/libtcmalloc_minimal.so.4.5.6\n      - WEBP_ALLOWED_TYPES=jpg,png,jpeg,bmp,gif,heic,nef,webp,avif,tif,tiff,ico\n        #- WEBP_CONVERT_TYPES=webp\n    volumes:\n      - /var/www/discourse/public:/opt/pics\n      - ./exhaust:/opt/exhaust\n      - ./metadata:/opt/metadata\n    ports:\n      -  127.0.0.1:2350:3333\n    deploy:\n      resources:\n        limits:\n          memory: 500M\n          cpus: '1.5'\n

\n","createdAt":"2025-07-15 14:59:34.084076","updatedAt":"2025-07-16 11:38:51.067341","replyToPostNumber":null,"replyCount":0,"likeCount":0,"wordCount":127,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":2,"publicVersion":2,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":61269,"postNumber":2,"raw":"怎么好像没生效\n\n![image|515x499](/uploads/image/9f/35/9f354a93c1daf0f078844541de7bf20ca8b7bef3a1c93121cb03ed9513230ebf.avif)","cooked":"

怎么好像没生效

$\"image\"$

\n","createdAt":"2025-07-15 15:30:09.931858","updatedAt":"2025-07-15 15:30:09.931858","replyToPostNumber":null,"replyCount":0,"likeCount":0,"wordCount":8,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":5151,"username":"Soyo34325","name":"Soyo34325","avatarUrl":"/uploads/image/9d/e5/9de500d3afb55c0fe71e319832f2af75532222efe94bd3de9aea21f0f5c55707.avif","admin":false,"moderator":false,"signatureRaw":"ぜーんぶ弾けなーい！","signatureCooked":"

ぜーんぶ弾けなーい！

\n"}},{"id":61270,"postNumber":3,"raw":"WebP.SE 有一个类似的云服务，应该是可以套 Cloudflare CDN 来使用，我感觉图片这类服务其实对延时不是很敏感，而且有了 Cache，用户侧加载速度其实挺快的\n\nhttps://webp.se/\n\n类似于 B 站用的那种边缘函数，在 CDN 节点对图片进行动态转码或调整\n\n做过一个类似的，用的是国内腾讯云的 EO 的边缘函数，在边缘节点对图像进行处理，看看浏览器的 Accept 里面支不支持 avif，支持的话再转换为 avif\n\n![image|383x500](/uploads/image/2a/a5/2aa527b9e35afdb9a8a2b84ddc3f346cf701a2d1d8006bc499c020d877a065bf.avif)","cooked":"

WebP.SE 有一个类似的云服务，应该是可以套 Cloudflare CDN 来使用，我感觉图片这类服务其实对延时不是很敏感，而且有了 Cache，用户侧加载速度其实挺快的

\n\n

类似于 B 站用的那种边缘函数，在 CDN 节点对图片进行动态转码或调整

做过一个类似的，用的是国内腾讯云的 EO 的边缘函数，在边缘节点对图像进行处理，看看浏览器的 Accept 里面支不支持 avif，支持的话再转换为 avif

$\"image\"$

\n","createdAt":"2025-07-15 15:42:40.030186","updatedAt":"2025-07-15 15:43:51.026518","replyToPostNumber":null,"replyCount":0,"likeCount":0,"wordCount":152,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":5151,"username":"Soyo34325","name":"Soyo34325","avatarUrl":"/uploads/image/9d/e5/9de500d3afb55c0fe71e319832f2af75532222efe94bd3de9aea21f0f5c55707.avif","admin":false,"moderator":false,"signatureRaw":"ぜーんぶ弾けなーい！","signatureCooked":"

ぜーんぶ弾けなーい！

\n"}},{"id":61307,"postNumber":4,"raw":"Discourse has already optimized some images, so they remain jpeg.\n\nI tested a large one, got:\n![image|613x500](/uploads/image/96/1c/961c8d137593a3d5cf685f33e5962813195107279a071ace6ceff68fa4306963.avif)","cooked":"

Discourse has already optimized some images, so they remain jpeg.

I tested a large one, got:
\n $\"image\"$

\n","createdAt":"2025-07-16 11:30:50.502844","updatedAt":"2025-07-16 11:30:50.502844","replyToPostNumber":null,"replyCount":1,"likeCount":2,"wordCount":17,"liked":false,"bookmarked":false,"polls":[],"reactions":[{"reaction":"👍️","count":1,"users":[{"id":5151,"username":"Soyo34325","name":"Soyo34325"}],"hasReacted":false},{"reaction":"❤️","count":2,"users":[{"id":5151,"username":"Soyo34325","name":"Soyo34325"},{"id":7364,"username":"青年杰出贡献上交大門人","name":"紫金港第一皮革<・)))><<"}],"hasReacted":false}],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":61348,"postNumber":5,"raw":"经过了 webp 优化，以及 nginx 启用了 Discourse 默认启用的 brotli 压缩（2.5M json gzip 后 226k, brotli 后 172k），禁用 ruby YJIT 改善内存占用，重启后，page speed 有显著改善\n\nhttps://pagespeed.web.dev/analysis/https-xjtu-app/5907npnd4e?form_factor=desktop\n\npeed Index\ndesktop: 1.7 -> 1.0 s\nmobile: 4.2 -> 2.6s","cooked":"

经过了 webp 优化，以及 nginx 启用了 Discourse 默认启用的 brotli 压缩（2.5M json gzip 后 226k, brotli 后 172k），禁用 ruby YJIT 改善内存占用，重启后，page speed 有显著改善

\n\n

peed Index
\ndesktop: 1.7 -> 1.0 s
\nmobile: 4.2 -> 2.6s

\n","createdAt":"2025-07-16 14:55:09.23707","updatedAt":"2025-07-16 14:55:09.23707","replyToPostNumber":4,"replyCount":0,"likeCount":0,"wordCount":63,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}}],"hasMore":false,"lastReadPostNumber":1,"hasUrlPostNumber":false}