懒加载可以节省带宽_优化网站以加快加载速度并节省带宽的方法

懒加载可以节省带宽

首先，图像。 (First and foremost, images.)

You should optimise your images before putting them on your web site or blog. If you have a Mac, there’s a great application called ImageOptim that optimises a variety of image file formats including .PNG and .JPG. It will reduce the image size while not compromising on the quality of the image. The quality of the image remains pretty much the same. Windows tools include PNGOUT and SuperPNG (a Photoshop plugin).

您应该先优化图像，然后再将其放置在网站或博客上。 如果您使用的是Mac，则有一个名为ImageOptim的出色应用程序，它可以优化各种图像文件格式，包括.PNG和.JPG。 这将减小图像尺寸，同时又不影响图像质量。 图像的质量几乎保持不变。 Windows工具包括PNGOUT和SuperPNG(Photoshop插件)。

减少使用的图像量。 (Reduce the amount of image you use.)

Use CSS3 gradients. While only the newer versions of the major browsers support them, most of your visitors will likely be using a newer version of which ever browser they’re using. Until Internet Explorer 10, you will need to use their own non-standards CSS property in order for CSS gradients to work in Internet Explorer 9 and below. However, from Internet Explorer 10 and onwards, CSS gradients are fully supported.

使用CSS3渐变。 尽管只有较新版本的主要浏览器才支持它们，但大多数访问者可能会使用他们所使用的浏览器的较新版本。 在Internet Explorer 10之前，您将需要使用它们自己的非标准CSS属性才能使CSS渐变在Internet Explorer 9及更低版本中正常工作。 但是，从Internet Explorer 10开始，完全支持CSS渐变。

浏览器支持 (Browser support)

Firefox 3.6及更高版本。 (Firefox 3.6 and above.)

By using the non-standards -moz- CSS property.

通过使用非标准的-moz- CSS属性。

Chrome 4.0及更高版本。 (Chrome 4.0 and above.)

By using the non-standards -webkit- CSS property.

通过使用非标准的-webkit- CSS属性。

Safari 4.0及更高版本。 (Safari 4.0 and above.)

By using the non-standards -webkit- CSS property.

通过使用非标准的-webkit- CSS属性。

iOS 3.2 (iOS Safari) and above.

iOS 3.2(iOS Safari)及更高版本。

By using the non-standards -webkit- CSS property.

通过使用非标准的-webkit- CSS属性。

Opera 11.1及更高版本。 (Opera 11.1 and above.)

By using the non-standards -o- CSS property. From 11.1 to 11.5 only linear CSS gradients are supported.

通过使用非标准的-o- CSS属性。 从11.1到11.5，仅支持线性 CSS渐变。

Opera mini.

歌剧迷你 。

Not supported.

不支持。

Opera mobile 11.1 and above.

Opera mobile 11.1及更高版本。

By using the non-standards -o- CSS property.

通过使用非标准的-o- CSS属性。

Android 2.1及更高版本(Android浏览器)， (Android 2.1 and above (Android browser),)

By using the non-standards -webkit- CSS property.

通过使用非标准的-webkit- CSS属性。

使用WordPress缓存插件。 (Using WordPress Caching Plugins.)

“WP Super Cache” is a great WordPress plugin that will cache WordPress pages so it means pages load faster especially if your blog attracts a lot of traffic. This could be the difference between requiring a more powerful hosting environment, so make use of the plugin as it can improve speediness, especially on high-traffic blogs.

“ WP Super Cache”是一个很棒的WordPress插件，它将缓存WordPress页面，因此这意味着页面加载速度更快，特别是在您的博客吸引大量流量的情况下。 这可能是需要更强大的托管环境之间的区别，因此请使用该插件，因为它可以提高速度，尤其是在高流量博客上。

压缩您CSS。 (Compress your CSS.)

MinifyCSS.com offers a free CSS compression too that can dramatically reduce the file size of your CSS stylesheet file – and if you want the largest compression ratio, it will affect readability but then you could keep a readable and unreadable version for when you wish to make amendments. The disadvantage of compressing CSS is that if you compress it to the highest available settings, you may have to work on the uncompressed CSS stylesheet in order to make amendments, then compress the stylesheet again to save the changes to the server-side stylesheet. I’d highly recommend you compress your CSS stylesheets using this online tool.

MinifyCSS.com也提供了免费CSS压缩功能，可以极大地减小CSS样式表文件的文件大小-如果您想要最大的压缩率，它将影响可读性，但是当您希望进行修改。 压缩CSS的缺点是，如果将其压缩到最高可用设置，则可能必须处理未压缩CSS样式表才能进行修改，然后再次压缩样式表以将更改保存到服务器端样式表。 我强烈建议您使用此在线工具压缩CSS样式表。

压缩HTML。 (Compress HTML.)

You can also compress down your HTML code as well using free online tools.

您还可以使用免费的在线工具压缩HTML代码。

不要将jQuery库托管在您自己的网站/网络服务器上。 (Don’t host the jQuery library on your own web site/web server.)

Do you use the jQuery library? If you do, don’t bother hosting the jQuery library on your web site. Use a free CDN that will save you bandwidth over time. For example, for jQuery 1.7.2, you can use the jQuery library hosted on Google’s servers:

您是否使用jQuery库？ 如果这样做，请不要在您的网站上托管jQuery库。 使用免费的CDN可以节省带宽。 例如，对于jQuery 1.7.2，您可以使用Google服务器上托管的jQuery库：

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

You can also use jQuery’s own CDN:

您还可以使用jQuery自己的CDN：

http://code.jquery.com/jquery-1.7.2.min.js

http://code.jquery.com/jquery-1.7.2.min.js

If you have an ASP.NET web application, you can integrate Microsoft’s CDN into your ASP.NET web application as explained here or directly if you wish within a <script> src include, as above with Google’s and jQuery’s CDN.

如果您有ASP.NET Web应用程序，则可以按照此处的说明将Microsoft的CDN集成到ASP.NET Web应用程序中，或者直接将其集成到<script> src include中，如上面的Google和jQuery的CDN所示。

您的博客或网站仍然很慢吗？ (Is your blog or site still slow?)

It could be as the result of a widget or plugin you have active on your site or blog. If you do not need certain widgets or plugins on your blog, remove them as it can be another attribute of your site load performance.

这可能是由于您在网站或博客上处于活动状态的小部件或插件导致的。 如果您的博客上不需要某些小部件或插件，请删除它们，因为它可能是网站负载性能的另一个属性。

Find out more about what is a Content Delivery Network.

详细了解什么是内容交付网络 。

翻译自: https://www.eukhost.com/blog/webhosting/ways-to-optimise-your-site-to-load-faster-and-save-bandwidth/

懒加载可以节省带宽