将一个着陆页的加载时间从2秒降低到34毫秒

xingqing

不，我没写错。让你的LPs在不到100毫秒的时间内呈现在用户面前是完全有可能的——研究表明，这可以让你的点击率飙升(Stack That Money自己的测试结果可以证明这一点!)

我在本教程中使用的是我以前的登陆页面，从我开始使用POF时就开始了。它实际上是基于 Stackman 不久前透露的一个着陆器——但我向你保证，着陆器最初设计中的所有错误都是我自己造成的。

第一稿

下面是第一稿着陆页的样子，让后再美国通过 Pindom 的测试结果：

（图丢失，源文件在课程附件：9674.rar）

1.70秒，不算太糟，对吧?事实上，这很糟糕。我从研究中知道，我可能会以这样的速度降低转化率，只需要一个缓慢的连接，它就会超过神奇的2秒标记，用户就会开始成群地点击离开。

不明白？

在本教程中，我假设您对HTML和CSS样式表有基本的了解。然而，我希望它对每个人都有用!

太长了？不想读？

这是一个相当大的案例研究。如果你只想要重点而不需要细节，下面是一个快速总结:

• 把你所有的样式放在主登录页，而不是单独的文件。

• 小心那些网页设计程序添加的你不需要的CSS或Javascript——删掉它们。

• 如果可能的话，在#/body#标签之前加载Javascript。避免在#head#中使用Javascript，除非它非常重要。

• Photoshop图像切片产生非常低效的网页。最好是导出为单个图像，甚至最好只是导出你需要的图像，然后用CSS定位放置它们。

• 如果可能的话，LP上的文本应该是HTML，而不是图像。它看起来更好，同时加速你的页面。

• 最后，优化后的服务器可以将LP的加载时间缩短半秒，如果服务器位于你推广的国家，则可以节省更多时间。

源文件在课程附件：9674.rar

第一步：移除不必要的 Javascript 和 CSS

打开页面的HTML时，我立刻注意到一些事情：我在文档的#HEAD#部分加载了一些Javascript和样式表。

这对加载时间非常不利：页面会停止加载任何内容，直到它加载并执行了Javascript，有些浏览器对样式表也会这样做。此外，我甚至没有在这个登陆器中使用Javascript——要么是一些流氓的创作包自动插入了它，要么是我计划使用它，然后忘记了!

大多数网页速度指南会告诉你把样式表放在一个单独的文件中，但这对于一个简单的联盟营销活动实际上是一个坏主意。把样式表放在一个单独的文件中的原因是为了让浏览器缓存它——它会稍微减缓第一个页面的加载时间，但随后会加快在同一个站点上的加载速度。然而，我们并不期待我们的访客稍后再来访问我们的LP，所以这对我们来说只是一个放缓。

我将脚本清出，并将样式表复制到登录页面中——结果发现它只是一行代码!我的#head#现在看起来像这样:

Pingdom的加载时间立即像石头一样下降:

（图丢失）

第二步：恢复到单一图像并优化

看看我的登陆页面的代码，很明显我是直接从Photoshop中导出它，使用Slice工具将其切割成一堆图像。让人想起了1999年的时候，过时的网页设计技术:

这并不好，原因有很多。首先，我们将为每个图像打开与服务器的单独连接。这给我们的服务器带来了压力，也意味着浏览器必须排队下载(因为大多数现代浏览器最多打开6个连接到一个服务器)，这对某些浏览器来说可能会减慢速度。

Photoshop使用HTML表格放置它导出的图像。表格代码还会使页面的HTML膨胀，并且会使用户浏览器的呈现更加复杂。你可能不认为这是一个问题，但是作为一个在2000年就开始编写网页设计的人员，我告诉你，仅仅因为它的代码中嵌套的表格就会导致许多浏览器崩溃，我可以向你保证它确实有影响!

所以，为了让我们的着陆器速度更快，是时候采取先进技术了。我回到最初的Photoshop文档，将Call to Action图层作为一个单独的图像，然后删除所有的切片，将整个图像导出为一个单独的图像。然后，我把按钮放回原来的位置，使用以下的CSS:

Firefox Firebug / Web Developer Toolkit非常适合这种快速更改。使用标尺工具大致定位按

加入社区,可阅读全站10w+资源

您尚未登录，请登录后操作

 非会员试读19%,加入社区后可阅读全文