第176天:页面优化

简介: SEO优化考虑的方面太多了。下面说说页面怎么优化从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。

SEO优化考虑的方面太多了。

下面说说页面怎么优化

从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。

总之,恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

前端优化的途径有很多,按粒度大致可以分为两类,第一类页面级别的优化,例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等;第二类则是代码级别的优化,例如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等等。另外,本着提高投入产出比的目的,后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

一、页面级优化

1. 减少HTTP请求数

从设计实现层面简化页面,,合理设置HTTP缓存,资源合并与压缩

CSS Sprites,Lazy Load Image,将CSS放在HEAD中,减少不必要的HTTP跳转

二、代码级优化

Javascript,CSS选择符, Image压缩

三、页面优化

页面优化

页面优化可以提升页面的访问速度从而提高用户体验,优化的页面可以更好的提升 SEO 的效果同时也可以提高代码的可读性和维护性

从下面的几个方面可以进行页面的优化:

  • 减少请求数
    • 图片合并
    • CSS 文件合并
    • 减少内联样式
    • 避免在 CSS 中使用 import
  • 减少文件大小
    • 选择适合的图片格式
    • 图片压缩
    • CSS 值缩写(Shorthand Property)
    • 文件压缩
  • 页面性能
    • 调整文件加载顺序
    • 减少标签数量
    • 调整选择器长度
    • 尽量使用 CSS 制作显示表现
  • 增强代码可读性与可维护性
    • 规范化
    • 语义化
    • 模块化

(1)减少请求

请求数与网页加载时长有直接的关系。所以对于图标可以使用 Sprite 来减少小图标的请求数,对于文本则可以通过合并缩小。(避免使用 import 引入 CSS 文件,并且请求是同步请求)

(2)减少文件大小

页面上最大的流量产生与多媒体(视频或图片)所以为了减少文件大小,开发者需要使用合适的媒体格式并对文件进行压缩。

(3)页面性能

页面文件的加载顺序自上而下,样式则需要放置于最顶部,脚本则放置于底部(因为 JavaScript 的加载会阻塞页面的绘制)。

减少标签的数量也可以起到提升性能的作用,缩短 CSS 选择器的层级来提高性能。减少使用消耗性能的样式属性例如下面的这些:

  • expression
  • filter
  • border-radius
  • box-shadow
  • gradients

页面中所使用的图片尺子应该与现实尺寸相符否则在图标下载后需要重绘导致性能下降。

能使用样式(使用 CSS 的类名)实现的交互就不使用脚本(需要重绘导致多次页面渲染)来实现。

(4)可读性与可维护性

开发之前需要明确规范,尤其是对人协作时。使用 HTML5 语义化的标签来制作页面,同样也适用于样式选择器的 ID 与类名。在使用开发中的奇技淫巧的适合需要深思是否需要使用。模块化的制作页面和样式,提高可复用性并减少文件大小。

注释注释注释,在代码中添加注释,利人利己。

相关文章
|
4月前
|
缓存 前端开发 JavaScript
解密前端性能优化:提升网页加载速度的关键策略
网页加载速度不仅影响用户体验,还对搜索引擎排名有直接影响。本文将深入探讨前端性能优化的多种策略,包括资源压缩与合并、延迟加载、CDN加速等。通过具体的优化方法和实际案例分析,读者将能够掌握提升网页性能的实用技巧,并能够在实际项目中有效地应用这些策略来实现更快的加载速度和更流畅的用户体验。
|
6月前
|
缓存 前端开发 JavaScript
|
6月前
|
缓存 前端开发 JavaScript
解决白屏问题:让你的网站重焕生机
解决白屏问题:让你的网站重焕生机
|
监控 UED 开发者
通过云拨测对指定网页进行网页性能监测
本实验将通过云拨测对指定服务器进行网页性能监测,评估网站服务质量和用户体验。
288 12
|
搜索推荐 定位技术 UED
整站优化有哪些技巧?整站优化需要注意什么
整站优化就是通过对关键词规划、网站内容及网站结构的整体优化,确保网站所有页面都具备搜索引擎友好性,让网站在各大搜索引擎都有比较高的收录量和好的整体排名表现。
159 0
|
数据采集 缓存 移动开发
当考虑网页首屏时长优化的时候,我们在考虑什么?
当考虑网页首屏时长优化的时候,我们在考虑什么?
243 0
当考虑网页首屏时长优化的时候,我们在考虑什么?
|
XML Web App开发 移动开发
关于web性能的思考与分享[04]——页面优化方案
关于web性能的思考与分享[04]——页面优化方案
237 0
关于web性能的思考与分享[04]——页面优化方案
|
安全 应用服务中间件 nginx
CDN页面优化不生效排查遇到的坑
如果源站响应给CDN的数据是Gzip压缩以后的数据会导致CDN的页面优化不生效。本文详细讲述了问题的原因以及排查过程,并讲述了Nginx关于Gzip的压缩配置,同时介绍了CDN作为代理服务,引入了Via header以后对Nginx服务器的影响。
6250 1
CDN页面优化不生效排查遇到的坑
|
搜索推荐 SEO
页面优化的方法SEO包括哪些内容
页面搜索引擎优化技术将提升你的排名 在页面上SEO是你可以使用的最重要的过程之一,不仅是为了获得更高的排名,而且是为了运行成功的SEO活动。 网站是所有SEO流程的焦点,如果它没有针对搜索引擎和用户进行适当优化,那么您的成功几率就会降到最低。
1136 0
|
前端开发 JavaScript
移动端首屏优化策略
采用服务器渲染ssr 按需加载配合webpack分块打包 很有必要将script标签异步 有轮播图 最好给个默认 另外要处理图片懒加载 打包线上也要注意去掉map 文件 组件懒加载 路由懒加载 webpack的一切配置 肯定是必须的 这个百度去 做...
1874 0