我们如何将页面加载时间减少10秒

对于一个出色的网站,速度和社交似乎无法协同工作。 我们将网站迁移到 飞轮 (关联链接),它极大地改善了我们网站的性能和稳定性。 但是,我们的网站设计(脚注肥大,可以促进我们在Facebook,Twitter,Youtube和Podcast上的社交活动)使我们的网站步履蹒跚。

这是不好的。 在2秒钟或更短的时间内加载好网页的过程中,我们的网站花费了10秒钟以上的时间才能完成页面。 问题不是WordPress或Flywheel,而是我们从其他服务加载的所有交互元素……Facebook和Twitter小部件,Youtube预览图像,我们的Podcast应用程序,我根本无法控制加载速度。 到现在。

您现在会注意到,我们的页面将在2秒钟内加载完毕。 我们是怎么做的? 我们在页脚中添加了一个动态部分,该部分仅在用户一直滚动到该点时才加载。 在浏览器(而不是移动设备,应用程序或平板电脑)中,一直滚动到页面底部,您将看到一个正在加载的图像:

加载

利用jQuery,我们不会真正加载页面的底部,直到有人滚动到那里为止。 该代码实际上非常简单:

$(window).scroll(function(){if(jQuery(document).height()== jQuery(window).scrollTop()+ jQuery(window).height()){if($(“#placetoload” ).text()。length <200){$(“#supplementary”)。load('[要加载的页面的完整路径]');}}}));

一旦用户滚动到页面的底部,jQuery go就会提取指定路径的页面内容,并将其加载到您选择的div中。

尽管该网站不再从那里加载的内容中受益(因为搜索引擎没有在抓取它),但我们非常有信心页面的速度将比其他人更能帮助我们进行排名,共享和参与不耐烦地等待我们的页面加载非常慢。 最重要的是,该页面仍然具有我们希望与访问者互动的所有元素……而不会牺牲页面速度。

我们还有很多工作要做……但是我们到了那里!

你觉得呢?

本网站使用Akismet来减少垃圾邮件。 了解您的数据如何处理.