修复慢速站点上的性能问题

如果您的网站像Zootopia中的DMV中的其中一个树懒一样移动,有一些方法可以解决任何减慢它的问题。 弄清楚导致问题的原因是成功的一半,所以一旦你找到了原因,你至少可以找到解决问题的答案。

低质量托管是最可能的罪魁祸首

在网络托管方面,低质量的概念并不总是意味着它在其他环境中所做的事情。 例如,您为托管所支付的价格并不总是能够准确反映您所期望的质量。 服务的受欢迎程度或品牌名称的知名程度也不高。

事实上,一些最受欢迎的托管品牌是最糟糕的选择,仅仅因为有太多人使用它们。 这取决于他们基础设施的质量。 如果他们正在对他们的技术进行适当的投资,那么您可能不会遇到重大的性能问题。 另一方面,您可能与数百个其他站点共享一台服务器,随着磁盘存储容量的持续增长,该问题将会增加。

因此,在这种情况下,使用优质技术切换到较小的,知名度较低的Web托管服务可能是更好的选择。 这样做也可能意味着您获得更多的个性化客户服务,其质量水平高于您从庞然大物中获得的质量水平。 这是值得考虑的,只需在新主机上购买一个月的订阅并根据现有网站对性能进行基准测试就可以轻松进行测试。

使用您的F12密钥

大多数Web浏览器都经过调整,可以通过F12密钥访问调试控制台,而您的调试控制台也很可能不是例外。 说到异常,这几乎就是您正在寻找的,或者确切地说,JavaScript代码中的错误会导致异常并影响性能。

您可以在自己的代码和导入的代码库(如jQuery)中找到这些错误。 仅仅因为jQuery很大而且流行并不意味着它完美无瑕。 以下是您正在寻找的事物的示例:

标记为蓝色的错误只是CSS错误,您通常可以期望看到那些由于开发人员在构建样式表时必须要做的数量,这仅仅是因为在所有浏览器中仍然没有采用单一标准。 除非您使用大量动画或过渡效果,否则它们通常不会影响性能。

但是标记为橙色的错误是一个JavaScript错误,不仅如此,在这种情况下它是累积奖金,因为它特别告诉我们这个特定错误会导致代码运行得非常慢。

从Google获得一些免费建议

您是否知道Google可以免费分析您的网页,并为您提供有关如何解决任何问题的提示? 您只需访问Google的Page Speed Insights页面,然后输入您要分析的网页的网址即可。

它真的不容易,但你可能不一定要虔诚地遵循他们的建议。 谷歌的系统很好地弄清楚可能会减慢你的页面速度,但一些修复可能无法解决他们创建的问题。

理想情况下,您希望看到高于85的分数。 虽然没有人确切知道,但广泛认为网页加载时间会对您在Google中的网页排名产生重大影响。 如果您的网站不在绿色区域的顶部,请不要绝望,因为许多主要网站都没有获得梦幻般的分数。

一些值得注意的例子包括:

  • http://bbc.com (70m/77d)
  • http://cnn.com (47m/65d)
  • http://whitehouse.gov (58m/56d)
  • http://microsoft.com (49m/71d)
  • http://apple.com (61m/72d)
  • http://linux.com (33m/44d)
  • http://ubuntu.com (69m/81d)
  • http://linuxmint.com (59m/67d)
  • http://youtube.com (53m/69d)
  • http://facebook.com (49m/81d)

这些例子中没有一个真的是让你自己的网站表现不佳的借口,但它们确实证明了一个低迷的网站并不一定是失败的同义词。

正确使用图像

如果有人知道要使用的图像格式正确,何时应该是设计师,对吧? 但令人惊讶的是,似乎有很多你不知道,或者当你这么做时,你认为这无关紧要。 那么这就是新闻:它一直很重要。

