分类： 优化

图片优化

引言

本课主要讲解图片优化。但你可能要问，图片优化到底是什么？图片优化就是在减小文件大小的同时，保持图片质量的平衡。它是以理想的格式、尺寸和分辨率提供高质量图片，以提升用户参与度的过程。它还涉及准确标记图片，以便搜索引擎能够读取和理解页面内容。

优势

在继续之前，我们先简要讨论一下图片优化的优势。图片优化将帮助你提高页面加载速度、改善用户体验和SEO，而且不需要任何开发技能。图片优化显然具有多米诺骨牌效应。如果你的图片加载速度快，它们将提高用户参与度，进而提升搜索引擎排名。

文件名和替代文本

那么，我们如何优化图片呢？首先，我们需要在上传前更改图片的文件名，然后添加替代文本。其次，确保选择正确的图片类型。然后，我们可以缩放或裁剪图片，并压缩图片文件。所以，请确保在上传到媒体库之前更改图片的文件名。记得添加替代文本。当你将图片添加到媒体库时，可以打开它，在右上角会显示“替代文本”。替代标签只是对图片的简短文字描述，但当图形无法加载时，它向网站用户解释图片的内容。它还允许搜索引擎更好地抓取和排名你的网站，并帮助视障用户理解页面内容。同样重要的是，图片SEO从文件名开始。你希望搜索引擎在不查看图片的情况下就能了解它。所以，请使用一个聚焦的关键词短语。

图片格式

WordPress允许你上传多种格式的图片。图片通常保存为JPEG、PNG、WebP或AVIF。JPEG通常用于照片以及人物和物体的图像。PNG适用于图形、插图和具有透明度的图片，而WebP和AVIF是优化网站性能的绝佳选择，特别是对于照片和动画等非矢量资源，因为它们具有卓越的压缩能力。我还建议避免使用GIF，因为它们会带来可访问性方面的挑战。

插件

最后，我们将介绍三种优化图片的方法。首先，你可以使用WordPress插件，或者你也可以决定使用基于网页的工具或图片编辑器。我们从插件开始。要添加插件，我们进入“插件”页面，点击“安装新插件”，然后在搜索框中输入“图片优化”。现在你会注意到有许多不同的插件可供选择。一些值得探索的插件包括Modern Image Formats、Image Optimization by Optimal、Smush或Imagify。请注意，根据插件的不同，某些功能可能仅由专业版支持。你可能需要考虑为你网站上的新图片上传使用现代图片格式。这个插件由WordPress性能团队创建和管理。它在上传时将图片转换为更现代的格式，如WebP或AVIF。在这个例子中，我将安装并激活EWWW Image Optimizer插件。激活后，我们可以进入“设置”，看到一个名为“优化本地图片”的选项。如果你向下滚动，你会看到更多带有高级套餐的选项。但如果我们进入“媒体”页面，可以点击“批量优化”并扫描未优化的图片。我们可以看到有184张图片需要优化，右侧还有更多选项。

基于网页的工具

接下来，让我们探索一些基于网页的工具，你可以在将图片上传到WordPress网站之前进行优化。一些值得考虑的选项包括tinypng.com、tinyimg.com、kraken.io和squoosh.app。让我们看看Squoosh是如何工作的。它是开源的，支持所有图片格式。一旦你从电脑中添加图片，就可以编辑或压缩它。首先，我会点击“调整大小”，然后更改图片的高度。你会注意到宽度会自动更新。接下来，我会进入“压缩”并将图片保存为WebP文件。在右下角，我们可以看到这个文件大小已经减少了97%。

图片编辑器

最后，你还可以选择使用图片编辑器，例如Pixlr、Photopea、Gimp或Canva。

最佳尺寸

你可能要问，在WordPress中使用的最佳尺寸是多少？嗯，这取决于你将如何使用该图片。对于标题图片，1200 x 628像素是一个不错的尺寸。对于其他图片，最佳尺寸至少是640 x 480，大约1024 x 768像素。

结论

我相信这些信息对你有所帮助，并且你会找到适合你的正确方法。

网站优化

引言

大量研究和案例表明，网站响应时间越长，访客流失越多。无论您的网站专注于什么内容，为访客提供最佳体验都是首要目标，因此优化网站速度至关重要。

在本课中，您将了解网站优化的含义、哪些因素会影响性能、如何测试网站速度以及如何改进。

网页性能涉及加载时间和运行时的用户体验。作为一种实践，网页性能包括可衡量的因素，例如页面的加载时间、页面变得可交互所需的时间，以及用户对加载时长的感知。

影响性能的因素

决定网站速度的组件有很多——软件、网络条件、硬件——每个都通过标准指标计算。实现高性能得分的方法是优化这些动态部分的每一个。

让我们从软件开始，它涵盖了代码和内容。

WordPress 主题定义了页面的内容结构。某些设计元素，如颜色，对性能没有影响；而其他元素——从字体和图形资源到轮播图和弹出窗口——可能会拖慢您的网站速度。

