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

丹是WebFX的营销人员,他喜欢一切技术,营销和初创公司。跟着他在推特上@ShafferDan

最近,我们一直强调一个事实,快速的网站是更有利可图的网站.这是众所周知的事实,但也经常被忽视。许多人太专注于网站的功能或设计,而完全忽略了这对他们转化率的主要影响。

何时提高您的页面速度,较少往往更多。可以有点令人生畏的任务来减少不同的页速吸吮区域,所以庆幸地有一些网页优化工具有助于帮助!

提高你的网站的页速不仅可以帮助用户转换,但它也可能对搜索排名产生巨大影响。许多网站忽略了更繁琐的举措,有助于提高页面速度和整体站点质量,例如常规网站维护安全审计

总的来说,提高页面速度可以增加进入你网站的搜索流量,也可以增加流量转化为付费客户的机会。

在为你的网站创建内容时,毫无疑问,加载时间应该由大脑决定。为了帮助您完成这一过程,对于9月份的“每月工具”功能,我们列出了一系列我们推荐的工具,用于提高您网站的页面速度。享受

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

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

没有进一步的延迟,这是工具的完整列表!

测量页面速度的工具

你不会知道如何提高,直到你真正开始衡量你的网站的加载时间。有很多有用的工具,但我们没有时间一一讨论。所以,这里是我们的最爱!

1.Pingdom网站速度测试

Pingdom网站速度测试

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

2.GTmetrix性能报告

GTmetrix性能报告

GTmetrix还提供了一个简单的瀑布报告,用于加载和贡献您的页面速度。单击每个元素将显示附加建议,即应该提高到什么。

3.谷歌铬-检查元素

如果您希望在浏览器中看到您的页面速度的主要贡献者,请尝试查看网络选项卡检查元件工具Chrome。

右键点击网页上的任何地方->检查元素->网络

检查元件-网络

这将给你一个类似于Pingdom和GTmetrix的瀑布视图,除了它将在你正在分析的页面的浏览器底部,而不是去一个不同的网站并输入URL。

4.谷歌分析-网站速度页面计时

谷歌分析-页面速度页面计时

在分析您的网站时,谷歌分析这可能是实际测量页面加载时间的最佳途径。GA实际上将列出哪些页面加载最慢随着时间的推移,您可以在继续提高页面速度的同时跟踪进度。

改进的建议

用于测量页面速度的工具可能只会告诉您“哇,您的加载时间太糟糕了”。但你要去哪里?

同样,谢天谢地,在那里有一些工具可以帮助您开始整个过程​​。你的游戏计划是什么?尤其不是,特别是如果你从未看过改善你的页面速度,那么有一些非常简单的修复程序可以让您的网站提升。

然而,其中一些工具可能非常技术性。如果您不知道JavaScript,或者不知道如何编辑服务器设置,那么最好避免在这些地方乱作一圈,直到您觉得可以进行这些更改,或者找到可以进行这些更改的人。

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

5.谷歌PageSpeed Tools - PageSpeed Insights

当涉及到衡量你的网站的页面速度,谷歌提供了一个完美的攻击计划从内部Pagespeed Insights工具

PageSpeed洞察

该工具基于众多不同的页速因子来产生100分的分数,这些因素已知会导致慢速加载时间。移动和桌面版本根据您的站点在不同的设备上显示的方式显示单独的分数。这就是你需要告诉你如何提高网站速度的一切。

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

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

6.PageSpeed浏览器扩展

它更容易在浏览器中访问相同的数据,而不是一直进入Google的工具,以检查您的页面。幸运的是,谷歌为此做了一种方法,可以易于安装Chrome扩展

在任何网页上,只需单击鼠标右键,然后单击“Inspect Element”(检查元素),您就可以看到引擎盖下面的内容。安装扩展后,您还可以查看有关该页面加载时间的其他信息。

PageSpeed浏览器扩展

单击“分析”,您现在可以在浏览器和同一页面上看到关于如何提高网站速度的所有伟大建议。

7. Google Analytics - 网站速度建议

再次,谷歌分析可以提供一些额外的帮助,以提高您的页面速度。实际上,它所做的就是显示Pagespeed Insights分数和建议在GA仪表板中。从技术上讲,它不是一个不同的网页速度工具,但它换个角度看很有帮助。

Google Analytics  - 网站速度建议

使用此工具的一个好方法是按加载时间或页面视图排序。然后,您可以查看哪些页面最需要帮助,或者查看可能需要改进的访问量较高的页面。分析访问量高的页面可以快速向您展示如何在加快加载时间的同时提高转换率。

好了,你已经用网站速度工具测量了你的页面速度。你甚至发现了一些需要改进的地方。是时候采取实际行动,亲自动手了。下一组工具将帮助您做到这一点,这取决于您正在从事的工作。我们将在可能需要改进的常见(更简单)领域和实现这一目标所需的工具上进行接触。

图像优化工具

photoshop-resizing通过浏览上面的工具提供的各种建议,你可能很快就会了解到图像是非常耗费时间的。这涉及到一些技术细节,但一般规则是保持图像文件尽可能小。

