logo标签列表

如何使网站的第一部分先加载？（就像在谷歌PageSpeed中一样）

phphtmlperformanceoptimizationpagespeed
18

我拥有一个非常大的网站，加载时间相当长，需要大约120秒。我想做的是先加载网站的前半部分，然后用户可以在其他部分被加载时浏览。

我尝试做的如下所示。

enter image description here

  • 首先，这可能吗？

根据我的知识，是的，因为Google PageSpeed就是这么做的。但问题是如果我使用PageSpeed，我必须更改DNS服务器设置等。我想自己做。

  • 我该如何完成它？
  • 应该使用什么类型的技术？

鉴于页面具有.php扩展名，且使用PHP语言编写。

这些图片中有任何是动态生成的吗？你有多少张图片？ - halfer
如果你研究Pagespeed的话，它可以让你通过改变DNS到他们的服务器来实现上述情况。但是我想自己实现它。只需加载上面所示的第一部分以及其余部分。目前已经进行了CSS和JS的优化，并使用缩小版本。 - Techie
3
120秒加载一个页面？太疯狂了。这是因为页面的“渲染”延迟，还是服务器生成页面的延迟？即，您是否有一个执行大量数据库操作的PHP脚本？ - Laurence
没有特定的内容。只是一个很长的页面。 - Techie
Dasun，考虑到您想使用PHP进行操作，我认为您需要使用Bigpipe请参见我的回答。 - Adam Gent
你为什么要有这么大的页面呢？如果一个页面需要超过10秒才能加载完成，那么你的设计本身就存在缺陷。 - Overv
14个回答
19
您可以使用“懒加载”（lazy loading）这一概念。您可以在加载过程中仅加载必要的内容，然后使用jQuery和ajax加载其余内容。通过这种方式，用户可以轻松地浏览和与已加载部分交互，而其他部分将异步加载。jQuery的ajax或post方法可以帮助您实现这一点。一个简单的例子是，如果您的页面有5个内容部分，其中2个需要立即加载，那么页面将加载2个部分，这比加载5个部分花费的时间少得多。文档加载完成后，您将使用ajax加载其余3个部分。Ajax将向您网站的特定页面发送请求（可能命名为AjaxRequestHandler.php），并处理您的请求生成html，然后将其返回到主页面，主页面只需显示返回的html。所有这些都是异步发生的，因此用户将能够与最初加载的2个部分进行通信。
即使您是 Web 技术的新手，我想您至少需要了解 AJAX 和异步调用等知识才能实现懒加载。
编辑：
对于您的这个问题
除了 AJAX 之外还有其他方法吗？
我认为如果可以的话，您可以尝试使用 iframe。
在页面加载时将主内容加载到页面中，而在加载其他内容时使用 iframes。
这个 jsFiddle 可以帮助你。

jsfiddle.net/cGDuV/

