加快网站加载速度和体验的5个技巧

每个人都喜欢一个很酷的小动画，对不对？但是，如果该动画加载的时候持续好几秒以上，它只会让访问者感觉到网站加载速度缓慢的事实。这是一个网站设计中急需要需要的地方。虽然现在网络越来越好，带宽越来越高，导致很多网站设计公司在设计的时候就没有考虑到这些拖慢加载速度和网站提样的点。

很显然，用户期望网站能够快速有效地加载。所以对于深圳网站设计公司来说，不仅要确保网页设计令人满意，而且要注意快速载入网站所有的功能，这是您的工作很重要的点之一。

1.注意动画部分，不要滥用网站CSS3动画效果

网站设计中动画的使用从2015年开始越演越烈。不要因创建无法加载的大量文件而导致加载速度被拖慢。从开始使用这种类型的效果开始，以较小的动画实验开始，然后在对自己的整体网站框架的工作方式和工作状况有良好的感觉后再继续进行更大的动画。

动画的关键不是将一堆视频文件加载到您的网站上。动画越小，创建占用空间更小。

做一些简单而有趣的事情。比如创建一个动画悬停状态。让按钮改变颜色或展开是一个漂亮的效果，它可以帮助您掌握更多CSS效果，并获得让人心情愉悦的基本动画的良好感受，然后再转向更大的元素。您也可以考虑使用AJAX或视差加载动画。这些选项中的任何一个都很好，它可以让你有时间加载元素，而用户甚至不会注意到它。由于元素在用户滚动时加载，所以，用户在这个过程中其实是感觉不到的。

2.优化图像，保持质量上尽可能的压缩

随着用户可以使用高清和视网膜显示器的数量越来越多，当您构建网站时，您可能会试图以高分辨率将所有图像加载，即全尺寸图片加载。不要陷入这个陷阱。大多数这些图片可能太大，以致您的网站无法高效处理用户的需求。

首先你需要了解你想要用你的文件类型。网络上最常见的图像文件格式为JPG，PNG，GIF和SVG。
JPG：最适合照片，JPG文件的大小可以从小到大。当为网站使用保存JPG文件时，请确保保存优化的文件。 （在Adobe Photoshop中，您可以使用“文件”>“导出”>“导出为”下的导出设置优化Web图像。）

PNG：对包含文字的图像使用此文件格式，以便字体呈现良好。这通常是一个相当小的文件。
GIF：较小动画元素的首选文件格式，例如流行的动画模式样式图像。但要小心，如果你不小心，这个文件格式可能会变得非常大。
SVG：如果你需要网络的矢量图像，这是最好的选择。它可以用于从图标到徽标的任何事情。

3.尽可能使用代码解决问题

您可能会试图为您的网站创建一些漂亮的图标和图像，并将它们作为单独的元素加载。这可能会导致一些问题。相反，尽可能使用代码来调用这些元素。
使用CSS来加载背景图片。这将“强制”您的网站在后台加载其他所有内容，以便用户可以立即开始查看网站上的其他元素和文本。 W3Schools有一个简单的教程教你如何做到这一点。

有许多工具，从Font Awesome图标到其他CSS和JavaScript库的加载都可以很方便的调用，您可以使用这些工具创建轻量级且有趣的优秀元素。 

4.保持视频的简短有效

另一个流行的网页设计元素是在您的主页上使用全屏视频。这可能是另一个加载时间陷阱。你会发现自己陷入了视频质量，视频内容和速度之间艰难的抉择中，这个时候，你必须在某个地方做出牺牲了。

最好的视频超短其实只有几秒钟，然后循环播放。记住，您不需要包含声音或其他效果。
您可以尝试一些其他技巧，尽可能减小文件大小。考虑一个使用颜色叠加或模糊一个较低分辨率的视频。它仍然可以看起来很整洁，但不会占用尽可能多的带宽。这是一个不错的技巧。

考虑一个尺寸小于全屏的视频。关闭自动播放功能，可以“欺骗”用户，使其认为您的网站的载入速度比现在更快。相反用一张视频第一帧的图片代替，等视频完全加载完了之后，再将图片封面切换到视频播放，这样是非常自然的。

5.压缩，压缩，再压缩

不仅应该对网站的各个组件进行压缩，还要将网站作为一个整体进行压缩，以帮助保持网站的快速运行。可以压缩的元素包括CSS和JavaScript文件，图像和视频（通过调整大小）以及站点使用诸如GZIP之类的工具等。

网站必须快速，以便用户可以立即进行互动。无论设备如何，加载页面所用的时间越长，用户将完全放弃访问该网站的可能性越大。因此，今天或本周花几分钟时间看看这篇文章，以确保您的网站在最佳的状态运行。