性能优化周——你需要知道的一切

已发表: 2021-08-10

本周,我们的社区有一个难得的机会与我们尊敬的 21 位性能专家联系,询问他们最紧迫的 Web 优化问题,了解关键的优化挑战,并发现实现最佳结果的最佳实践。 下面,我们深入探讨了三个最常见的 Web 性能问题以及如何根据我们领先的性能专家的意见来解决这些问题。 因此,事不宜迟,让我们开始优化吧!

“网站填充”

构建网站时最重要的经验法则之一是通过删除不提供任何价值的小部件或插件来避免“网站填充”。 这不仅可以增强用户体验,还可以减少项目,从而提高速度。 Elementor 专家 Tim Liversage 建议先了解每个元素的工作原理并测试所有内容,然后再使用一组特定的功能。

根据 Brian Erickson 的说法,还有一些提高网站性能的关键指标包括:

  • 选择一个轻量级的主题
  • 每个 WordPress 安装最多安装 10-15 个插件
  • 尝试找到一个多用途小部件,它提供各种类型的功能(即图像框小部件、CTA 小部件),而不是添加许多只有一个关键功能的小部件
  • 对小部件的布局使用内联定位而不是多列(其中添加的每一列都需要更多代码,从而降低网站性能)
  • 尽可能使用最好的缓存工具——我建议根据站点使用 WP Rocket 或 WP-Optimize。 请注意,虽然某些网站使用 Rocket 表现更好; 其他人通过优化做得更好
  • 在上传图像之前调整大小和压缩图像,并使用 SVG 文件作为图标和插图
朱利安宋

朱利安宋

转到个人资料
谢·托德

谢·托德

转到个人资料
布赖恩埃里克森

布赖恩埃里克森

转到个人资料
蒂姆·利弗萨奇

蒂姆·利弗萨奇

转到个人资料

移动图像优化

当您在桌面上加载 1920px/2560px 宽的图像时,默认情况下相同尺寸的图像也会加载到移动设备上。 在移动设备上加载桌面大小的图像(而不是移动设备大小的图像)会严重影响您网站的性能和您的 Core Web Vitals 指标。 为防止这种情况,Elementor 专家 Shay Toder 建议如下:“我们需要复制所有大图像并将它们调整为 480 像素宽度以使其适合移动设备——我们可以使用 resizeimage.net 或任何在线工具调整照片大小图形软件,如 Photoshop。

在桌面模式下为部分或列添加背景图像时,请确保单击“响应模式”图标并将背景图像更改为新的移动尺寸图像以适合移动视图。 此过程会生成适用于桌面的全宽图像和适用于移动设备的 480 像素宽度图像,这也将改善您的 Core Web Vitals 指标。”

托管不足

虚拟主机会对您网站的性能产生巨大影响 - 简而言之,它可以成就或破坏您的网站。 这是因为托管公司会影响网站的加载速度及其 Google Core Vitals 得分。 不幸的是,许多网站所有者的一个常见盲点是低估了选择可靠、强大的托管公司和避免廉价托管的重要性。

Elementor 专家 Julian Song 分享了他的建议:“我最好的建议是永远不要选择廉价的托管解决方案——多花几美元购买高质量的托管服务。 接下来,我建议我的客户迁移到本地托管服务提供商(即您的目标受众所在的位置)。 但是,如果您的受众分散在世界各地,我强烈建议使用 CDN 服务将延迟降低到 150 毫秒以下,并进一步加快网站速度。”

您是否遇到过不同的性能优化问题或疑问并想咨询专家? 单击此处提交您的问题,我们的 21 位经过审查的专家中的一位将在问答环节中回答您的问题,该环节将在8 月 10 日和 8 月 12 日期间举行。

您是否在寻找问题的快速答案? 我们建议您绕过我们的专家网络。 Elementor 专家网络是一个综合平台,Elementor 用户可以在其中搜索和聘请专业的 Elementor 专家,Elementor 审查这些专家以确保他们符合我们的标准并且确实是他们所做的最好的。

立即获取托管的 WP 网站
学到更多
获得托管
可湿性粉剂网站
即刻
学到更多
加入我们的全球网络创作者社区
现在加入
在我们的中心感受社区精神
现在加入
与其他网络创作者联系
查找聚会