在笔记本电脑屏幕上做笔记的人(图片为如何优化HubSpot网站的SEO和性能)

如何优化您的HubSpot网站的SEO和性能

发布的 西蒙•柯林斯西蒙·柯林斯的照片2021年6月10日

就像刘易斯·汉密尔顿为摩纳哥大奖赛调试他的F1赛车一样,你也会想要优化你的HubSpot网站。

为什么?因为谷歌喜欢快速、精简的网站。这是决定谷歌将如何发展的关键因素之一你的网站排名

一个快速的网站还能提供访问者喜欢的流畅体验。这一点被一个事实所强调百分之四十如果网站加载时间超过3秒,用户就会放弃网站!

考虑到这一点,我们将深入探讨优化HubSpot网站的最佳方法。为此,我们将处理谷歌所依据的六个指标PageSpeed见解评估你的反对。

PageSpeed吗?那是什么?

下面是几个屏幕截图,向您展示谷歌PageSpeed Insights仪表盘的外观。

清晰营销网站在PageSpeed Insights上的表现截图(博客如何优化你的HubSpot网站的SEO和性能)

清晰营销的网站移动性能在PageSpeed Insights的截图(博客如何优化你的HubSpot网站的SEO和性能)

哎呀!我们不小心泄露了我们的高分,不是吗!这是令人讨厌的。

(别担心——这是我们今天最后的无耻吹牛了。)

第一个截图显示的是我们的桌面得分,第二个截图显示的是我们的手机得分。手机游戏更难获得高分,但也越来越重要谷歌承认世界正变得移动优先。

现在,让我们来探索这6个参数,以及如何分别提高每一个参数的分数。

1.第一个意旨油漆

第一次内容绘制(FCP)是在浏览器中加载第一块内容所花费的时间。

为了优化你的FCP,你需要尽一切可能确保第一个片段快速加载。通常,这意味着选择一个小文件大小的图像。事实上,使用压缩的小图像来提高网站性能的重要性是再怎么强调也不为过的。

除了压缩图像,您还需要启用站点缓存和实现延迟加载,以进一步提高FCP。延迟加载是什么?它指的是你只在实际需要的时候加载对象。

“我不认为需要是发明之母。在我看来,发明直接来自于懒惰,也可能来自于懒惰——为自己省事。”

- - - - - -阿加莎·克里斯蒂

2.速度指数

速度索引(SI)是指页面加载速度。它指示页面内容变得可见的速度有多快。

以下是如何提高SI:

  • 确保脚本是性能的.总是优化脚本以保持精简,并删除所有不必要的脚本。
  • 减少HTTP请求。为什么?因为向服务器请求会减慢速度。这是来自HubSpot的导游解释更多。
  • 首先显示后退字体。使用'font-display:swap',这样系统字体就会在初始时返回渲染,然后在加载后被替换为自定义字体。

3.最大的意旨油漆

最大内容油漆(LCP)度量页面上最大内容元素变得可见的速度。

对于大多数网站来说,首先加载的都是图片。在这个例子中,你想要一个小文件大小的漂亮图像(。SVGS通常是理想的)。是的,我们是一个坏记录压缩图片但这是我们看到的客户犯的最大错误之一。

此外,您还需要使用与加载回退字体相同的技巧。所以,首先导入低分辨率的图像,然后快速导入高分辨率的图像。这种增量变化对用户来说几乎不明显,但会加快LCP的速度。

4.互动的时间

互动时间(TTI)是指网站变得可用所需要的时间。例如,人们何时可以开始点击导航链接。比如上面的↗️

加速TTI通常意味着优化事物,使交互元素比其他元素加载得更快。例如,最好在文本块之前添加导航链接。

惰性加载在这里也很重要。这意味着你不需要一次加载所有内容——只需要加载访问者看到的内容和可以与之交互的内容。“折叠”指的是浏览器的底部边框。“Above the fold”指的是当页面最初加载时,在边界上方可见的网页内容。

5.总阻塞时间

总阻断时间(TBT)测量FCP和TTI之间的时间。

以下是如何提高性能和减少TBT:

  • 确保脚本位于正确的位置。这意味着减少依赖脚本的内容的数量。
  • 首先加载图像,然后是动画。比起像图像这样的基础内容,像动画这样的附加功能应该放在次要位置。
  • 专注于可用的东西。这意味着加载有函数的东西。导航栏和指向其他页面的链接就是最好的例子。

6.累积布局转变

累积布局变化(CLS)衡量的是你的内容对访问者来说有多不稳定。当然,你想要稳定的内容,不会在页面上移动。

你如何保持事情的稳定和改进CLS?我们以为你永远不会问。

以下是如何做到:

  • 在页面上为对象提供预定义的大小。这意味着始终为所有图像和视频元素提供显式的宽度和高度属性。
  • 加载占位符以建立结构。例如,当你有一个第三方广告或小部件,动态加载比其他内容晚(比如WordPress营销插件或HubSpot呼叫行动),选择占位符内容来占据空间。
  • 使用相同大小的占位符。当您使用占位符策略时,如备用字体,请选择大小相似的占位符。例如,对于备用字体,如果您的活动字体非常宽,则选择一个也非常宽的备用字体。然后,当活动字体加载时,它不会在页面上移动。

准备好给HubSpot网站充电了吗?

这不是什么秘密更快的网站为用户提供更好的体验,并帮助您在谷歌排名更高。

幸运的是,它不需要一个硅谷超级书呆子的高级编码技能就能实现。您所需要做的就是遵循本文中的建议和谷歌PageSpeed Insights中的建议。

如果你想了解更多关于创建优秀网站的知识,为什么不看看我们下面的增长驱动设计指南呢?

(同样,帽子向我们的常驻网站向导,凯尔,实现我们的高谷歌PageSpeed Insights得分,谁的智慧这篇文章是基于。)

新的文字-动作