性能优化
一 构建工具优化
webpack vite
1 使用高版本的webpack node
2 使用模块热替换:当修改一个js或者css的时候,只刷新修改的内容,不进行整个页面的刷新
devServer：{hot：true}
3 CDN加速 :将静态资源存储在CDN上 ,减少流量消耗
- 通过
output.publicPath设置JavaScript文件地址 - 通过
WebPlugin.stylePublicPath设置CSS文件的地址 - 通过
css-loader.publicPath设置被CSS导入的资源的地址
4 提取公共代码 减小代码体积
5 使用可视化工具分析性能 webpack analysis
6 压缩代码 es6代码 TerserWebpackPlugin 5以上自带
二 图片优化
1 压缩 2 懒加载
-
问题原因：大尺寸图片未压缩或格式选择不当，影响页面加载速度。
-
解决方案：
- 使用工具（如TinyPNG、ImageOptim）压缩图片体积，保持JPEG格式用于照片，PNG/SVG用于图标。
- 启用延迟加载（Lazy Loading） ，仅在用户滚动到可视区域时加载图片。
- 采用响应式图片标签（
srcset）适配不同设备分辨率。
三. HTTP请求过多
-
问题原因：未合并CSS/JS文件或未使用雪碧图，导致多次请求资源。
-
解决方案：
- 合并CSS和JavaScript文件，减少请求次数。
- 使用雪碧图（Sprite）整合多张小图标为单张图片。
四. 主题性能低下
-
问题原因：选择复杂或未优化的主题，拖慢渲染速度。
-
解决方案：
- 优先选择轻量级主题（如Debut、Brooklyn），避免过度依赖动态效果。
- 定期清理未使用的第三方应用，减少冗余代码。
五. 未启用CDN和缓存
-
问题原因：静态资源未通过CDN分发，未设置浏览器缓存策略。
-
解决方案：
- 启用Shopify自带的CDN服务，或集成第三方CDN（如Cloudflare）加速全球访问。
- 配置浏览器缓存策略，通过
Expires Headers缓存重复访问的资源。
六 减少DOM数量和层级数量
HTML 中标签元素越多，标签的层级越深，浏览器解析 DOM 并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和扁平化的层级。
(二)、SEO优化
1. 元标签缺失或重复
-
问题原因：商品页面未自定义标题（Title）和描述（Meta Description），导致搜索引擎无法识别内容。
-
解决方案：
- 使用SEO插件（如PluginSEO）自动生成唯一且关键词丰富的元标签。
- 手动优化关键页面的标题（长度<60字符）和描述（长度<160字符），包含核心关键词。
2. 产品分类与URL结构混乱
-
问题原因：未合理设置产品集合（Collection）和分类（Product Type/Tag），导致URL层级过深。
-
解决方案：
- 创建清晰的集合（Collection），确保URL路径简洁（如
/collections/shoes）。 - 使用短横线分隔关键词（如
red-running-shoes），避免特殊字符。
- 创建清晰的集合（Collection），确保URL路径简洁（如
3. 内部链接与外部链接不足
-
问题原因：未构建合理的内部链接网络，缺乏高质量外链。
-
解决方案：
- 在商品描述中插入相关产品链接，增强页面权重传递。
- 通过行业博客、社交媒体获取高质量外链，提升域名权威性（Domain Authority）。
4. 移动端体验不佳
-
问题原因：未适配响应式布局，移动端加载速度慢。
-
解决方案：
- 使用响应式主题，并通过Google Mobile-Friendly Test工具检测兼容性。
- 压缩移动端图片尺寸，优先加载关键内容（Critical CSS）。
5. 结构化数据缺失
-
问题原因：未添加Schema标记（如Product、Breadcrumb），影响搜索结果富片段展示。
-
解决方案：
- 使用SEO插件自动生成结构化数据（如评分、价格区间）。
- 通过Google Structured Data Testing Tool验证标记有效性。
6 、网站布局优化
网站层级越少越容易被搜索引擎的爬虫抓取，一般中小型网站不超过三级。超过这一层级容易造成爬虫不愿意爬取和受众获取必要信息困难而平白损失资源。
7、清理垃圾代码
清理垃圾代码是指删除页面中的冗余代码。能够删除80%的冗余代码。
垃圾代码主要指那些删除了也不会对页面有什么影响的非必要代码。
最常见的垃圾代码是空格字符。但并非指标签，而是有代码编辑环境下敲击空格所产生的符号，每一个空格相当一个字符，那么也就是说。一个页面。空格就占页面体积的15%。100K的页面，有15K是空格字符。 空格字符最常出现在代码的开始和结束处。还有就是空行中。 这些都是容易产生垃圾代码的地方。消除这种垃圾代码的方法就是选中代码然后按shift+tab键左对齐。
8、少用iframe
搜索引擎不会抓取iframe中的内容
9、重要内容不要用js输出
爬虫不会执行js获取内容
三、工具推荐
-
性能检测工具：
- Google PageSpeed Insights：分析页面性能并提供优化建议。
- GTmetrix：监控加载速度与资源瀑布流。
-
SEO工具：
- PluginSEO/SmartSEO：自动化修复SEO问题（如404错误、重复内容）。
- Google Search Console：跟踪关键词排名与索引状态。
提升用户体验和搜索排名，最终实现流量与转化率的双增长
另:
html 语义化的理解
html 语义化是用正确的标签做正确的事情。有三大好处：
结构清晰：html 语义化让页面的内容结构化，即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的。
SEO：有利于 SEO ，可以让搜索引擎更好地获取到更多有效信息，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重，有效提升网页的搜索量。
可维护性：使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
localStorage sessionStroage
区别是 localStorage 是永久储存, 除非主动删除, 否则不会消失；
而 sessionStroage 的有效期只是网页在浏览器打开到关闭的时间段。
sessionStorage 和 localStorage
1.两者存储空间一般都在5M左右，sessionStorage在会话结束时会主动清除，localstorage则不会，需手动清除
2.两者都有同源策略限制，跨域无法访问，sessionStorage有同标签页限制
3.数据仅在客户端存储，不参与和服务器通信
4.都是key value形式进行存储，value必须为字符串，如不是则自动转换成字符串，value如果是对象，需转换成JSON字符串
5.操作方法一直，setItem(key, value)增/改、removeItem(key)删、getItem(key)查、xxxStorage.clear()清空
cookies
1.存储大小为4k，一个站点最多20个cookies
2.会通过http请求参与服务端的通信
3.cookie可以设定会话时间，如不设置，则默认浏览器窗口关闭清除
4.Cookie设置中有个HttpOnly参数，前端浏览器使用document.cookie是读取不到HttpOnly类型的Cookie的\
感知提升加载
loading 加载
骨架屏
骨架屏可以带来更好的用户体验，有很强的加载感。-antd —————————————————————————————————————————
