几乎每个人都喜欢一个很酷的加载动画,对吧?但是,如果这个效果持续超过一两秒或者更久,它只会引起用户的注意并强化用户认为这个网站加载缓慢这件事实的想法。所以,这对于网站来说简直就是致命的。
用户希望网站能够快速高效地加载。确保
网站设计不仅仅只是在视觉上令人满意,同时,你需要保证它能100%的发挥它的功能,这是你的工作。如果你的网站目前刚好存在这方面的制作的话,你现在可以停止担心,因为我们有七个提示可以来帮助你加速你的网站,同时对设计进行微调(你可以访问在文章中介绍的每个网站,它们看起来都很棒,并且它们打开网页的速度“快如闪电”)。
1.尽可能使用代码你可能会尝试为你的
网页设计创建一堆漂亮的图标和图像,并将其作为单个元素加载。这可能会导致一些问题。相反,尽可能使用代码调用这些元素。
使用css加载背景图像。这将“强制”你的网站加载背景之外的所有内容,因此用户可以立即开始在网站上查看其他元素和文字。w3schools有一个很有效,简单的教程,教你如何做到这一点。
还有很多工具可以帮助你制作,如font awesome图标,通过加载其他css和javascript库,你可以轻易的使用它们,并创建有趣的元素与轻量级的效果。
2.注意动画的使用在
网站设计中使用动画是2015年到现在一直在流行的“趋势”之一。当你在使用这个技巧的时候,确保你创建的动效不会加载大量以及大格式的文件。你可以在刚开始接触的使用使用较小的动画,当你获得灵感以及了解它们的工作方式和在整个网站框架中如何工作的时候,你可以继续更大的动画效果。
使用动画的关键不是将一堆视频文件加载到你的网站中。动画越小,创建的东西越容易,所占的空间以及版块就越小。所以,你会从哪里开始呢?
动画的使用不仅仅只是限定在大范围和大动作,做一些简单的效果同样是一个有趣的事情,比如创建悬停动画状态。按钮更改颜色或扩展是一个很简单但是却很有效的的动作,它不仅能够帮助你掌握css,同时,在这个过程中你可以获得对基本动画的感觉,然后再转到更大的元素。你也可以考虑使用ajax或视差加载动画。对于这些选项中的任何一个都有好处,这样可以让你有时间加载元素,而无需用户注意。因为元素在用户滚动时加载,所以你可以获得一些宝贵的时间来准备好所有的东西。
3.制作图像随着用户使用高清和视网膜显示器的数量不断增加,你可能会在构建你的网站时将所有图像以高分辨率加载。不要陷入这个陷阱。大多数这些图像可能太大了,以致于你的网站不能有效地处理,导致网站整体的加载速度被拖慢。
你要充分了解你的文件类型。web上图像最常见的文件格式有jpg,png,gif和svg。
· jpg:适合于照片,jpg文件的大小不定,可以很大,也可以很小。保存jpg文件以供网站使用时,请确保保存制作的文件。
· png:对于包含文本的图像,使用此文件格式,以使文字呈现的效果好。这通常是一个相当小的文件。
· gif:较小动画元素的选文件格式,例如流行的动画图像。但请注意,如果你不当使用,此文件格式可能会变成一种累赘
· svg:如果你需要web格式的矢量图像,这是最好的选择。它可以适用于从图标到logo的任何东西。
4.保持视频简短
另一种时尚的
网页设计元素是在你的主页上使用全屏视频。这可能是另一个使你的网站“负载”的陷阱。 你会发现自己被困在在视频质量,视频内容和速度之间,“鱼和熊掌不可兼得”,你必须在某个方面作出牺牲。
最好的视频题材是超短的(只有几秒钟)循环,以使动作不会停止,也不需要包括声音或其他的效果。
你可以尝试一些其他的技巧来尽可能地减少文件的大小。
· 想想在较低分辨率的视频上的使用颜色叠加或模糊。它仍然在视觉上看起来很整齐,但不在会占用太多的资源。
· 考虑一个小于全屏尺寸的视频。
· 自动播放,这可以“欺骗”用户认为你的网站加载速度比其他的更快。
· 不要陷于长视频的陷阱中。如果你必须要显示多个视频的话,请考虑使用视频“滑块”元素,或者使用按照时间表来手动更改视频,以便用户每次访问该网站时都可以看到新内容(无论你的剪辑的多么好,没有几个用户会观看超过几秒的,所以不要为视频的长度而牺牲加载时间)。
5.注意你使用的插件你的网站使用了多少插件或第三方应用程序?你是否每个都有使用到?确保关闭未使用的插件以制作效率。
wordpress用户可以利用插件性能分析器来查看哪些插件是活动的,以及它们的工作原理。这可以帮助你排除故障并识别问题,并删除或重新配置这些插件。
6.压缩,压缩,压缩,重要的事情说三遍
你的网站不仅仅是单个组件需要压缩,你还可以整合网站做整体的压缩,以便保持网站快速的运行速度。 可以压缩的元素是css和javascript文件,图像和视频(通过调整大小),通过使用相关的压缩工具,如gzip。
精简文件是插件和创建较小文件时的好路径。你还要检查代码在站点内的设计。为了保证能够获得大的速度,所有的javascript应该包含在一个文件中,所有的css应该包含在另一个文件中(另外一个注意事项:放置代码的时候你也需要注意,将css链接到页面顶部,将javascript链接到底部以提高网站速度)。
总结你的网站加载速度够快吗?如果还不够,现在是调整它以满足好加载时间的时候了(如果你不能马上回答,需要考虑这个问题才能告诉答案的话,那么证明你的网站可能不够快)。
网站必须快速,以便用户可以立即进行交互。无论设备如何,页面加载所需的时间越长,用户越有可能放弃网站。因此,请在今天或本周花上几分钟时间,然后浏览此列表,以确保你的网站正以好的状态运行。
本文名称:为什么别人的网站加载速度连博尔特都追不上?
网站网址:/news0/106700.html
成都网站建设公司_创新互联,为您提供星空体育app最新版本(2024已更新)、微信小程序、营销型网站建设、App开发、外贸建站、Google
广告
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
创新互联