由于采用了某种模板样式作为商业网站的事实标准,这个问题一直在积聚,而且这种趋势没有显示出放缓的迹象。 作为一名专业设计师,您应该为自己和客户承担不要陷入懒惰设计捷径的陷阱。

其中一个不幸的快捷方式是在页面顶部(或其他任何地方使用英雄单位)使用大型PNG图像,但这是您通常会找到它们的地方。 现在,不用说,即使你需要图像中的透明部分,你也不应该这样做。

以下是创建该杰作时应牢记的基本原则:

  • 如果有的话,请谨慎使用大图像

大图像是一个可怕的想法,因为图像越大,加载所需的时间越长。 现在有一些不同的技术可以用来使大图像更有效地工作,但在我们进入之前,让我们说你应该在大多数时候使用较小的图像,并在它们出现时保存大图像。真的需要。

  • 适当设置PPI / DPI值

根据您使用的图形编辑器,它可能显示DPI或PPI的值。 后者更好,因为它表明您的图形编辑器是专为Web使用而不是打印。 某些版本的PhotoShop中更改DPI的问题是它们不仅会调整DPI,还会调整图像的物理尺寸。 这在最新版本的PhotoShop(使用PPI)中不是问题,因此如果您使用的是旧版本,则需要升级。 或者使用GIMP代替。

  • 切片大图像

这就是魔术开始的地方。 你会发现很多人告诉你切片你的图像不会改善加载时间,因为你仍然在下载相同数量的字节,任何感知的改进只是心理上的。 那些人正在使用最懒惰的图像切片版本,所以他们不知道真正的可能性。

切片后,您有机会对其进行优化。 假设原始图像是PNG格式,您现在可以将任何非透明部分转换为JPG格式,并节省大量字节,将需要透明度的部分保留为PNG图像。

接下来,您可以使用每个切片的压缩级别,直到该切片得到完美优化。 与原始未优化图像相比,此优化的总体效果可以节省大于50%。

视频也可以进行优化

视频压缩的艺术依赖于两件事:目标格式和用于编码的编解码器。 您选择的格式完全取决于您的需求。 通常,如果您需要高质量,带有H.4编码的MP264将在高压缩时提供最佳质量,但是当您不需要高质量时,WebM和FLV提供较小的文件大小。 您的视频编辑软件可能仍然提供FLV作为选项,但不建议使用此格式。

如果您需要DVD质量,带有H.4编码的MP264将获得出色的结果,但代价是需要大量下载。 对于流式视频,WebM提供了更好的压缩。 问题是并非所有的移动操作系统都支持WebM(他们应该,但他们似乎有一些疯狂的理由不遵循移动开发人员的黄金法则:你会给你带来不便和困扰你的客户)。

您是否应该使用MPEG-4编解码器代替H.264和MP4视频? 通常不会,因为它会在相同的质量水平下产生更大的文件大小。 但是如果您的视频具有较小的物理尺寸,并且您希望完美传输视频以进行流式传输,则MPEG-4是一个很好的编解码器,因为它具有内置的纠错功能以确保数据的完整性。

那么WMV呢? 那么这是一个特例。 它提供与MP4几乎相同的视频质量,但压缩效果更好。 这里的缺点是Mac和iOS用户只能在使用付费软件视频转换器时查看您的视频,这会引起播放延迟,这正是我们在优化页面时要避免的。

WMV文件对Android,Windows或Linux用户没有任何问题。 但是,如果12.5%的互联网社区使用Apple设备,您将不得不决定是否值得给他们带来不便。 就个人而言,我不建议您这样做只是为了加快加载时间。

最后,因为它是互联网视频,如果您不允许全屏或影院模式播放,请将视频的物理尺寸缩小到您在页面上显示的尺寸,并查看可节省的字节数。

波格丹兰萨

Bogdan是Inspired Mag的创始成员,在此期间积累了近6年的经验。 在业余时间,他喜欢学习古典音乐和探索视觉艺术。 他也非常着迷于修复工具。 他已拥有5。