网站优化

作者：Thomas che2 分钟阅读
浏览量：加载中...
#计算机

针对网站各方面优化

网站优化

网站优化


架构


确定好应用属于什么应用 适用于 ssr ssg 还是 csr

架构渲染时机优点缺点典型应用场景
SSR请求时服务器动态渲染SEO 优，首屏快服务器压力大，响应较慢动态内容多的网站
SSG构建时生成静态页速度快，服务器压力小内容更新需要重建博客、文档、静态站点
ISR静态+后台定时更新静态性能+动态更新配置复杂大型内容站点
CSR浏览器端渲染交互丰富首屏慢，不利 SEOSPA、管理后台

代码方面


交互优化


骨架屏


11、第一种动态引入方式 需要借助next的 dynamic
2import dynamic from 'next/dynamic';
3const Header = dynamic(() => import('@/components/Header'), {
4  loading: () => <SkeletonPlaceholder />,
5});
6将封装好的组件在借助dynamic动态引入组件过程中loading阶段将页面元素替换成骨架屏组件

12、第二种动态引入方式 判断react渲染阶段
2  const [isLoading, setIsLoading] = useState(false); // 默认false，可改为true模拟加载
3 if (isLoading) {
4    return <HomeSkeleton />;
5  }
6

http 资源方面


性能优化


设置长缓存


1| 名称                              值
2| ------------- | ------------------------------------- |
3| Cache-Control | `public, max-age=31536000, immutable` |
4
5为oss资源设置长缓存 强缓存长达 1 年，重复访问将直接走本地缓存
6

搜索引擎方面


1https://search.google.com/search-console
2网站 用于谷歌搜索建立索引 方便用户关键词搜索到网站
3