标签: pagespeed
加载Google字体<link />,@ import或javascript的最佳方式
我想知道从Google字体加载字体的最佳方法是什么.我用Google搜索并创建了<link/> 比...更好的方式@import.有没有工具可以通过网络和浏览器测量速度和性能？怎么样的JavaScript方法？
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
要么
@import url(http://fonts.googleapis.com/css?family=Oswald:300);
要么
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Oswald:300:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
推荐指数
解决办法
查看次数
有100个文件准备好了还是比1个文件准备好了？
只是想知道document.ready调用量是否会影响页面加载速度.Gulp/Grunt有没有办法通过删除单独的文档就绪函数来丑化/缩小JS？
推荐指数
解决办法
查看次数
高效低效的CSS选择器(根据谷歌,PageSpeed ......)
在尝试减少网页的HTML大小时,我遇到了谷歌和PageSpeed Firefox Add-On的建议,这些建议使CSS选择器的效率降低(几乎)让我重新考虑这些变化:
http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors
具体来说,后代选择器非常适合使用ID或CLASS属性选择整个块(例如DIV),然后保持其所有子元素不具有CLASS/ID属性.但是,如果应用规则的遍历顺序如Google所述,则不应使用它们:
后代选择器是低效的,因为对于与键匹配的每个元素,浏览器还必须遍历DOM树,评估每个祖先元素,直到找到匹配或到达根元素.密钥越不具体,需要评估的节点数就越多.
我非常怀疑浏览器使用这种低效的遍历顺序,当然它们只会处理与顶部选择器组件匹配的元素子树,即#foo span {...} 只应检查#foo下面的元素而不是每一个跨度.任何看过最近的浏览器代码的人都可以确认/否认这个吗？
第二个值得怀疑的建议是关于过度合格的选择者:
根据定义,ID选择器是唯一的.包含标记或类限定符只会添加需要不必要地评估的冗余信息.
如果ID选择器的定义是唯一的,为什么浏览器需要检查冗余信息？我知道他们这样做是因为,例如,
div#foo {color:black; } #foo {color:white; }
将导致a中的黑色文本<div id=foo>,但a)它不应该完成(需要W3C引用)和b)我不明白为什么它会导致对元素的简单O(1)检查明显变慢标签名称.
任何与现代浏览器源代码保持良好关系的人都可以对这些说法有所了解吗？由于大多数现代网站使用后代选择器(包括SO)并且它们具有明显的优势,我非常希望使用它们......
编辑:
我已经对生成的页面进行了一些实验,看起来浏览器对后代选择器的处理确实很可怜:
由(缩写)组成的页面:
#top a {text-decoration:none;}
#foo1 a.foo {color:red;}
#foo2 a.foo {color:red;}
[...重复10000次]
<body id = top>
<div> ... [嵌套50次] <a href=foo> bla </a> </ div> [...]
[前一行重复10000次]
(基本上是10000行,每行有50个嵌套的div,直到根节点和1个与10000匹配的选择器)
window.onload()使用Safari 5在2.2秒内加载和渲染(执行时间),使用Firefox 3.6.10只需不到10秒.
当.foo从非应用规则中删除类选择器时,使用Safari 5时页面大约需要200秒,使用Firefox 3.6.10需要96秒.这说明了后代选择器的实现有多糟糕(在这种情况下,10000规则中的每一个都可能导致遍历直到#top,其中规则失败).
儿童选择器的票价如何？#foo > span > div > div > div > div > div a {color: red;}(也永远不会匹配,但强制遍历6个父节点)Safari 5需要27秒,Firefox 3.6.10需要31秒.
结论
后代和儿童选择器目前都在主流浏览器上吮吸.如果您关心速度,至少对于非常常见的HTML标记(例如,img,div等),最好将丑陋的class/id属性添加到所有样式标记中.
推荐指数
解决办法
查看次数
由于Adsense而尝试创建无Cookie域的问题
根据谷歌的pagespeed插件的建议,我将我的静态内容(图像,CSS,javascript文件)移动到我的网站的子域,其中应该没有cookie,从而为这些文件的每个请求在请求标头中节省了一些空间.但是,在查看结果时,我发现仍在为此子域创建cookie.我在我的网站上有谷歌adsense,它正在将cookie写入根域*.example.com,而不仅仅是www.example.com
有没有办法强制adsense只将cookie写入用于显示添加而不是根域的确切域？
推荐指数
解决办法
查看次数
Google Analytics:网站速度平均值始终为0.00
我有以下代码(显然XX有一个实数):
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-XX']);
_gaq.push(['_setSiteSpeedSampleRate', 10]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
我平均每天点击1000次.然而,我看到所有页面的平均加载时间速度为0秒.我在2周前整合了这个.
推荐指数
解决办法
查看次数
LightHouse 和 Performance 之间的 LCP 时间 - Google Chrome
使用 google chrome chrome dev，我正在为移动设备运行灯塔分析。
Lighthouse 显示最大内容绘制 (LCP) 的延迟为 7.0 秒：
我决定深入研究并单击：“查看原始跟踪”。
它将我重定向到性能选项卡：
这里说 LCP 是 749.7 毫秒（= 0.7497 秒）。
LightHouse 和 Performance 选项卡之间的这种差异来自哪里？
- 0.7497 秒的性能
- LightHouse 7.0 秒
performance pagespeed lighthouse google-chrome-devtools pagespeed-insights
推荐指数
解决办法
查看次数
字体很棒的 CDN JS 在 Pagespeed Insights 上显示为渲染阻塞
我没有直接链接到 Font Awesome CSS，而是使用Font Awesome CDN 中的 js来允许异步加载主页上的图标，但 Google 的 Pagespeed Insights 仍将其标记为阻止渲染的 js。
我正在使用 Font Awesome CDN 提供的自定义 js 链接并将其放在该<head>部分中（我可以将它放在<body>Font Awesome CDN的末尾，但这就是 Font Awesome CDN 要求我放置的地方）。
<script src="https://use.fontawesome.com/mycustomcode.js"></script>
是的，我通过在 Font-Awesome-CDN 上登录我的帐户打开了异步加载。
推荐指数
解决办法
查看次数
使用 NextJS 减少 JS 执行时间
我有一个网站，我正在尝试优化灯塔页面速度排名。我刚刚从使用 nginx 缓存的 SSR 切换到next export使用exportPathMap和getInitialProps（也使用 nginx 缓存）。
感兴趣的特定页面获得大量流量
切换到静态后，第一个内容图像出现在“慢 3G”的 2-2.5 秒内加载。但是 JS 执行时间需要 3-6 秒。
问题：
当我使用静态导出时，为什么脚本评估需要 3-6 秒，我的印象是它会很快？
有没有优化nextjs JS执行时间的方法？或者也许是 webpack 设置？
推荐指数
解决办法
查看次数
对于具有不同纵横比的响应式图像，最小化累积布局偏移的好方法是什么？
如果您有一个<picture>元素在不同断点处具有不同纵横比的图像源，那么通过在 CSS 中使用纵横比和媒体查询来最小化 CLS 的最佳方法是什么？
performance pagespeed lighthouse web-performance pagespeed-insights
推荐指数
解决办法
查看次数
页面加载后在React中加载第三方iframe，这样iframe就不会影响PageSpeed分数
我有一个iframe加载第三方小部件的。我只想iframe在页面加载后显示此内容，因为我不想减慢页面加载速度。我遵循了一篇中等文章，其中描述了如何执行此操作，但他们的解决方案不起作用，因为函数onload,finishLoading从未被调用
export default ({src, width, height}) => {
const [loading, stillLoading] = useState(true)
const finishLoading = () => {
alert('finished loading')
stillLoading(false)
}
...
return(
{loading ? '' :
<iframe
src={src}
width={width}
height={height}
scrolling="no"
onLoad={finishLoading}
>
className={`tpwidget flex-center-row`}>
</iframe>
}
)
}
更新
通过使用 useEffect，我可以让 iframe 在其他所有事情之后加载（理论上），但我发现删除 iframe 完全提高了我的 PageSpeed 分数，并且仅在（使用 useEffect）之后加载 iframe 并没有太大的积极效果关于页面速度。
如果有帮助，域名是suddensask.com，第三方小部件是亚马逊广告。
推荐指数
解决办法
查看次数
标签 统计
pagespeed ×10
javascript ×3
lighthouse ×3
css ×2
performance ×2
reactjs ×2
adsense ×1
cookieless ×1
cookies ×1
css3 ×1
font-awesome ×1
gatsby ×1
iframe ×1
jquery ×1
next.js ×1
seo ×1
subdomain ×1
webpack ×1