携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第8天,点击查看活动详情
定义:
SEO(Search Engine Optimization)是指搜索引擎优化。是一种利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名的方式。
对于前端的意义:
前端是一个web应用的外在表现,因此前端的性能对于一个Web应用来说很重要,如果页面对于用户的操作可以及时响应,页面加载速度快捷方便。产品的用户体验就会有很大的提升。因此前端的SEO优化非常重要。
页面优化:
页面优化主要是H5和CSS方面:
1.减少使用import引入文件方式
因为使用 import引用CSS文件会造成导致文件按顺序加载,无法并行加载等一系列影响页面加载速度的问题
2.使用公共CSS文件引入
分散的使用CSS文件,都会影响页面加载速度,可以统一使用一个或几个公共的CSS文件减少引入css的速度损耗
3.多使用CSS sprites(雪碧图)等来整合图像
图片的加载也会影响css引入性能,尽量使用雪碧图减少页面加载图片所需的时间
4.使用正确的图片或者资源请求,如果HTML或CSS会向服务器请求一个不存在图片或者文件资源请求,会造成浏览器与服务器之间的请求错误而反复请求,可以使用标签优化的方式,减少性能损耗,但是最有效的方式仍然是请求正确的资源。
5.text-indent h1等标签缩进优化,把h1等标签行内缩进到页面隐藏起来,提升SEO搜索
6.使用内嵌式
如果CSS代码比较小,可以使用内嵌式,将CSS放到HTML文件中,不采用外链式,可以减少页面加载所需的文件数,加快页面的加载
7.压缩CSS代码体积
打包时通过Minify 等CSS工具来压缩CSS代码体积
8.H5标签title、meta、alt、h1等优化
具体表现在图片,网页加载1很慢或者错误时,可以显示图片或链接的其他说明,img中的title、alt,meta链接中的name属性,keywords(关键字),description(具体描述)