一般来说,你不希望你的网站加载一个巨大的图片,结果却被HTML压缩了。这会导致不必要的高页面速度!优化你的图像是一个很好的方法来提高你的页面时间,这可以通过多种方式来实现。工具8-18将会有帮助!

图像调整工具
对于这个重要的步骤,我们不能只选择一个工具。基本上,你希望你的图片的宽度和高度完全相同,是需要在你的网站。这意味着你不希望有一个1200像素宽的图像,但在你的博客上显示为300像素。您需要将实际图像文件的大小调整为300像素。这将减少图像的大小,并显著减少加载时间。

以下是您可以使用以下操作的工具和教程列表:

8。在Photoshop中调整图像大小
9。在Paint中调整图像的大小
10.在Microsoft图片管理器中调整图像大小
11.Pixlr
12.网页大小调整器
13.收缩图片
14.图片大小

图像压缩工具

同样地,也有许多压缩工具!图像压缩将结合类似的颜色,并去除大量多余的垃圾,你的图像不需要。这听起来很残酷,但你通常无法区分压缩的图像和未压缩的图像!

Kraken图像压缩工具

您也可以在Photoshop中执行此操作,但我们在网上找到了一些更易于使用的批量压缩工具:

15.克朗.IO.(见上图)
16.TinyPNG
17.另外一种方法是Google Chrome扩展中的PageSpeed Insights工具在“优化图像”部分中,每个建议旁边都会出现“查看优化内容”链接。您可以打开这些文件,然后保存它们以供在您的网站上使用!

PageSpeed Insights图像压缩工具

18.延迟加载图片

您可以在加快您的图像时进一步逐步。事实上,你根本不能加载它们!...即,直到访客实际上需要去看他们。

通过JavaScript从加载中阻止延迟加载图像,直到某个事件发生。此事件可以是基于时间的,或者它可以基于您的访客正在寻找的位置。例如,图像不会加载,直到用户向下滚动页面以实际看到它。这可以防止您的页面必须等待甚至在几秒钟(甚至分钟)才能加载的图像加载,直到几秒钟(甚至分钟)。

延迟加载可能是一个复杂的主题,但是有很多延迟加载WordPress插件jquery插件如果您熟悉HTML和JavaScript,那么设置起来并不太难。

CSS精灵工具

你的网站可能有一些图片和图标,你制作或发现在网上使用整个网站。一个节省空间的好方法是将这些图像合并到CSS精灵中(不,不是饮料)。

CSS Sprite允许您将多个图像组合成一个,保存浏览器必须与服务器交谈的次数。然后,一些简单的CSS将图像划分为部分以显示在网站上需要的正确部分。

SpriteBox  -  CSS精灵

组合图像并为每个部分找到正确的尺寸可能是一个烦人的过程。然而,一些很酷的人在这里和那里制作了一些工具来帮助简化这个过程!

19。雪碧牛
20.Spritepad.
21.Spritebox(见上图)

技术优化工具

好吧,如果你对技术不感兴趣,你可以跳过这部分。虽然,这不是太先进,你可以从中学习!

在优化您为网站创建的内容后,可能是时候查看您的框架中包含改进内容的部分了。

22. W3总缓存

w3total Cache

如果你使用WordPress,你会非常欣赏这个免费插件。w3total Cache将采取几乎所有的幕后细节,并为您优化它。这包括缓存控制、CDN管理和代码缩减。

有一个很多W3 Total缓存可以做到这一点,它是最强大的插件之一。尽管如此,最好还是照着做一些关于如何使用它的深入教程!

23.CloudFlare CDN

一个CDN将缩短您的网站的主机服务器和试图访问它的用户之间的距离。这种物流改进将加快您的网站,因为它动态地通过最短的路线向世界各地的任何人提供您的网站。

来自CloudFlare的图像

有几个cdn,但是CloudFlare's是最好的。它也正好有一个免费的计划供任何人使用!

CloudFlare可以轻易地恐吓用户,因为它是另一个超级强大的网站管理工具。但是不要害怕:有很多教程教你如何正确设置它!

缩小您网站代码的工具

在你的网站包含的文件中有很多不必要的空间。浏览器实际上并不关心实际body copy之外的空格,这使得所有易于阅读的代码都只是浪费空间。最小化代码将去掉所有额外的空格。这压缩了文件的大小,使其非常难以阅读,但仍然可用。

24.YUI压缩机可用于缩小CSS和JavaScript。

PageSpeed Insights缩小HTML

25.你也可以使用谷歌PageSpeed Insights来缩小你的HTML。如上图所示,点击相应区域的“看优化内容”即可对图像进行优化。

26如果你使用WordPress,有几个插件来缩小你的代码, 包含w3total Cache

这就是名单!

我相信除了这26个工具,还有更多的工具可以提高你的网站速度,但我希望你发现这对你的整体页面速度有很大的帮助!许多公司都不遗余力地提高页面速度,因为这将极大地影响他们的在线业务。希望这些工具能让你找到更快的网站和更好的加载时间。

如果你有兴趣学习更多关于提高网站速度的知识,这里有一些有价值的资源,你可能想要咨询:

你有没有想推荐的页面速度提升工具?非常欢迎你在评论中提到这一点。我们很想和你讨论一下!

图片/图片来源:CloudFlare,FlySi