26个提高网站页面速度的工具

丹是一个营销人员对WebFX他什么都喜欢科技,营销,创业。在推特上关注他@ShafferDan

最近,我们一直强调的事实是,快速的网站是更赚钱的网站.这是众所周知的事实,但也经常被忽视。许多人过于关注网站的功能或设计,以至于完全忽略了这一影响转化率的主要因素。

说到提高页面速度,少即是多。减少不同的页面速度消耗区域可能是一项艰巨的任务,所以谢天谢地,有一些网页优化工具可以帮助您!提高你的网站的页面速度这不仅能帮助用户转换,还能对你的搜索排名产生巨大影响。

许多网站忽视了那些帮助提高页面速度和整体网站质量的更繁琐的举措,比如例行程序网站维护而且安全审计.总之,提高页面速度可以提高访问站点的搜索流量,还可以增加流量转化为付费客户的机会。

在为您的网站创建内容时,毫无疑问,加载时间应该在大脑中。为了帮助你完成这个过程,在9月份的“每月工具”专题中,我们列出了一个工具列表,我们推荐这些工具来提高你的网站的页面速度。

享受吧!

单击这些链接可跳到您选择的部分

如果你正在寻找一个特定的工具,你可以这样跳到每个部分:

不再拖延,这里是完整的工具列表!

测量页面速度的工具

除非你真正开始测量网站的加载时间,否则你不会知道如何改进。有很多有用的工具,但我们没有时间一一讨论。所以这里是我们最喜欢的!

1.Pingdom网站速度测试 Pingdom网站速度测试Pingdom提供了一个非常快速和简单的测量你的网站的速度。从浏览器发出的所有请求的一个方便的瀑布可以为您提供一些非常好的线索,以了解是什么原因导致加载时间如此之慢。

2.GTmetrix性能报告 GTmetrix性能报告GTmetrix还提供了一个简单的瀑布报告,显示什么正在加载并对页面速度有贡献。单击每个元素将显示关于应该改进的其他建议。

3.谷歌铬-检查元素的Network选项卡,如果您希望在浏览器中查看影响页面速度的主要因素,请尝试查看检查元素的工具Chrome。右键单击网页的任何地方->检查元素->网络检查元件-网络这将为您提供与Pingdom和GTmetrix类似的瀑布视图,只不过它将位于您正在分析的页面的浏览器底部,而不是转到另一个网站并输入URL。

4.谷歌分析-网站速度页面计时 谷歌分析-页面速度页面计时在分析网站时,谷歌分析这可能是测量页面加载时间的最佳方法。GA会列出加载最慢的页面随着时间的推移,允许您在继续提高页面速度时跟踪进度。

改进的建议

测量页面速度的工具可能会告诉你“哇,你的加载时间太糟糕了。”但你该怎么办呢?同样值得庆幸的是,还有更多的工具可以帮助您开始整个过程。你的计划是什么?

通常情况下,特别是如果你从来没有考虑过提高你的页面速度,有一些非常简单的修复可以给你的网站一个提升。然而,其中一些工具可能非常技术化。如果你不懂JavaScript或者不知道如何编辑服务器设置,最好还是避免在这些方面乱来,直到你觉得可以做这些更改,或者找到可以做这些更改的人。

幸运的是,工具5-7很可能会指出一些非常简单的修复,可以快速提高您的加载时间。

5.谷歌页面速度工具-页面速度洞察力当谈到测量网站的页面速度时,谷歌提供了一个从内部攻击的完美计划PageSpeed见解工具PageSpeed见解该工具将根据已知的导致加载时间变慢的几种不同的页面速度因素,给出满分为100的评分。根据网站在不同设备上的显示情况,移动版和桌面版会显示不同的分数。

这是你可能需要告诉你如何提高网站速度的一切。在这些结果中,您会发现一些不同的有价值的信息,您可以在下一步提高页面速度时考虑这些信息。只要你看到“显示如何修复”箭头,你就应该列出需要改进的地方。

谷歌还为您提供了一些不同的区域,以更有效和可衡量的方式访问PageSpeed Insights。

6.PageSpeed Insights Chrome扩展在浏览器中访问相同的数据比一直使用谷歌的工具检查页面更容易。幸运的是,好的ol '谷歌用一个易于安装的方法实现了这一点Chrome扩展.当在任何网页上,一个简单的右键点击“检查元素”会给你一个引子下的一瞥。

安装了扩展后,您还可以查看页面加载时间的附加信息。PageSpeed Insights Chrome扩展点击“分析”,你就可以看到之前所有关于如何提高网站速度的建议,就在你的浏览器和相同的页面上。

7.谷歌分析-网站速度建议再次,谷歌分析可以为提高页面速度提供一些额外的帮助。实际上,它所做的就是显示PageSpeed Insights得分和建议在GA仪表板中。从技术上来说,它并不是一个不同的网页速度工具,但它从另一个角度看问题很有帮助。

谷歌分析-网站速度建议使用这个工具的一个很好的方法是根据加载时间或页面浏览量进行排序。然后,您可以查看哪些页面最需要帮助,或者查看可能需要改进的访问量高的页面。分析访问次数高的页面可以快速告诉您如何通过加快加载时间来提高转化率。

好了,你已经用网站速度工具测量了你的页面速度。你甚至发现了一些需要改进的地方。是时候真正打击一下,亲自动手了。

下一组工具将帮助您做到这一点,具体取决于您的工作内容。我们将接触可能需要改进的公共(更容易)领域,以及您将需要的工具。

