我正在努力提高我的 Google Page Speed 得分。目前移动设备为 51/100,桌面设备为 83/100。
其中一个问题是“消除首屏内容中阻止渲染的 JavaScript 和 CSS”。适用的两个项目是我的缩小 CSS 文件和外部 Google 字体文件。我能做些什么来解决这个问题吗?
更一般地说,关于如何提高我的 Google Page Speed Score 的任何反馈/建议。
我的网站:http://www.backpackerjobboard.com.au/
谢谢!
最佳答案
优化“渲染阻塞”元素更多的是关于感知加载时间,而不是最大化页面速度。
对于 CSS,这涉及为您的关键 css内联 CSS。这通常被称为“首屏”内容,尽管该术语不正确 - 关键 CSS 涉及基本样式、布局(即网格系统)等。
这是一个在线(和 GitHub 上)可用的关键 CSS 生成器: http://jonassebastianohlsson.com/criticalpathcssgenerator/
您这样做的原因是为了确保您的页面最重要的样式加载 HTML,并且添加到 HTML 的文件大小对于 gzip 网页应该可以忽略不计。
另一个渲染问题与谷歌字体有关,这很常见。 忽略 Google 对此的建议;它推荐的是将谷歌字体放在页脚中。
更好的方法是使用类似 Font Squirrel Webfont Generator 的工具自行生成网络字体。将 HTTPS 请求保存到 Google(这会导致加载 Assets 时出现交通堵塞。)
但是,Pagespeed 工具忽略了网页速度下降的主要原因:您有 68 个 HTTP 请求。其中大约三分之一是 JS 文件,它们应该聚合到一个 .js 文件或使用类似Lab.js 的库推迟 js* 呈现以减少对这些文件的 HTTP 请求。
*如果您使用像 Lab.js 这样的阻塞/加载库,您必须在 HTML 的脚本标记中内联关键的 Javascript 或排除关键的 js 文件被延迟。
至于移动评分,Google Pagespeed 工具将您的网站误读为移动设备不友好。在另一个内部页面上对此进行测试,您的手机分数约为 74。
这可能是由于它超时并认为整个页面都已呈现或类似原因 - 当使用此类工具时,总是会处理多个页面,因为它们可能会出错。
您的大多数移动问题都可以通过内联您的 css 和延迟您的 Javascript 来解决。
附言不要太执着于分数,大多数对你不利的事情都是对图像、CSS 等的微小调整(即少于 5%)。
关于performance - Page Speed - 消除渲染阻塞,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28868326/
我想要做的是有2个不同的Controller,client和test_client。客户端Controller已经构建,我想创建一个test_clientController,我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集,然后呈现客户端Controller的索引View,以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这
无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD
我目前对后台队列不太满意。我正在尝试让Resque工作。我已经安装了redis和Resquegem。Redis正在运行。一个worker正在运行(rakeresque:workQUEUE=simple)。使用Web界面,我可以看到工作人员正在运行并等待工作。当我运行“rakeget_updates”时,作业已排队但失败了。我已经用defself.perform和defperform试过了。发条.raketask:get_updates=>:environmentdoResque.enqueue(GetUpdates)end类文件(app/workers/get_updates.rb)c
我在一个简单的RailsAPI中有以下Controller代码:classApi::V1::AccountsControllerehead:not_foundendendend问题在于,生成的json具有以下格式:{id:2,name:'Simpleaccount',cash_flows:[{id:1,amount:34.3,description:'simpledescription'},{id:2,amount:1.12,description:'otherdescription'}]}我需要我生成的json是camelCase('cashFlows'而不是'cash_flows'
我想在我的Controller中使用以下corsheader呈现JSON:'Access-Control-Allow-Origin'='*'.我试过这个:defmy_actionrender(json:some_params)response.headers['Access-Control-Allow-Origin']='*'end但是我得到了一个AbstractController::DoubleRenderError。有没有办法使用header呈现JSON? 最佳答案 您不能在渲染后设置header,因为已发送响应。所以在没有意
我有一个Ruby数组,如何在Rails3.0中将其呈现为JSONView?我的Controller方法是defautocomplete@question=Question.allend 最佳答案 如果自动完成操作仅呈现JSON,您可以将re5et的解决方案简化为:defautocompletequestions=Question.allrender:json=>questionsend(请注意,我将“问题”复数化以反射(reflect)它是一个数组并删除了@符号-一个局部变量就足够了,因为您可能只使用它来呈现内联JSON)作为一种附
当我尝试使用“套接字”库中的方法“read_nonblock”时出现以下错误IO::EAGAINWaitReadable:Resourcetemporarilyunavailable-readwouldblock但是当我通过终端上的IRB尝试时它工作正常如何让它读取缓冲区? 最佳答案 IgetthefollowingerrorwhenItrytousethemethod"read_nonblock"fromthe"socket"library当缓冲区中的数据未准备好时,这是预期的行为。由于异常IO::EAGAINWaitReadab
我正在使用Rails5ApplicationController.renderer.render方法从模型中进行渲染。我需要将一些变量传递给我的布局,这是我使用locals选项完成的;如果直接访问此变量,则该变量在布局中可用,但不能通过self访问。这是我设置渲染的方式html_string=ApplicationController.renderer.render(file:"/#{template_path}/base/show",:formats=>[:pdf,:html],locals:{:@routing_form=>self,:controller_name=>contro
我的Rails应用程序在暂存服务器上运行速度非常慢,这让我遇到了一些麻烦。最令人困惑的是每个请求的日志输出的最后一行。看起来View和数据库时间甚至不接近整个渲染时间。在一页上,完成时间大约1000毫秒,View大约450毫秒,数据库大约20毫秒。渲染页面所需的其余时间从何而来? 最佳答案 当事情变得神秘时......分析器是你的friend!分析器将统计哪些方法被调用最多以及每个方法调用花费多长时间。ruby-prof当我在RubyLand时,它会帮我解决这个问题,它会生成一个漂亮的调用图(如果需要,可以是html格式),这使得查