武汉世纪互联科技有限公司为您免费提供武汉网站优化公司武汉专业网络推广武汉网站营销等相关信息发布和行业资讯,敬请关注!
联系我们
咨询热线
13995609075
全国售后热线:
13995609075
邮箱:4733180@qq.com
地址:湖北省武汉市洪山区雄楚大道489号领秀城1栋2单元1702室
您的当前位置:首页 > 行业分析 > 详细内容

武汉网络推广外包公司告诉大家解决网站加载速度慢的问题的方法

来源:http://www.whxsjhl.com/news/1036.html   发布时间:2022-01-11

   如何解决网站加载速度慢的问题?武汉网络推广外包公司介绍到
    影响页面加载速度的因素主要就是资源的大小,以及程序级服务器的性能,今天从网页的css和js文件来两下如何提升网页的加载速度。
    如何解决网站加载速度慢的问题?
    渲染阻塞
    武汉网络推广外包公司介绍到大家在使用SEO诊断工具的时候,会发现如果网站存在多个js或者css文件的时候会降低评分,会建议你合并这些文件。但是其实只对了部分,并不全对。
    要搞明白这个原理首先大家需要先了解下网页dom树的构建原理。简单的给大家讲一下吧,首先浏览器解析网页的时候是通过dom树的渲染来实现的,而dom的构建是一行行代码逐渐开始的。最先构建的head标签,然后是body,大多数站点的会把网站的js和css文件放在head里。

    但是css和js是会阻塞dom的构建,意思就是浏览器执行到head标签的时候会停止网下执行,知道js和css文件加载完毕,才会继续。如果这个时候js加载失败或者加载速度慢,会导致网页空白不现实任何内容,相信这种情况大家经常看到吧。

    这个时候大聪明来了把css和网页放到网页代码底部,让它们最后加载就不会影响前面的dom树的构建。但是要知道js和css本身就是dom结构的一部分,就算放在尾部如果加载没有完成,dom树就无法完成构建。
    dom树构建不完成,就不会开始渲染,未开始渲染就意味着浏览器还是白屏不显示任何内容。
    如何解决网站加载速度慢的问题?
    如何解决阻塞
    武汉网络推广外包公司介绍到先将js和css下载到本地,千万不要去通过网络调用外部资源。尽可能合并js和css但是非要强制合并为一个文件,前后详细讲。
    压缩js和css文件,优化和压缩资源来最大限度地减小总下载大小,来提高网页加载速度。开发者可以考虑通过简化编码来优化主文档大小,同时可以采用chunk编码,服务器分chunk输出,以及通过GZIP来压缩主文档资源。
    文件合并分割原则
    上面讲到了需要尽可能合并css和js文件,这样可以降低请求的数量,虽然说文件放在服务器本地不会有网络延迟,但是文件储存于硬盘,任何一个文件的读取即使机器性能再好也得需要一定的时间。
    更加关联的是对于用户体验来说,最关键的是首屏的加载渲染,所以不建议大家把所有的css和js合并,正确的分割才是明智的选择。把首屏幕加载依赖的css和js单独切割放在head标签中,剩余的放在最后加载。
    武汉网络推广外包公司介绍到分割css的选择,最小化选择,很多站点开发用到了前端框架,里面其实包含了很多用不到的样式,如果对于速度性能有着极致的追求,要么去阉割下要么就不去使用。
    较小化原则,当前页面加载的css只包含当前页面所需的样式。然后head标签只放首屏元素的样式。
    js的优化就比css更加复杂,首先一样的较小化原则,能不用第三方库的就不用,自己写执行效率更高。
    如何解决网站加载速度慢的问题?
    渲染和功能分割
    武汉网络推广外包公司介绍到对于js代码可以分为两类:负责页面渲染的js代码;负责页面功能的js代码,比如点击事件等功能,此类js不会影响页面的展示的,此类js可以全部合并到一个文档,异步执行,文件位置head还是底部随意,因为是异步不会阻塞页面渲染。
    渲染js分割
    武汉网络推广外包公司介绍到参与页面渲染的js的分割,head标签中的js文件只放一些核心必须执行代码,以及参与首屏渲染的。剩余参与渲染的js代码单独一个文件,在底部引用。
    所以,js和css优化并不是如诊断工具上建议的不加思考的合并。赶快收藏分享给IT小伙伴,给网站加速加速吧。


相关产品