图像优化工具

photoshop-resizing通过浏览上面的工具所提供的各种建议,您可能很快就会了解到图像是一个巨大的时间消耗。这涉及到一些技术细节,但一般规则是尽可能保持图像文件的小。一般来说,你不希望你的网站加载一个巨大的图像,结果它被HTML缩小。

这会导致不必要的高页面速度!优化你的图片是一个很好的方法来提高你的页面时间,这可以通过多种方式来实现。工具8-18会有帮助!

图像调整工具对于这一重要步骤,我们不能只选择一种工具。

基本上,你希望你的图片与你的网站所需的宽度和高度完全相同。这意味着你不希望有一个1200像素宽的图像,但在你的博客上显示为300像素。您需要将实际图像文件的大小调整为300像素。

这将减少图像的大小,并大大减少加载时间。下面是你可以使用的工具和教程列表:

8.在Photoshop中调整图片的大小

9.在“绘制”中调整图像的大小

10.在Microsoft图片管理器中调整图片的大小

11.Pixlr

12.网络调整

13.缩小图片

14.图片大小图像压缩工具

同样,还有很多压缩工具!图像压缩将组合相似的颜色,并去掉很多多余的垃圾,你的图像不需要。

这听起来很残酷,但是您通常无法区分压缩的图像和未压缩的图像!Kraken图像压缩工具你也可以在Photoshop中这样做,但我们在网上找到了一些更容易使用的批量压缩工具:

15.Kraken.io(见上图)

16.TinyPNG

17.另一种方法是使用谷歌Chrome扩展中的PageSpeed Insights工具

在优化图片部分,“查看优化的内容”链接将出现在每个建议的旁边。你可以打开这些,然后保存它们在你的网站上使用!

PageSpeed Insights图像压缩工具

18.延迟加载图片你可以进一步加速你的图像。事实上,你完全可以不加载它们!...

也就是说,直到来访者真的需要看到他们。通过JavaScript,延迟加载的图像被阻止加载,直到某个事件发生。这个事件可以是基于时间的,也可以是基于你的访问者在看什么。

例如,只有当用户在页面上向下滚动到足以看到图像时,图像才会加载。这可以防止你的页面不得不等待一个图片加载,甚至直到几秒钟(甚至几分钟)后才会看到。延迟加载可能是一个复杂的主题,但有很多惰性加载WordPress插件而且jQuery插件如果你熟悉HTML和JavaScript,设置起来并不难。

CSS精灵工具

您的网站可能有一些您在网上制作或找到的图片和图标,用于整个网站。节省空间的一个好方法是将这些图像组合成CSS精灵(不,不是饮料)。CSS精灵允许你将多个图像组合成一个图像,从而节省浏览器与服务器通信的时间。

然后,一些简单的CSS将图像分成几个部分,在站点上需要它的地方显示正确的部分。Spritebox - CSS Sprites组合图像并为每个部分找到正确的尺寸可能是一个恼人的过程。然而,一些很酷的人在这里和那里做了一些工具来帮助简化这个过程!

19.Spritecow

20.SpritePad

21.Spritebox(见上图)

技术优化工具

好吧,如果你对技术不感兴趣,你可能想跳过这部分。不过,这并不太高级,你可以从中学习!在优化你为你的网站创建的内容之后,可能是时候看看你的框架中容纳内容的区域,以改进的区域。

22.W3

全部缓存 w3total Cache如果你使用WordPress,你会非常喜欢这个免费插件。w3total Cache将采取几乎每一个幕后细节和优化它为您。这包括缓存控制、CDN管理和代码缩小。

有一个很多W3总缓存可以做到的,它是最强大的插件之一。话虽如此,最好还是跟着做一些关于如何使用它的深入教程

23.CloudFlare CDNCDN将缩短你的网站托管服务器和试图访问它的用户之间的距离。这种物流改进将加快您的网站,因为它通过最短的路径动态地将您的网站提供给世界各地的任何人。图像从CloudFlare外面有几个cdn,但是CloudFlare是最好的之一。

它还有一个免费的计划供任何人使用!CloudFlare是一个很容易吓到用户的东西,因为它是另一个超级强大的网站管理工具。但不要害怕:有很多教程教你如何正确设置它!

简化网站代码的工具

在你网站的文件中有很多不必要的空间。浏览器并不真正关心实际的主体副本之外的空间,使得所有易于阅读的代码只是浪费空间。最小化代码将去掉所有额外的空白。

这将压缩文件大小,使其非常难以阅读,但仍然有效。

24.YUI Compressor可以用来简化你的CSS和JavaScript。PageSpeed Insights最小化HTML

25.你也可以使用谷歌PageSpeed Insights来缩小你的HTML。只要点击上面描述的相应区域的“查看优化内容”,就可以对图片进行优化。26.如果你使用WordPress,就有几个插件来缩小你的代码,包括w3total Cache,以帮助…WordPress速度优化

这是列表!

我相信除了这26个工具,还有更多的工具可以加速你的网站,但我希望你发现这对你的整体页面速度有很大的帮助!许多公司都竭尽全力提高网页浏览速度,因为这对他们的在线业务有重大影响。

希望这些工具能让你朝着更快的网站和更好的加载时间的正确方向前进。如果你有兴趣了解更多关于提高你的网站速度,这里有一些有价值的资源,你可能想要咨询:

您是否有想推荐的提高页面速度的工具?非常欢迎你在评论中提到它。我们很乐意和你讨论这个问题!

图片/图片来源:CloudFlare,FlySi

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!