前端相关的网站优化

Posted 2020-10-02

 

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

 

html 结构语义化：
更符合 W3C 统一的规范标准，是技术趋势。
没有样式时浏览器的默认样式也能让页面结构很清晰。
对功能障碍用户友好。屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。
对其他非主流终端设备友好。例如机顶盒、PDA、各种移动终端。
对 SEO 友好。

 

以前端角度出发的SEO：

搜索引擎主要以:外链数量和质量网页内容和结构来决定某关键字下的网页搜索排名。

前端应该注意网页结构和内容方面的情况：
Meta 标签优化
主要包括主题（Title)，网站描述(Description)。还有一些其它的隐藏文字比如 Author（作者），Category（目录），Language（编码语种）等。
符合 W3C 规范的语义性标签的使用。
如何选取关键词并在网页中放置关键词
搜索就得用关键词。关键词分析和选择是 SEO 最重要的工作之一。首先要给网站确定主关键词（一般在 5 个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

 

在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求后进行缓存处理，例如dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。