可以帮助您理解在stackoverflow的帖子中提到的iframe懒加载。
如果您想避免使用jquery，可以使用javascript实现相同的功能。
1
也可以查看LazyLoad jQuery插件 http://www.appelsiini.net/projects/lazyload - Anthony Hatzopoulos
9
您可以操纵输出缓冲区，使其提前刷新，从而实现您在问题截图中所需的效果。这篇文章详细介绍了如何实现： http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-flush/ 您可以使用jquery插件轻松地进行图片延迟加载： http://www.appelsiini.net/projects/lazyload 将所有js文件和css文件合并为一个文件，可以提高网站速度。
您可以使用缓存、过期头和gzip/deflate压缩来优化网站速度。这个链接提供了一个示例配置： https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess 建议您以非阻塞异步方式加载第三方javascript小部件（如Google+按钮、Facebook喜欢按钮、社交、Twitter等），以避免网页加载速度变慢。这篇文章详细介绍了如何实现： http://css-tricks.com/thinking-async/ 尽可能优化您的图片。这个链接提供了一个在线工具： http://kraken.io/ 使用CDN可以提高网站速度： http://www.maxcdn.com/ 最后，测试您的网站并查看哪些方面需要进行优化以提高速度。这个链接提供了一个瀑布图特性： http://www.webpagetest.org/
这是一个关于如何将CSS和JS文件合并成一个文件的链接：http://aciddrop.com/2008/01/03/automatically-join-your-javascript-and-css-into-a-single-file/，这可以减少HTTP请求的数量，从而提高网站性能。 - Lucky
1
@Lucky 那个脚本的日期是2008年1月，很可能不再维护。它还使用preg_匹配来解析脚本标记并重建页面，这会增加你的TTFB开销。我不建议使用那个。现在有许多更好、更现代的文件合并和压缩方式。例如，你可以使用一个任务运行器，比如grunt或者gulp。 - Anthony Hatzopoulos
3
您需要确定网站为什么加载缓慢。您发送的数据大小是多少？Google和Firefox都有Web开发工具，可以帮助您确定哪些元素加载时间最长。一旦确定了罪魁祸首，尝试异步加载最糟糕的元素。
请查看这篇关于异步请求的文章：https://segment.io/blog/how-to-make-async-requests-in-php/
3
在我看来，您需要一个无限滚动的解决方案。也就是说，每个“页面”有固定数量的内容（可以估计为1500像素高度）。使用jQuery在用户向下滚动一定量时加载另一个“页面”。如果您真的想无条件地加载所有内容，请使用相同的方法，在文档准备好后触发下一个页面的加载。循环页面加载器直到整个内容都加载完成。这样，您就可以加载第一个“页面”，并将“视线以下”的内容推迟到随后的请求中。
3
你可以先正常加载页面的所有必要（上半部分）内容，然后使用JavaScript / AJAX加载页面的下半部分。这是一种非常常见的技术（通常用于加载图片）。
以下是来自jQuery for Designers的优秀教程，介绍如何使用jQuery在页面加载后异步加载图像：http://jqueryfordesigners.com/image-loading/ 话虽如此，两分钟的加载时间似乎过长。也许你应该检查是否有任何可能会减缓服务器速度的问题。
2
2
“预取资源”对于需要加载大文件的网页，改变从服务器请求文件的顺序通常会有好处。有时，下载文件在其被请求之前就有意义，这样一旦被请求便可以立即使用。当页面所需资源可以提前加载时，该页面的用户感知网络延迟可显著降低甚至消除。当您运行Google PageSpeed Insights并查看结果时，您将了解如何修复您的网站中的问题。
加快网页加载速度的一些提示：
- 减少HTTP请求 - 添加远期过期头 - 压缩页面组件 - 压缩JavaScript、CSS和HTML
另外，在加载网页时，如果您正在使用带有Smarty的PHP，则可以使用 plugin，该插件通过将所有js和css资源请求合并为一个单独的HTTP请求来减少向您的服务器发送的HTTP请求数量，从而使网站加载更快。
此外，您可能正在寻找这些插件。

http://masonry.desandro.com/

http://isotope.metafizzy.co/

http://www.wookmark.com/jquery-plugin

1
考虑到上述内容，您可以考虑使用memcache或其他方式来缓存数据/HTML代码的部分内容，以便每次跳过其生成。当然，这在数据更改的频率上有很大的影响。
1
不是浏览器按照文档顺序渲染吗？无论你将什么内容放在文件顶部，客户端都会首先接收到它，并因此首先显示它。例如，当您尝试在线查看非常大的图像文件时，它会从上到下加载。网页也是如此。只需将您希望首先加载的内容放在页面顶部即可！ 问题一的答案：是的 问题二的答案：在上面 问题三的答案：没有什么，只需按正确的顺序排列页面即可。
不，它们并不总是这样...不是全部都是，也不是一直如此；这取决于接收到的HTML以及用户设置。 - itsid
1
这个想法与Pawan Nogariya上面所描述的大致相同。您需要异步获取视图和数据，然后显示它们。但这意味着您永远不会重定向或回传到任何其他页面，而是通过ajaz获取每个视图。这将使您的应用程序成为SPA（单页应用程序），就像Gmail一样。这也意味着您需要跟踪已经渲染和未渲染的内容，让您陷入困境。因此，与其按照自己的方式做一切，不如使用已经开发和流行的框架来完成，这些框架可以让您实现SPA。这意味着您的应用程序不会像重定向那样“post”到服务器，而是使用Ajax完成所有操作。
您可以使用Backbone（Backbone.js）、Knockout（Knockout.js）等框架来实现这一点。这些基于JavaScript的框架有助于实现您刚才提出的需求，并且示例和教程也很容易获得。您可以将其与任何语言一起使用，我们正在使用它与C#（MVC）一起用于一个相对较大的应用程序。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接