就用户体验而言，网站速度优化是最重要的方面之一。加载缓慢的网站会让任何用户感到沮丧，并且通常会导致高跳出率，这对企业来说从来都不是一件好事。 1
影响网站性能的因素有很多，从图像到服务器配置，从过多的插件到臃肿的主题，这个列表确实不胜枚举。
在 Elementor，我们非常重视性能，在这个由 5 部分组成的课程中，我们将教您如何：
使用最佳技术创建页面和帖子布局，确保我们不会过度使用根本不需要的部分、列和小部件，我们还将探索一些内置小部件功能以缩短加载时间。
然后，我们将教您如何优化图像，包括在将图像上传到您的网站之前以及之后使用图像优化插件。我们将介绍何时何地使用不同图像类型的最佳实践，并探讨未经优化的图像可能对您的网站产生的影响。
接下来，我们将看看您可以应用于网站的其他性能提升。这些将包括一些 Elementor 功能以及教您有关主题和插件的使用。
在第 4 课中，我们将着眼于选择合适的虚拟主机，并向您介绍可用的不同类型的主机以及您应该注意的基于性能的常见方面。
最后我们来看看页面缓存。缓存确实可以提高您网站的性能，我们将探索 WP Rocket 插件，它将使您能够将缓存应用于您的网站。
最后，我们将看看使用第三方工具的进一步优化。我们将探索缓存、缩小以及我们可以应用于我们网站的一些其他调整。
如果您正在寻找特定的内容，请随时跳转到这些视频中的任何一个，并且不要忘记保存它们以供将来参考。
因此，如果您准备好了，让我们开始吧。
在我们的第一课中，我将教您在 Elementor 编辑器中创建页面和帖子的最有效方法。
我们经常看到使用了太多的部分、列、内部部分和小部件，而使用更少的这些元素就可以实现相同的布局。
使用过多的这些元素会导致网站性能下降，因此让我们深入了解如何以最有效的方式使用 Elementor 构建网站。
为了更好地理解 Elementor 中的最佳布局，我们将探索这个模板，它是用一些常见的部分、列和小部件误用构建的。
到本课结束时，我们将使用更少的列和小部件完全重建整个页面。我们的初始页面货币有 9 个部分、31 个列、5 个内部部分和 44 个小部件。
我们的优化页面将包含 6 个部分、7 个列和 16 个小部件。
我们将使用免费的轻量级 Hello Elementor 主题，我们将重新创建模板的每个部分，同时利用最佳实践技术，这将提高网站的性能。
在我们开始优化我们的布局之前，我们将在我们的页面上运行一个测试，以充分了解当有人访问我们的网站时发生了什么。一旦完成所有优化并比较结果，我们将重新测试它。
让我们在使用“不良做法”创建的页面上运行测试并检查结果。
我们将在浏览器的私人窗口中执行测试，这也称为“隐身模式”。
打开一个新的隐身窗口并输入您正在测试的网页的链接。
确保您的链接显示您页面的直接路径。
如果您不确定您的页面链接是什么，您可以通过导航到您的 WP 仪表板轻松找到它。
单击“页面”以查看您网站的所有页面。
将光标悬停在页面上，然后单击“查看”选项。这将带您直接进入您的页面。
将此 URL 复制并粘贴到隐身窗口，网站加载后，您就可以测试它了！
现在，右键单击页面上的任意位置，然后单击选择“检查”。
您将看到几个选项卡，您可以在其中阅读 HTML 和 CSS、查找错误、获取 SEO 结果以及执行各种测试。
选择网络选项卡并点击 cmd 或 ctrl + R 按钮加载结果。
如您所见，我们当前的页面布局需要 2.88 秒才能加载并运行 81 个请求。
如果我们现在切换到 Lighthouse 选项卡，我们就可以在我们的页面上运行审计报告，这将使我们更深入地了解其当前性能。
选择“生成报告”，片刻之后您的报告就会出现。
我们目前收到的性能分数为 73/100，我们当然可以继续努力。理想情况下，我们希望这些数字都是绿色的。
现在让我们开始优化我们的页面，以便改进我们的统计数据。
回到 Elementor Editor，让我们从标题开始。
正如您在此设计中看到的那样，标题由 3 列组成……。
在第一列中，我们有一个图像小部件，它显示我们徽标的 .png 图像文件，以及一个标题小部件。
第二列有我们的导航菜单小部件。
第三列有一个内部列，用于控制图标的位置和我们联系信息的标题。
让我们看看如何在这里最大限度地减少小部件和部分的使用……
创建 1 个部分和 1 列……
在小部件菜单上……
找到.. 并将站点徽标小部件拖到我们的新部分中。
如您所见，我们更新了徽标以包含符号及其文本。
我们将在课程的下一部分讨论图像优化时更深入地探讨这一点。
不过既然说到这里了，那就提几个网站图片必备的做法吧。
让我们检查一下我们在不良做法中使用的徽标。如您所见，标题与图片显示的内容无关。它也没有替代文字……
设置相关的替代文本很重要，因为它可以帮助屏幕阅读工具向视障读者描述图像，还可以让搜索引擎更好地抓取您的网站。
就像我们在这里所做的那样，确保为网站上的每张图片提供相关的标题和 alt 标签，以提高页面的可访问性和排名。
将图像添加到页面时要注意的另一个重要因素是设置它们的尺寸。
这允许在加载图像之前以适当的空间布置页面。这有助于避免布局偏移，这是浏览器衡量的一个因素。
让我们切换到样式选项卡并将宽度设置为 200px。
返回小部件面板，将导航菜单小部件拖放到徽标下方。
将指针设置为 none.. 以匹配我们之前的设计，
并在 Style.. 添加您喜欢的字体。
在构建您的页面时，理想情况下您希望避免使用超过 2 种不同的字体，这些字体包含多种粗细。
通过单击此加号图标，选择您需要的字体系列并将您将在整个模板中使用的样式保存为全局字体。
对于您的每个小部件，只需从您创建的列表中选择全局字体。
通过这样做，您将在您的网站上产生更少的请求，这将有助于提高加载速度。
现在，选择您喜欢的全局颜色。
——
如果你能避免用颜色选择器为每个元素选择不同的颜色是最好的。
只需单击此加号图标即可保存模板的调色板以创建全局颜色……就像我们对字体 3 所做的一样
每次您需要为元素或小部件设置颜色时，只需从全局颜色列表中选择它即可。
这样，您可以避免重复不必要的代码两次，并保持一致性和对模板的控制。
您可以在下面的说明中找到我们关于全局变量的专用视频。
将垂直填充设置为零，我们就完成了。
回到小部件面板，找到…并将图标列表小部件拖到我们的导航菜单下。1个
这个小部件包括一个图标和一个文本，它们彼此相邻放置，这有助于将小部件的使用保持在最低限度。
删除多余的列表项，并添加您的文本……
然后选择您选择的图标……。
在样式选项卡中…
设置您选择的全局颜色和字体。
伟大的！这些是我们完成标题重建所需的所有小部件。
但是，如您所见，它们目前是堆叠在一起的，并且彼此不在一条直线上。
我们可以轻松解决这个问题！
选择站点徽标小部件以输入其设置…
在“高级”选项卡中……
Under positioning.. 将其宽度设置为inline。
如您所见，当小部件的宽度设置为内联时，小部件将停止占用列的整个空间。
它将宽度限制为其实际大小，帮助我们将它们彼此相邻放置。
选择导航菜单，然后在高级选项卡中……
在定位下……将其宽度设置为内联……
最后一次为我们的图标列表小部件重复此步骤……。
好的，不错！我们已经完成了元素的并排放置，现在是正确放置它们的时候了。
我们可以使用列的布局选项来控制内联小部件的位置。
选择您的列，然后在垂直对齐中选择底部…
对于水平对齐方式，我们将选择 space between…
此选项将在两端放置第一个和最后一个小部件，并在所有其他小部件之间提供相等的间距。
由于第一个和最后一个小部件的宽度不同，相等的空间可能并不总是使我们的内部小部件居中。
您可以修改其位置，使您的设计像素与边距完美融合。
选择您的导航菜单小部件并在高级选项卡中，取消链接边距，并使用负值删除间距差异。
伟大的！
现在让我们看看它在移动设备上是如何工作的。
切换到响应模式并选择平板视口。
经常会看到专门针对平板电脑和移动设备重新设计的同一部分。
就像您在这个标题中看到的一样，它被创建了两次，一次用于桌面，一次用于移动和平板电脑。
简化您的设计并想办法使相同的部分具有响应性，以避免使用两倍的代码量来影响您的页面速度。
现在，让我们看看我们如何让我们的标题响应并准确定位我们的小部件到我们想要的位置。
单击您的导航菜单。
在高级选项卡上。在定位下…将其宽度设置为自定义。
这将允许我们设置我们希望此小部件采用的自定义宽度。
选择 %…
并为其周围的空白区域设置相同的宽度…
现在回到内容选项卡……
您可以在这些选项下轻松地将切换菜单对齐其宽度范围内的任何位置。选择正确的.3
让我们完成它的样式设置……
启用全宽，删除任何额外的填充……
在样式中……通过将栏一直拖动到左侧来删除背景。5
就是这样！
现在让我们在手机上检查一下。
有很多方法可以实现标题的移动设计，但在本例中，我们将在移动视口中显示所有三个小部件。
在我们的导航菜单小部件的高级选项卡中，在定位下，将宽度设置为自定义并更改它以适合我们的徽标旁边。
接下来，选择图标列表小部件，并在高级选项卡中，在顶部添加一些填充。
就是这样。
我们设法优化了我们的标题，从两次使用相同的部分（总共 12 个小部件和 10 列）到仅包含 3 个小部件和 1 列的 1 个部分，实现了完全相同的结果！
至此，我们对布局优化的工作原理有了更好的了解。
让我们删除旧的标题部分并继续浏览我们的模板以查看更多示例。1
我们经常看到的一个常见错误是使用额外的列和间隔符来控制小部件的位置。
就像我们在这里看到的一样……我们有一个带有背景图片的部分……
标题和文本使用两列水平放置，垂直放置，使用分隔符。
为此，我们可以简单地使用 1 列，因此删除右侧多余的列。
然后删除间隔符，因为这可以通过列对齐选项进行控制。
很好，现在选择列…
并将垂直对齐设置为中间。
接下来，在“高级”选项卡中……取消链接值……
并将右填充设置为 50%。
如您所见，我们使用正确的列设置获得了完全相同的结果。
选择该部分并仔细检查您是否设置了该部分的最小高度。
就像我们之前提到的那样，这有助于确定图像大小并避免布局偏移。
在我们进入下一节之前，让我们讨论一下这节的清晰度。
对于每个网站来说，在文本和背景之间形成良好的对比是很重要的。不可读的信息不仅会影响您的网站评分，还会赶走访问者。
确保您的文字和背景颜色形成强烈的对比，并且文字清晰可读。
对于像这样使用彩色图像作为背景的部分，有几种方法可以轻松提高清晰度。
单击您的标题，并在样式中……只需向其添加阴影即可。这将提高字母的可读性并使其从图像中脱颖而出。
使文本更清晰的另一种方法是使用叠加层。单击该部分以进入其设置，并在样式中，在背景叠加下..
尝试调整不透明度和颜色，直到获得理想的结果。
滚动到我们的下一部分，我们有一个包含 4 列的内部部分，每列都包含一个图像、标题和文本编辑器小部件。
让我们看看如何简化该部分。
在小部件菜单上，将图标框小部件拖放到我们的列中。
将光标悬停在图标上，然后选择上传 svg 以插入您的自定义图标。
请注意，要上传 SVG，您需要先在 Elementor 设置中启用它。
接下来，输入您的标题…
和描述……
在样式中.. 选择全局颜色并……更改图标的大小……和填充……
接下来在高级选项卡中……在定位下……将宽度设置为自定义。
因为我们想要制作 4 个，我们将给它们每个 25% 的宽度，它们构成了完整的列空间。7
伟大的！
右键单击……然后再复制您的图标 3 次
替换图像和文本..
就是这样，一个易于优化的部分，现在使用更少的资产，同时看起来完全相同。
接下来我们要重建这个部分。
它的设计使用了一个包含 2 列、2 个图像、一个标题和文本编辑器小部件的部分。
让我们创建一个包含 1 列的新部分..
并设置内容宽度以占据我们部分的整个宽度。
在小部件面板中..
找到..并将图像框小部件拖到我们的列中……
此小部件包含我们实现完全相同结果所需的所有资产。
输入您的标题..和描述..
对于我们的图像，我们将把两个图像合二为一，因为这会给我们带来相同的效果。
将图像位置设置为右侧..
在风格..让我们做一些定制……
设置元素之间的间距……并增加图像的大小……
在内容下.. 将文本水平…和垂直对齐到中心。
接下来，设置全局颜色……和您选择的字体……
在高级选项卡中…为小部件设置一些填充…
我们完成了资产较少的部分的优化！！
下一节提出了对我们服务的行动呼吁。
它有两列。在第一列中，带有垫片的背景图像。
在第二列中，我们有 2 个标题、一个内部部分、一个文本编辑器和一个按钮小部件。
我们将创建一个包含一列的新部分……
并将其内容宽度设置为全宽……
选择列，然后在高级选项卡中…
删除任何额外的填充…
在小部件菜单上，搜索号召性用语小部件并将其拖动到列中。
号召性用语小部件有许多选项，可以帮助我们仅使用此小部件创建完整的部分。
将图像位置设置为左侧..
并选择你的形象……
展开内容选项卡，然后输入您的标题……。
描述…
和按钮文字…
当我们在这里时，当您有按钮、菜单和社交媒体链接等链接时，最好提及最佳实践。
确保所有链接都正常工作，并且页面的按钮包含一个链接。
你可以很容易地从一个按钮添加一个链接到你的页面，只需像这样输入它的名字……
如果您添加将您带到其他网站的链接，例如您的社交媒体或合作伙伴的网站，请确保包含此属性。
单击齿轮图标，然后在自定义属性下键入此值。
Rel|noopener
这是一个 HTML 属性，添加到所有选择在新浏览器选项卡中打开的 WordPress 链接，并将提高您在最佳实践方面的分数。
现在让我们继续编辑我们的小部件。
风格……添加一些填充……
并调整图像宽度…
接下来，展开内容选项卡。选择标题的全局字体。
并增加描述和按钮之间的空间……
为每个资产选择正确的全局颜色……
现在展开按钮的选项卡
选择按钮的大小。
并根据您的设计要求对其进行自定义…
完成后，您就完成了仅使用一个小部件最小化整个部分的操作。
这是一个很大的进步！
向下滚动到我们的下一部分，我们可以看到显示多个图像时的常见错误。
这里我们有一个包含 5 列内部部分的部分。许多用户倾向于这样做来控制图像的大小，但有一种更简单、更优化的方法。
用一列创建一个新部分……
将其设置为全宽……
并在小部件菜单上……
拖放图像轮播小部件。
选择您喜欢的徽标，并将其大小设置为中等。
现在，调整幻灯片设置……
在风格上……将垂直对齐设置为中间……并给你的图像一些间距……
最后，在高级选项卡中，给您的小部件一些填充。
这将在保持优化解决方案的同时提供良好的运动。8
在下一节中，我们将了解如何优化我们网站上的视频。
选择视频小部件……并在样式下……找到延迟加载选项。
当我们应用延迟加载选项时，视频嵌入代码将替换为静态图像。仅当用户单击图像时才会加载视频，这确实有助于我们的页面加载时间。
您可以在各种其他小部件中找到此选项，例如 lottie 和 pro gallery 的小部件。
确保启用它以改善网站的加载时间。
我们已经在许多页脚中看到过这种结构，使用多个标题作为日期和描述，并使用一个图标作为版权符号。
在最后一节中，我们将了解如何优化页脚并使其始终保持最新。
删除多余的小部件并选择剩余的标题小部件。
我们将使用动态标签来保持我们的版权日期始终自动更新。
单击它…并选择当前日期和时间。
接下来单击扳手图标…
在日期格式选项下，选择自定义。
我们将保留代表 Year 的 Y 并删除其余部分。
这将始终显示当前年份。
现在展开高级选项卡，在之前的选项中，按住 option + g 或 Ctrl+Alt+C 键入版权符号，然后按空格键添加一个空格……
在之后的选项中，输入一些像这样的文本，以空格开头……我们就完成了。
正如您在最终格式中看到的那样，我们仅使用一个标题小部件即可轻松添加文本、符号和动态日期。
为了帮助本教程更轻松地进行，我们为每个示例创建了一个新部分。像这样的小部件，或者这个.. 可以合并在同一部分下。只需将它们拖放到上一节中。
并删除其余的……这将删除所有不必要的 HTML。
通过这一步，我们已经完成了页面布局的优化。
现在是时候再次运行结果，看看我们的分数是如何受到影响的。
我们将首先在网络选项卡中看到结果……。
我们可以在这里看到很多积极的变化。我们的网站加载时间仅为 568 毫秒，我们的请求从 81 个减少到 46 个……
让我们也检查一下 Lighthouse 选项卡……
如您所见，我们的分数非常好，我们的性能分数从 73 分上升到 98/100。最好的是，这是在不使用任何第 3 方插件的情况下实现的，只是使用更好的实践进行一些简单的调整。
那么交互和运动效果呢？
让我们快速浏览一下我们的模板，让它更有趣。
这将如何影响我们的分数？
选择我们的标题并在高级选项卡中，展开运动效果……并将粘性选项设置为顶部……
接下来，选择英雄部分，并在样式中…将图像附件设置为固定…
然后选择它的标题并在高级选项卡中，在运动效果下，将入口动画设置为淡入。对文本描述重复此操作。
在下一节中，我将对每个小部件应用淡入淡出效果，每个小部件都有 500 毫秒的延迟。
我将对下一个小部件执行相同的操作，以便在页面加载时产生微妙的效果……
太好了，现在让我们继续并再次运行测试，看看运动效果如何影响我们的分数。
很酷，我们看到我们的分数只减少了 1 分。这当然没有太大区别，它会让您的网站更加有趣和好玩。
请务必保存本指南以供将来参考，并使用您学到的知识来查看您的网站页面并应用一些最佳实践技术来全面优化您的布局。
在本课程的下一部分中，我们将了解图像优化。我们将遍历示例中的每张图片，并学习如何改进它们以获得更高效的加载时间。
