如何使网站的第一部分首先加载？(比如Google PageSpeed)

Question

我有一个非常大的网站,加载需要很长时间.大约需要120秒.我正在尝试做的是加载网站的前半部分加载第一.然后用户可以在加载其他部件时进行冲浪.

我正在尝试做的是下面.

• 首先是这可能吗？

根据我的知识是的,因为谷歌PageSpeed这样做.但问题是,如果我使用PageSpeed,我将不得不更改我的DNS服务器设置等.我想自己这样做.

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

鉴于页面具有.php扩展名并用PHP语言编写.

Answer 1

您可以使用延迟加载的概念.

您只能加载加载期间所需的内容,然后使用jquery和ajax加载剩余的内容.

通过这种方式,用户可以轻松地与已经加载的部件进行冲浪和交互,而另一部分将异步加载.

jQuery ajax或post方法可以帮助你.

一个简单的例子可能是,

如果页面中有5个部分内容,则需要立即加载2个内容

1. 该页面将加载2个部分,因此它将比5个部分加载花费的时间少得多

2. 加载文档后,您将使用ajax加载剩余的3个部分.Ajax将使用一些参数向您的网站的特定页面(可能名为AjaxRequestHandler.php)发送请求,此页面将处理您的请求并为此生成html并将其发送回您的主页,这将只显示此返回html,这一切都是异步发生的,因此用户将能够与最初加载的2个部分进行通信

即使您不熟悉Web技术,我认为您必须具备至少ajax和异步调用等知识才能实现延迟加载.

编辑:

对于你的这个问题

除了AJAX,有没有办法解决这个问题？

我想你可以尝试iframe,如果他们可以提供帮助.

在加载页面后加载iframe中的其他内容时,在没有iframe的页面加载中加载主要内容.

这个jsFiddle

jsfiddle.net/cGDuV/

能帮助你了解延迟加载与iframe中,在此提到的职位计算器的.

如果你想避免使用jquery,你可以使用javascript.

Answer 2

您可以操作输出缓冲区,使其提前刷新,从而实现您在问题中发布的屏幕截图中的后续内容. http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-flush/

您可以延迟加载所有图像.这是一个jquery插件,可以很容易地完成它 http://www.appelsiini.net/projects/lazyload

您可以将所有j组合在一个文件中.与您的css文件相同.这将有助于提高速度.

您可以合并缓存,过期标头和gzip/deflate压缩 https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess

我建议你以非阻塞的异步方式加载你的第三方javascript小部件垃圾(Google+按钮,像按钮,社交,推特的东西),所以它不会在开始时减慢页面速度. http://css-tricks.com/thinking-async/

尽可能优化您的图像. http://kraken.io/

使用CDN http://www.maxcdn.com/

最后测试您的网站,看看哪里是最大的瓶颈,以及在哪里可以改进网站以进行速度优化.使用瀑布图功能 http://www.webpagetest.org/