请选择 进入手机版 | 继续访问电脑版

优化提示,使页面加载更快[复制链接]

abigael 发表于 2018-09-1322:26 显示全部楼层 阅读模式
+1
513°C
沙发哦 ^ ^ 马上

  优化提示,使页面加载更快



  1、合并Js文件和CSS
  将JS代码和CSS样式组合到一个共享文件中,这不仅简化了代码,而且还需要多个“Get”请求来扩展JS文件执行时的加载速度。当文件合并在一起时,Get请求的数量自然减少,加载速度也会增加。
  2、Sprites图片技术
  Spriting是一种Web图像应用程序处理方法,它将页面中涉及的所有偶发图像包含在一个大图像中,然后使用CSS技术来显示它。这样,当访问页面时,加载的图像将不会像以前一样一个接一个地显示,这可以减少整个网页的图像大小,并且CSSSprites可以很好地减少网页。 Http请求,极大地提高了页面的性能。 CSSSprites在中国被称为css精灵。它已经使用了很长时间。它被用于许多大型网站。特别是,所有页面上存在的一些图标被更多地使用,这提高了加载速度。
  3、压缩文本和图片
  压缩技术(如gzip)可以有效减少页面加载时间。包括HTML,XML,JSON(JavaScript Object Notation),JavaScript和CSS等,压缩率可以达到70%左右。文本压缩使用频率较高,一般在空间中打开,而且图像的压缩比较随意,很多都是直接上传的,实际上还有很多压缩空间。
  4、延迟显示可见区域外的内容
  为确保用户能够更快地看到网页的可见区域,您可以延迟加载或显示可见区域之外的内容。要避免页面扭曲,可以使用占位符标签设置正确的高度和宽度。例如,当用户停留在第一个屏幕上时,WP的jQueryImage LazyLoad插件无法在第一个屏幕下方加载任何图像信息。只有当用户向下滚动鼠标时,这些图像才会开始加载。这显然增加了可见区域的加载速度并改善了用户体验。
  5、确保首先加载图片功能
  该网站主要考虑可用性的重要性。应该提前加载一个功能按钮,用户进入下载页面,只需8秒钟的下载需要等待5秒。、查找下载按钮图像。谁能忍受呢?
  6、重新排列Call-to-Action按钮
          实际上,这与上面的类似,从用户体验速度开始,跳过网页的整体加载速度。速度没有改变,只是让一些行为按钮前进。 Call-to-Action按钮通常用于在页面底部进行设计。这种习惯并不总是对用户有利。购买用户需要等到底部加载,然后再单击下一步。操作。您可以调整CTA按钮的位置或使用滑动图片按钮。许多大型购物网站都添加到此类购物车中。
  7、图像格式优化
  不合适的图像格式是减慢加载速度的常见罪魁祸首。如果保存为最佳格式,正确的图像格式可以将图像缩小几次。这是一种非常常见的做法,可以节省大量带宽,缩短处理时间并大大加快页面加载速度。
  8、使用渐进式JPEG
  渐进式JPEG图像是JPEG格式的一种特殊变体,称为高级JPEG。当创建高级JPEG文件时,数据被安排成使得当加载图像时,仅显示一个模糊图像,并且当加载数据时,图像逐渐变得清晰。它相当于隔行扫描的GIF格式图片。高级JPEG主要使用调制解调器设计慢速网络,快速网络用户通常不了解它与普通JPEG图像之间的差异。对于网速较慢的用户,这具有良好的体验。
  9、简化代码
  这可以说是最直接的方法,但也用得更多,减少网页代码,删除不必要的冗余代码,如不必要的空格、换行符、注释,包括JS代码中的无用代码也需要清除。其中,对于删除评论代码可能存在一些误解,有些甚至会在其中堆积关键字。
  10、延迟加载和执行非必要脚本
  在页面完全加载之前,网页中有很多脚本不需要执行。您可以延迟加载和执行非必要脚本。这些脚本可以在onload事件之后执行,以避免影响页面上重要内容的呈现。这些脚本可能是甲苯在你自己的网页上,往往更多的是一些第三方脚本,比如有很多,如评论、和、智能推荐、百度云图、共享等等,这些可以完全在主后内容被加载进行。
  11使用AJAX、
       AJAX是“异步Javascript + XML”,它指的是用于创建交互式Web应用程序的Web开发技术。 AJAX可以通过在后台与服务器进行少量数据交换来使网页异步更新。这意味着可以在不重新加载整个页面的情况下更新页面的某些部分。传统网页(不使用AJAX)如果需要更新内容,则必须重新加载整个网页。
评论
相关推荐

26_avatar_small

abigael Lv.3 池畔闲人

头衔 : 起个好听的头衔

签名 : 一句话描述自己