在处理媒体和字体时，选择更新、性能更高的文件格式是一个好习惯。尤其是图片，在网站优化中扮演着关键角色。我们将在另一节专门讲解图片优化策略的课程中详细讨论这个话题。

虽然最小化资源数量很有用，但它们的加载方式同样重要。从这个角度来看，一个编写良好的主题会带来巨大的不同。

主题和插件

臃肿的主题加载了太多资源，是导致性能得分低下的主要元凶之一。

同样，您使用的插件的质量也会影响网站运行的速度，无论是客观速度还是感知速度。那些对外部服务进行过多请求、加载多个资源并不断执行数据库查询的插件，即使是最好的服务器配置也会被拖慢。

嵌入内容和第三方元素

广告、分析工具、社交媒体小部件、替代评论插件以及外部托管的资源会延迟加载、减慢响应时间、占用带宽，并可能导致更高的跳出率。

在将它们添加到您的网站之前请三思，并对性能成本保持警惕。

如何衡量性能

您可以通过两种方式衡量性能：合成监控和真实用户监控（RUM）。

两者都发生在浏览器中，但合成监控意味着“在实验室”中运行测试——在预定义条件和预设变量下；而 RUM 则呈现“在现场”生成的结果，收集来自实际网站访客的数据。

无论哪种情况，测试都可能基于 Google 概述的三项指标，这些指标已被行业采纳为“提供卓越网络用户体验所必需的质量信号”。

它们被称为核心网页指标：

  • 最大内容绘制（LCP） 衡量页面上最大元素变得可见的时间。
  • 累计布局偏移（CLS） 衡量页面加载过程中元素发生偏移的程度。
  • 与下一次绘制的交互（INP） 是该列表的新增项，衡量页面响应用户交互（点击、触摸和键盘输入）所需的时间。

如何测试您的网站

测试有助于您识别性能瓶颈。您可以使用多种工具进行测试，包括 PageSpeed Insights（在新标签页中打开）和 WebPageTest（在新标签页中打开）。

由 Google 维护的PageSpeed Insights 会呈现合成测试结果以及该公司版本的 RUM——Chrome 用户体验报告（CrUX）。它会同时在移动设备和桌面设备上测试页面，并提供改进建议。

WebPageTest 是一个更复杂的测试平台。它在 Google 指标的基础上增加了一系列有用的功能，包括环境影响报告、图片分析、优化机会的详细分解，以及选择不同地点、浏览器和连接速度的选项。

第一次运行 WebPageTest 可能会让人望而生畏，但它是测试和分析网站整体性能的宝贵工具。

在测试时，您会遇到其他软件驱动的指标，包括：

  • 首次内容绘制（FCP）：浏览器显示第一个内容片段的时间。
  • 总阻塞时间（TBT）：从 FCP 之后到访客可以与网站交互之前所经过的时间。

这些指标受到加载过多资源和元素以及未能正确加载它们的共同影响。

ℹ️ Performance Lab 是由 WordPress 性能团队开发的一个社区插件，可能能够缓解部分问题。该插件整合了六个独立插件，每个插件都旨在利用最新的浏览器技术解决特定的性能问题。激活后，插件会自动开始优化你的网站，无需手动配置或调整。

托管的重要性

影响 WordPress 网站速度的其他因素包括网络基础设施、服务器硬件和数据库操作。

涵盖这些因素的指标是首字节时间（TTFB），它衡量浏览器接收到第一个字节所需的时间。这取决于连接时间——包括访问者和服务器的连接时间。

连接建立得越快，字节发送得越快，你的网站加载速度也就越快。

资源交付速度由多个因素决定，包括地理位置、网络状况、硬件配置和后端进程。换句话说，托管服务很重要。

由于服务器响应缓慢可能源于网络或硬件问题（如 CPU、内存和存储速度），因此值得仔细考虑托管解决方案的每个方面——而不仅仅是标价。

插件

最后是插件。性能插件无法减少服务器上的 CPU 负载时间或更新后端软件，但它们可以处理诸如 CDN、缓存、压缩、精简、数据库优化，有时甚至安全等问题。

因此，即使选择更实惠的共享托管，也建议借助可靠的插件来应对常见挑战，这些插件可以让你使用 CDN 来减少客户端与服务器之间的往返时间，应用缓存来减少请求数量，并启用压缩和精简来发送最少的数据量。

WordPress 插件目录中有数百个性能和优化插件。以下是一些流行的解决方案：

  • WP-Optimize
  • W3 Total Cache
  • WP Super Cache
  • Jetpack Boost
  • LiteSpeed Cache

结论

WordPress 贡献者一直在努力提升速度和性能。某些功能已包含在核心中，但其他功能需要用户和开发者手动启用。

请确保你使用的是最新版本的 WordPress，以便从最新的性能提升技术中受益。