第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 与类名。在使用开发中的奇技淫巧的适合需要深思是否需要使用。模块化的制作页面和样式,提高可复用性并减少文件大小。

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

相关文章
|
19天前
|
搜索推荐
网站怎么做才可以禁止搜索引擎抓取收录页面快照
有太多的搜索引擎,每天抓来抓去的,不胜其烦!我们小网站承受不了这么大的量啊!于是,禁止他们抓取收录快照就成了我们的救命稻草!那么如何禁止自己的页面被收录快照呢?其实方法很简单,跟我来做吧。
29 6
网站怎么做才可以禁止搜索引擎抓取收录页面快照
|
10月前
|
监控 UED 开发者
通过云拨测对指定网页进行网页性能监测
本实验将通过云拨测对指定服务器进行网页性能监测,评估网站服务质量和用户体验。
241 3
|
数据采集 分布式计算 前端开发
设置CDN防盗链规则来避免网站被恶意刷量
设置CDN防盗链规则来避免网站被恶意刷量
2277 1
|
域名解析 SEO
多域名对SEO优化的影响
多个域名是指多个域名最终访问同一网站。事实上,由于某些因素,多个域名不可能指向同一个网站。因此,一个网站对应多个域名进行SEO优化的好处是什么?事实上,一个网站对应多个域名是没有好处的,相反,它对SEO优化也有不利影响。
245 0
多域名对SEO优化的影响
|
数据采集 缓存 搜索推荐
网站使用CDN对SEO有什么影响?
一个CDN的名称是内容传送网。目前流行的CDN理解是网站加速,CPU均衡负载,解决了跨运营商、跨地区服务器负载能力差以及低带宽导致的网站启动缓慢的问题。其基本思想是避免网络中的瓶颈与连接,避免网络中可能影响数据传输速度和稳定性的瓶颈与连接,使内容传输快速稳定。通过在网络中放置节点服务器,CDN系统在现有因特网的基础上形成一个智能虚拟网络,能够根据网络流量、各节点的连接、负载情况、与用户的距离和响应时间等因素,将用户的请求实时地重定向到最近的服务节点。目标是使用户能够就近获取所需内容,解决网络拥挤问题,提高用户对网站访问的响应速度。
253 0
网站使用CDN对SEO有什么影响?
|
XML Web App开发 移动开发
关于web性能的思考与分享[04]——页面优化方案
关于web性能的思考与分享[04]——页面优化方案
208 0
关于web性能的思考与分享[04]——页面优化方案
|
安全 应用服务中间件 nginx
CDN页面优化不生效排查遇到的坑
如果源站响应给CDN的数据是Gzip压缩以后的数据会导致CDN的页面优化不生效。本文详细讲述了问题的原因以及排查过程,并讲述了Nginx关于Gzip的压缩配置,同时介绍了CDN作为代理服务,引入了Via header以后对Nginx服务器的影响。
6074 1
CDN页面优化不生效排查遇到的坑
|
搜索推荐 SEO
页面优化的方法SEO包括哪些内容
页面搜索引擎优化技术将提升你的排名 在页面上SEO是你可以使用的最重要的过程之一,不仅是为了获得更高的排名,而且是为了运行成功的SEO活动。 网站是所有SEO流程的焦点,如果它没有针对搜索引擎和用户进行适当优化,那么您的成功几率就会降到最低。
1095 0
|
数据库 缓存
页面优化技术
缓存时间较短,适合变化不大的商品列表等页面 通过不同层面缓存,减少对数据库请求数量
774 0