将一个着陆页的加载时间从2秒降低到34毫秒
不，我没写错。让你的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#现在看起来像这样ingdom的加载时间立即像石头一样下降:（图丢失）第二步：恢复到单一图像并优化看看我的登陆页面的代码，很明显我是直接从Photoshop中导出它，使用Slice工具将其切割成一堆图像。让人想起了1999年的时候，过时的网页设计技术:这并不好，原因有很多。首先，我们将为每个图像打开与服务器的单独连接。这给我们的服务器带来了压力，也意味着浏览器必须排队下载(因为大多数现代浏览器最多打开6个连接到一个服务器)，这对某些浏览器来说可能会减慢速度。Photoshop使用HTML表格放置它导出的图像。表格代码还会使页面的HTML膨胀，并且会使用户浏览器的呈现更加复杂。你可能不认为这是一个问题，但是作为一个在2000年就开始编写网页设计的人员，我告诉你，仅仅因为它的代码中嵌套的表格就会导致许多浏览器崩溃，我可以向你保证它确实有影响!所以，为了让我们的着陆器速度更快，是时候采取先进技术了。我回到最初的Photoshop文档，将Call to Action图层作为一个单独的图像，然后删除所有的切片，将整个图像导出为一个单独的图像。然后，我把按钮放回原来的位置，使用以下的CSS:Firefox Firebug / Web Developer Toolkit非常适合这种快速更改。使用标尺工具大致定位按钮的位置，然后右键单击按钮，选择Inspect Element，并微调那里的位置，然后将调整后的CSS规则复制回您的登录页面。（现在的 F12，开发人员工具都可以做到这一点）https://getfirebug.com/快速的Pingdom检查显示，加载速度稍微提高到了1.2秒，但是在页面加载之前，我加载的独立元素的数量从20多个下降到了3个。另外，我的HTML现在简单多了。按实际价值计算，这几乎肯定是一种速度增长。但还是太慢了。所以我做了一件我(和大多数人)忘记做的最简单的事情：优化图像大小。进入Photoshop的“Save For Web”对话框，我测试了GIF、PNG和JPG，寻找可能非会员试读19%,加入社区后可阅读全文 楼下的接上 确实不错，顶先 广告位，，坐下看看 LZ帖子不给力，勉强给回复下吧 前排支持下 啊啊啊啊啊啊啊啊啊啊啊 专业抢沙发的！哈哈 向楼主学习 占位编辑