
识别瓶颈:带宽(10Mbps)为上行/下行共享限速时,优先减少单用户吞吐与资源加载大小;优先级:1) 静态资源压缩与缓存 2) CDN分发 3) 后端接口优化 4) 前端渲染优化。
小分段:先测量(Lighthouse、PageSpeed、curl -I),再按优先级逐步改进。
步骤1:登录阿里云控制台 -> CDN,点击“创建域名”,填写域名并将“回源地址”填写为香港ECS公网IP或负载均衡地址。
步骤2:在CDN控制台设置缓存规则:静态资源(.js .css .jpg .png .webp)缓存时间≥7天,启用动态加速或动态路由(根据站点动态比例选择);开启HTTPS回源和http->https强制重定向。
小分段:若业务为跨境流量,开启全球加速或Global Accelerator以改善跨地区延迟。
在服务器上编辑 /etc/nginx/nginx.conf,加入或修改:sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; keepalive_requests 1000; gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
小分段:建议安装 Brotli(yum/apt 安装 ngx_brotli 模块),并在 server{} 中启用:brotli on; brotli_types text/css application/javascript image/svg+xml;
图片:批量转换为 WebP,工具:cwebp(示例:cwebp -q 80 img.jpg -o img.webp)。在前端给出 picture 标签和 srcset,提供不同分辨率。
静态资源:使用 webpack/build 工具开启压缩与代码分割;启用 HTTP/2 或 HTTP/3,减少并发阻塞。
后端设置 Cache-Control:静态资源设置 public, max-age=604800;HTML 缓存短一些或使用 ETag/Last-Modified。
Service Worker:注册 sw.js,实现 precache 关键资源、runtime cache 动态接口(示例:workbox.precaching.precacheAndRoute([...])),提高回访首屏速度与离线体验,增强留存。
合并 API:将多个小接口合并为一次请求,降低请求数量;开启 gzip/brotli 压缩后端 JSON(Nginx 或应用层)。
分页与懒加载:对列表使用服务端分页或 cursor 分页,避免一次传输大量数据。
SEO:确保每页都有独立 title/meta description、canonical、结构化数据(JSON-LD)、sitemap.xml 并提交到百度/谷歌站长平台;设置 hreflang 为 zh-HK 或 en。
留存:实现首屏快速反馈(skeleton screen)、个性化推荐(基于 cookie/session)、埋点(Google Analytics + 自定义事件)并做 7/30 天留存漏斗分析,基于数据做 A/B 测试。
问:10Mbps 会严重影响 SEO 排名吗?
答:短期内速度差会影响 Core Web Vitals(LCP、FID、CLS),进而影响搜素体验信号。通过 CDN、压缩与缓存将首屏时间控制在2-3秒内可将影响降到最低。
问:如何在阿里云控制台快速验证 CDN 配置是否生效?
答:在 CDN 域名生效后用 curl -I https://yourdomain 观察响应头(X-Cache、Via),或用浏览器 Network 面板查看资源是否走 CDN 地址并检查 cache-control 与 content-encoding。
问:带宽受限,如何优先做用户留存优化?
答:优先保证首次可交互(减少第三方脚本、关键CSS内联、异步加载非关键JS)、实现离线缓存与个性化推送,再做推荐算法与内容优化以提升次日留存。