7个可以帮助加快网站速度的提示

栏目: CSS · 发布时间: 7年前

内容简介:7个可以帮助加快网站速度的提示
  1.        几乎每个人都喜欢一个很酷的加载动画,对吧?但是,如果这个效果持续超过一两秒或者更久,它只会引起用户的注意并强化用户认为这个网站加载缓慢这件事实的想法。所以,这对于网站来说简直就是致命的。

用户希望网站能够快速高效地加载。确保网站设计不仅仅只是在视觉上令人满意,同时,你需要保证它能100%的发挥它的功能,这是你的工作。如果你的网站目前刚好存在这方面的优化的话,你现在可以停止担心,因为我们有七个提示可以来帮助你加速你的网站,同时对设计进行微调(你可以访问在文章中介绍的每个网站,它们看起来都很棒,并且它们打开网页的速度“快如闪电”)。

1.注意动画的使用

7个可以帮助加快网站速度的提示

在网站设计中使用动画是2015年到现在一直在流行的“趋势”之一。当你在使用这个技巧的时候,确保你创建的动效不会加载大量以及大格式的文件。你可以在刚开始接触的使用使用较小的动画,当你获得灵感以及了解它们的工作方式和在整个网站框架中如何工作的时候,你可以继续更大的动画效果。

使用动画的关键不是将一堆视频文件加载到你的网站中。动画越小,创建的东西越容易,所占的空间以及版块就越小。所以,你会从哪里开始呢?

动画的使用不仅仅只是限定在大范围和大动作,做一些简单的效果同样是一个有趣的事情,比如创建悬停动画状态。按钮更改颜色或扩展是一个很简单但是却很有效的的动作,它不仅能够帮助你掌握CSS,同时,在这个过程中你可以获得对基本动画的感觉,然后再转到更大的元素。你也可以考虑使用AJAX或视差加载动画。对于这些选项中的任何一个都有好处,这样可以让你有时间加载元素,而无需用户注意。因为元素在用户滚动时加载,所以你可以获得一些宝贵的时间来准备好所有的东西。

2.优化图像

7个可以帮助加快网站速度的提示

随着用户使用高清和视网膜显示器的数量不断增加,你可能会在构建你的网站时将所有图像以高分辨率加载。不要陷入这个陷阱。大多数这些图像可能太大了,以致于你的网站不能有效地处理,导致网站整体的加载速度被拖慢。

你要充分了解你的文件类型。Web上图像最常见的文件格式有JPG,PNG,GIF和SVG。

· JPG:最适合于照片,JPG文件的大小不定,可以很大,也可以很小。保存JPG文件以供网站使用时,请确保保存优化的文件。

· PNG:对于包含文本的图像,使用此文件格式,以使文字呈现的效果最佳。这通常是一个相当小的文件。

· GIF:较小动画元素的首选文件格式,例如流行的动画图像。但请注意,如果你不当使用,此文件格式可能会变成一种累赘

· SVG:如果你需要Web格式的矢量图像,这是最好的选择。它可以适用于从图标到logo的任何东西。

3.尽可能使用代码

7个可以帮助加快网站速度的提示

你可能会尝试为你的网站创建一堆漂亮的图标和图像,并将其作为单个元素加载。这可能会导致一些问题。相反,尽可能使用代码调用这些元素。

使用CSS加载背景图像。这将“强制”你的网站加载背景之外的所有内容,因此用户可以立即开始在网站上查看其他元素和文字。W3Schools有一个很有效,简单的教程,教你如何做到这一点。

还有很多 工具 可以帮助你优化,如Font Awesome图标,通过加载其他CSS和JavaScript库,你可以轻易的使用它们,并创建有趣的元素与轻量级的效果。

4.保持视频简短

另一种时尚的网页设计元素是在你的主页上使用全屏视频。这可能是另一个使你的网站“负载”的陷阱。 你会发现自己被困在在视频质量,视频内容和速度之间,“鱼和熊掌不可兼得”,你必须在某个方面作出牺牲。

最好的视频题材是超短的(只有几秒钟)循环,以使动作不会停止,也不需要包括声音或其他的效果。

你可以尝试一些其他的技巧来尽可能地减少文件的大小。

· 想想在较低分辨率的视频上的使用颜色叠加或模糊。它仍然在视觉上看起来很整齐,但不在会占用太多的资源。

· 考虑一个小于全屏尺寸的视频。

· 自动播放,这可以“欺骗”用户认为你的网站加载速度比其他的更快。

· 不要陷于长视频的陷阱中。如果你必须要显示多个视频的话,请考虑使用视频“滑块”元素,或者使用按照时间表来手动更改视频,以便用户每次访问该网站时都可以看到新内容(无论你的剪辑的多么好,没有几个用户会观看超过几秒的,所以不要为视频的长度而牺牲加载时间)。

5.想想主题

如果你正在使用WordPress或其他具有主题性质的内容管理系统,请记住,并非所有主题都是相同的。虽然你可能会走运了解一些高级选项,比如其中一些会让你“关闭”未使用的元素,仔细看看代码和构建,以确保这不会发生在你的网站。

6.注意你使用的插件

7个可以帮助加快网站速度的提示

你的网站使用了多少插件或第三方应用程序?你是否每个都有使用到?确保关闭未使用的插件以优化效率。

WordPress用户可以利用插件性能分析器来查看哪些插件是活动的,以及它们的工作原理。这可以帮助你排除故障并识别问题,并删除或重新配置这些插件。

7.压缩,压缩,压缩,重要的事情说三遍

7个可以帮助加快网站速度的提示

你的网站不仅仅是单个组件需要压缩,你还可以整合网站做整体的压缩,以便保持网站快速的运行速度。 可以压缩的元素是CSS和JavaScript文件,图像和视频(通过调整大小),通过使用相关的压缩工具,如GZIP。

精简文件是插件和创建较小文件时的最佳路径。你还要检查代码在站点内的设计。为了保证能够获得最大的速度,所有的JavaScript应该包含在一个文件中,所有的CSS应该包含在另一个文件中(另外一个注意事项:放置代码的时候你也需要注意,将CSS链接到页面顶部,将JavaScript链接到底部以提高网站速度)。

总结

7个可以帮助加快网站速度的提示

你的网站加载速度够快吗?如果hi阿不够,现在是调整它以满足最佳加载时间的时候了(如果你不能马上回答,需要考虑这个问题才能告诉答案的话,那么证明你的网站可能不够快)。

网站必须快速,以便用户可以立即进行交互。无论设备如何,页面加载所需的时间越长,用户越有可能放弃网站。因此,请在今天或本周花上几分钟时间,然后浏览此列表,以确保你的网站正以最佳的状态运行。


以上所述就是小编给大家介绍的《7个可以帮助加快网站速度的提示》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Book of CSS3

The Book of CSS3

Peter Gasston / No Starch Press / 2011-5-13 / USD 34.95

CSS3 is the technology behind most of the eye-catching visuals on the Web today, but the official documentation can be dry and hard to follow. Luckily, The Book of CSS3 distills the heady technical la......一起来看看 《The Book of CSS3》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具