21分钟阅读时间 (4188个单词)

Joomla 性能调优 IV：网站建设练习

三月

星期日，2022年3月20日

32922 次点击

5 条评论

在本系列的第三部分中，我描述了如何通过优化静态媒体文件来提高您网站的性能。这个月，由于家庭小意外，比预期晚了一个月，我将谈谈如何给您的网站做最后的修饰，使其更加精致和专业。这主要与您的网站如何与搜索引擎和社交网络互动有关，但其中也有一些可以提高性能的地方。

网站建设练习

如果您已经实施了所有建议，那么您已经完成了大约90%的高性能、高排名和易于维护的网站建设。

我们不会讨论那些过时（例如，合并和压缩CSS和JavaScript——真的，不要这么做！）或者对大多数人来说很繁琐（例如，尝试从您的HTML输出中删除空白和换行符或创建渐进式Web应用程序）的技术。前者没有意义，后者针对的是不同于遵循这些系列的读者的受众。

相反，我们将讨论您可以做一些事情来提高您网站的性能，并减少与用户的摩擦点。这通常不像“安装这个，点击那个，砰，砰”那么容易，但值得这小小的额外努力。如果您这样做几次，它将成为一种本能，您的客户会对您交付的网站性能印象深刻。

OpenGraph和Twitter Cards

如果您曾在社交网络如Facebook（及其其他网站属性，如Instagram、Messenger和WhatsApp）、Twitter或LinkedIn输入过URL，甚至是在苹果消息、Slack等消息应用中，您可能会看到一些有趣的事情发生。您会看到一个带有图片和页面内容简短描述的卡片。您甚至可能会看到在该社交网络中链接到内容作者或发布者的链接。这个魔法是如何工作的呢？答案是，我的朋友，并不是随风飘荡，而是网页HTML源代码中的元标签。具体来说，是OpenGraph和Twitter Card元标签。

处理这个问题有两种方法：使用第三方扩展；或编辑您的模板并创建模板覆盖。

第一种方法可以说是简单得多。有几种Joomla扩展可以帮助您完成这项工作。一个简单但功能强大的扩展是Social Magick，它通过结合背景/覆盖/遮罩图像、文章的完整内容图像和标题——或者它们的组合来生成标题卡片图像。坦白说，这个插件是我妻子公司的产品，我是它的首席开发者。我还使用过另一个插件Phoca Open Graph，它允许您为内容设置OpenGraph和Twitter Card标签。此插件将使用您的文章的完整内容图像作为卡片图像。这两个插件都将使用文章信息填充其他OpenGraph元数据。

如果您正在开发自己的模板或仅开发自己的模板覆盖，您可以编写完整的自定义代码。这给您提供了绝对的控制权，但当然，这要复杂得多。

第一个更改显然是将模板的根HTML元素更改以包含OpenGraph的命名空间，例如。

<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" prefix="og: http://ogp.me/ns#">

细心的读者可能会注意到我们使用的是前缀而不是XML命名空间。这是推荐的方法，它在较新的浏览器上工作，即IE 10及更高版本。

然后您需要为您的分类和文章显示创建模板覆盖，包括必要的OpenGraph和Twitter Card标签。例如，一个文章模板覆盖（templates/MY_TEMPLATE/html/com_content/article/default.php）可能看起来像这样

$imagesRegistry = new \Joomla\Registry\Registry($this->item->images ?? '{}');
$imageIntro     = $imagesRegistry->get('image_intro', null);
$imageFull      = \Joomla\CMS\HTML\HTMLHelper::cleanImageURL($imagesRegistry->get('image_fulltext', $imageIntro))->url;
$canonicalURL   = Route::_(ContentHelperRoute::getArticleRoute($this->item->id), true, Route::TLS_IGNORE, true);
$doc            = $this->document;

$doc->setMetaData('og:type', 'blog');
$doc->setMetaData('og:title', $this->item->title);
$doc->setMetaData('og:description', $doc->getDescription());
$doc->setMetaData('og:site_name', $app->get('sitename'));
$doc->setMetaData('og:url', $canonicalURL);
$doc->setMetaData('og:image', $imageFull);
$doc->setMetaData('twitter:card', 'summary_large_image');
$doc->setMetaData('twitter:site', '@your_twitter_handle');
$doc->setMetaData('twitter:creator', '@your_twitter_handle');
$doc->setMetaData('twitter:description', $doc->getDescription());
$doc->setMetaData('twitter:title', $this->item->title);

分类博客模板覆盖也需要类似以下代码的代码

$canonicalURL = Route::_(ContentHelperRoute::getCategoryRoute($category->id), true, Route::TLS_IGNORE, true);

$doc->setMetaData('og:type', 'blog');
$doc->setMetaData('og:title', $this->params->get('page_title', $category->title));
$doc->setMetaData('og:description', $doc->getDescription());
$doc->setMetaData('og:site_name', $app->get('sitename'));
$doc->setMetaData('og:url', $canonicalURL);
$doc->setMetaData('og:image', \Joomla\CMS\HTML\HTMLHelper::cleanImageURL($category->params->get('image'))->url);
$doc->setMetaData('twitter:card', 'summary_large_image');
$doc->setMetaData('twitter:site', '@your_twitter_handle');
$doc->setMetaData('twitter:creator', '@your_twitter_handle');

显然，使用模板覆盖在您已经打算创建自己的模板时效果最好，因此您已经创建了大量的模板覆盖。如果不确定，请选择第三个插件的方法。

DNS预取和外部资源预加载

在系列的某个时间点，我说过浏览器并不是神奇地知道它们在加载页面时需要请求哪些文件，它们是在发现需要它们或者你用HTTP/2推送将它们推送到浏览器时才开始加载文件的。我有点撒谎了。你可以确实给浏览器一些提示，以便它在下载HTML内容的第一个字节时就开始准备，使用DNS预取和预加载链接标签。但我认为我可能跑题了。

DNS预取

当我描述浏览器如何检索渲染页面所需的CSS、JavaScript和图像文件时，我使用了一个简单的模型，其中浏览器向"你的服务器"发送请求。不言而喻的假设是"你的服务器"指的是与加载HTML内容相同的服务器和域名。在大多数Joomla网站上，情况确实如此。然而，你的网站可能正在使用外部CDN来托管一些媒体文件，包括从Google Fonts或类似资源中包含CSS，从外部服务加载JavaScript等等。这些都是托管在与你的网站和HTML内容提供者不同的域名上的资源。你的浏览器不能神奇地连接到这些外部域名；域名需要通过DNS查询先解析到IP地址。

DNS查询可能很慢，尤其是在高延迟的连接上，如卫星、蜂窝或糟糕的共享WiFi——当疫情结束，我们可以回到在咖啡馆、酒店和机场WiFi连接上工作时。这会延迟资源的加载，从令人烦恼（大布局位移）到真正的问题（非延迟、非异步的JavaScript包含导致页面加载停滞）。

使用DNS预取，你可以提前告知浏览器，本质上告诉它它将需要在渲染页面的过程中解析这些域名。浏览器可以在等待阻塞JavaScript或CSS文件最终加载时进行DNS查询，从而在页面渲染的后期部分为用户节省一些时间。

另一个提供DNS预取提示的好原因是当你知道用户交互将导致从外部网站加载资源时。例如，如果你知道点击一个点赞按钮将导致连接到社交网络的域名，那么提前告诉浏览器解析域名是有意义的，以便让该按钮对用户的交互做出更迅速的反应。

最好的方法是在你的模板的index.php或模板覆盖中实现。

例如，假设你的网站将在用户点击页面上的按钮时从cdn.example.com加载图像。在用户交互之前让浏览器解析DNS将节省一些宝贵的时间。

如果你在模板的index.php中这样做，你需要做这个

$this->getPreloadManager()->dnsPrefetch('https://cdn.example.com');

请注意，此代码必须在模板的index.php文件中早期使用，在你检索或输出文档的头部之前。文档的预加载管理器对象只对文档的头部应用更改。

从模板覆盖内部，你需要做的是

$this->getDocument()->getPreloadManager()->dnsPrefetch('https://cdn.example.com');

预连接

让浏览器提前进行DNS查询是很好的。然而，如果你知道浏览器将肯定需要连接到外部网站以获取用于渲染页面的资源（如CSS、JavaScript、图像或字体文件），那么告诉浏览器打开到外部服务器的HTTP连接并使其准备就绪就更有意义了。这比DNS预取更进一步。它执行DNS解析、TCP握手（打开到服务器的连接）和TLS协商（准备使用HTTPS）。它保留到该服务器的连接，以便随时使用。

这与DNS预取的工作方式相同，但你将使用预加载管理器的preconnect()方法。

假设您想使用Google字体。这意味着您正在从fonts.googleapis.com加载CSS，而它反过来又从fonts.gstatic.com加载字体文件。因此，在您的模板index.php页面中，您需要进行以下操作：

$this->getPreloadManager()->preconnect('https://fonts.googleapis.com', []);
$this->getPreloadManager()->preconnect('https://fonts.gstatic.com', []);

同样，如果从模板覆盖内部进行操作，由于执行上下文不同，您需要将 $this 替换为 $this->getDocument()。

资源预加载

在某些情况下，需要加载的文件（文件）通过仅解析您的页面HTML，对浏览器来说并不明显。一些资源可能被CSS或JavaScript文件引用。当这种情况发生时，浏览器就像“太好了，让我再添加一个文件到我的下载待办列表”。这可能会对您的网站性能产生不利影响，因为该文件可能很重要，例如字体文件或图像，它将导致布局偏移，或者一个外部托管的JSON或JavaScript文件，只有当浏览器解析并执行另一段JavaScript之后，才会变得明显。后者在包含第三方服务的JavaScript代码时非常常见。

同样，您可以通过告诉浏览器它“最终”需要检索某个文件来提前告知浏览器。通过在HTML文档的HEAD部分非常早地给出提示，浏览器可以优化该文件的检索，即在其主线程忙于等待和解析页面上的任何阻塞CSS和JavaScript的同时，在后台开始下载该文件。

与DNS预取一样，资源预加载是通过使用Joomla的pre;pad管理器对象实现的。

例如，如果我想从模板的index.php页面预加载一个字体文件

$this->preloadManager->preload('https://cdn.example.com/my_font.woff2', ['as' => 'font', 'crossorigin' => 'anonymous']);

以下是一些需要注意的事项。

与DNS预取不同，您正在提供一个指向文件的完整URL。
属性as是必需的，它告诉浏览器该文件的用途意图，例如字体、图像、视频等。
crossorigin属性对于现代浏览器基本上是必需的，它指导浏览器如何处理请求认证。将其设置为anonymous将不会发送任何cookies、HTTP认证或客户端SSL证书，并且始终允许。将其设置为use-credentials将传递cookies、HTTP认证或客户端SSL证书，但是但是受站点跨源资源共享策略的影响，可能会有效阻止请求通过，从而抵消您向浏览器提示的努力。
预加载的任何资源必须在“短时间内”使用，在大多数浏览器中通常是5到10秒。如果资源在该时间未被使用，它将被从内存缓存中清除，这意味着浏览器不会使用它，并且浏览器会在控制台打印出愤怒的消息——您在页面性能指标上会受到惩罚！

交换字体

当您使用自定义字体时，这是一个重要的功能。默认情况下，浏览器会尝试猜测在您的自定义字体尚未加载和解析之前，它是否应该显示任何文本。如果您的CSS font-face没有包含回退系统字体，默认行为是“block”，这意味着在检索您指定的自定义字体之前，浏览器不会显示任何文本。

您是否访问过这样的网站，它永远显示不出文本，您对此感到沮丧，盯着几乎全是白色的页面，上面有一些图像元素，直到突然之间所有文本都出现了？是的，这就是原因。

幸运的是，你可以通过使用 font-display CSS 属性来告诉浏览器做不同的事情。将其设置为 swap 表示浏览器会变得不耐烦，在等待自定义字体下载时回退到默认字体。当自定义字体下载完成后，即使是在几分钟之后，它也会使用新字体重新渲染页面。如果你将其设置为 fallback，浏览器也会同样不耐烦但是如果自定义字体在几秒内没有加载，它将坚持使用回退的系统字体并完全忽略自定义字体。

如果你使用的是 Google Fonts，只需在 URL 中将 /css? 替换为 /css2? 并附加 &display=swap 即可。例如，加载 Noto Sans 变为

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

最好的做法是设置良好的回退字体并将 font-display 设置为 swap。对于图标字体，你应该使用 block，这样在图标字体加载时渲染的就是空白空间。

说到字体回退，你应该将默认系统字体作为回退字体。例如，无衬线字体可以有回退为

BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", Helvetica, Arial, sans-serif

这涵盖了较新的和较旧的 Apple 设备、Windows 7 到 11、Android 和旧系统，并优先选择每个平台上的默认用户界面无衬线字体。其理念是用户将看到一个熟悉的字体，而不是通常更难看的默认无衬线回退字体。例如，在 Apple 设备上，这默认为 San Francisco 系统字体而不是 Helvetica 字体。

网站图标（favicon）

回到那些恐龙漫步地球、800x600 像素被认为是“高分辨率”的旧日子——大约在 2001 年——那时有 16x16 像素的 256 色favicon，最初目的是在用户的收藏网站中展示网站标志。快进二十年后，这些图标不再是 16 像素方形、256 色或仅限于书签。

Favicon 当然仍然用于书签和网站标签页，就像 20 年前一样。它们也用于在创建网站快捷方式时在智能手机和平板电脑的应用程序启动器/主屏幕上显示图标。此外，第三方服务还用于提取网站的标志。如果你不知道这种用途，请查看这个第三方 CodePen。

更复杂的是，由于不同代的智能手机、平板电脑、浏览器和操作系统的需求，有几个尺寸。你可以在 https://github.com/audreyfeldroy/favicon-cheat-sheet 找到所有这些的极好参考。

如果我们列出一个支持从 2013 年到 2022 年（包括）所有设备、浏览器和操作系统的简短列表，我们会得到以下结果

包含 16x16、24x24、32x32、48x48 和 64x64 像素的 ICO 文件。
七个 PNG 文件，尺寸为 32x32、128x128、152x152、167x167、180x180、192x192 和 196x196 像素。
一个 144x144 像素的 PNG 以及用于 Windows Modern UI 网站磁贴的背景颜色，这些磁贴已弃用但尚未删除（并且在人们仍然使用 Windows 7 的情况下非常常用）。

将它们添加到 Joomla 需要编辑模板的 index.php 文件，并在输出 HTML 文档的 HEAD 之前放置以下代码

$doc = \Joomla\CMS\Factory::getApplication()->getDocument();
$baseUrl = \Joomla\CMS\Uri\Uri::base();

// Good old 16px square favicon
$doc->addFavicon($baseUrl . 'images/logos/favicon/favicon-16.ico');
// Default fallback: 152x152 pixels
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-152.png', 'apple-touch-icon-precomposed', 'rel');
// Windows Modern UI tile
$doc->setMetaData('msapplication-TileColor', '#d43431');
$doc->setMetaData('msapplication-TileImage', $baseUrl . 'images/logos/favicon/favicon-144.png');
// All other sizes
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-196.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "196x196"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-192.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "192x192"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-180.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "180x180"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-167.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "167x167"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-152.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "152x152"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-128.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "128x128"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-32.png', 'icon', 'rel', ['sizes' => "32x32"]);

明显的问题是，你需要记住进行所有这些更改，这在实际操作中可能是不切实际的。你可以通过仅上传图像/标志/favicon文件夹中的两个文件来部分自动化这个过程。

favicon.ico，你仍然需要自己生成，但可以通过只包括传统的16x16像素图标来规避。
favicon.png，一个512x512像素的透明PNG，包含你标志的高质量版本。

然后你可以使用这个相当复杂的代码来自动生成所有必要的尺寸。

$doc = \Joomla\CMS\Factory::getApplication()->getDocument();

/**
 * Generate favicons.
 *
 * You need to upload two files to the $basePath folder, by default images/logos/favicon :
 * - favicon.ico  which includes 16x16, 24x24, 32x32, 48x48 and 64x64 pixel images.
 * - favicon.png  a 512x512 pixel transparent PNG
 *
 * @param   string       $basePath      Path with your favicons relative to your site's root
 * @param   int[]        $favIconSizes  List of sizes to generate e.g. [32, 57, 152], see https://github.com/audreyr/favicon-cheat-sheet
 * @param   string|null  $tileColor     HTML hex color for the IE Modern UI tile icon, null to skip generating it
 * @param   int          $defaultSize   Fallback favicon size when the browser doesn't request a specific dimension
 */
$faviconGenerator = function (string $basePath, array $favIconSizes, ?string $tileColor, int $defaultSize = 152) use ($doc) {
   $ensureSize = function (int $size) use ($basePath) {
      $filePath = JPATH_SITE . '/' . $basePath . '/favicon-' . $size . '.png';

      if (!file_exists($filePath))
      {
         try
         {
            (new \Joomla\CMS\Image\Image(dirname($filePath) . '/favicon.jpg'))
               ->resize($size, $size)
               ->toFile($filePath, IMAGETYPE_PNG, ['quality' => 9]);
         }
         catch (\Exception $e)
         {
         }
      }

      return basename($filePath);
   };

   $baseUrl = \Joomla\CMS\Uri\Uri::base(false) . $basePath . '/';

   // Fallback .ICO file
   $doc->addFavicon($baseUrl . 'favicon.ico?' . $doc->getMediaVersion());
   // Default favicon
   $doc->addHeadLink($baseUrl . $ensureSize($defaultSize) . '?' . $doc->getMediaVersion(), 'apple-touch-icon-precomposed', 'rel');
   // Internet Explorer Modern UI (formerly Metro) tile icon, classic Edge
   if (!is_null($tileColor))
   {
      $doc->setMetaData('msapplication-TileColor', $tileColor);
      $doc->setMetaData('msapplication-TileImage', $baseUrl . $ensureSize(144) . '?' . $doc->getMediaVersion());
   }
   // All other favicons
   foreach ($favIconSizes as $size)
   {
      $doc->addHeadLink($baseUrl . $ensureSize($size) . '?' . $doc->getMediaVersion(), 'apple-touch-icon-precomposed', 'rel', ['sizes' => "{$size}x{$size}"]);
   }
};
$faviconGenerator('images/logos/favicon', [
   // Favicons size reference: https://github.com/audreyr/favicon-cheat-sheet
   32,  // Default fallback for most desktop browsers.
   // 57,  // Deprecated: Standard iOS home screen (iPod Touch, iPhone first generation to 3G), old Android
   // 72,  // Deprecated: First- and second-generation iPad
   // 76,  // Deprecated: iPad home screen icon
   // 96,  // Deprecated: GoogleTV icon
   // 114, // Deprecated: iPhone retina touch icon with iOS <= 6
   // 120, // Deprecated: iPhone retina touch icon with iOS >= 7
   128, // Chrome Web Store icon & Small Windows 8 Star Screen Icon
   // 144, // Deprecated: IE10 Metro tile for pinned site, iPad Retina with iOS <=> 6
   152, // iPad Retina with iOS >= 7
   167, // iPad Retina with iOS >= 10 (in practice iOS will still use 152×152)
   180, // iPhone Retina
   192, // Google Developer Web App Manifest Recommendation
   // 195, // Deprecated: Opera Speed Dial icon (Not working in Opera 15 and later)
   196, // Chrome for Android home screen icon
   // 228, // Deprecated: Opera Coast icon
], '#d43431');

此代码在所有情况下可能不会产生最佳结果。缩小的标志可能看起来有点模糊。尽可能从矢量源生成PNG文件，并使用ImageOptim或类似工具手动调整PNG文件的大小。

分析和Cookie通知

由于你像我们其他人一样在网上浏览，因此你一定已经对充斥着网络的Cookie横幅感到非常沮丧。在大多数情况下，不是强制性的、适用性有限的Cookie是那些由分析服务（如Google Analytics）使用的Cookie。如果你的网站需要显示Cookie横幅，仅仅因为你使用了分析服务，请停下来思考：你真的需要Google Analytics或类似服务提供的功能吗？

在大多数情况下，你不需要这些高级功能。如果你只需要了解有多少人访问了你的网站，他们是从有机搜索还是引用链接来的，以及他们来自哪个国家，你可能不必再寻找，因为你的托管控制面板很可能已经提供了AWstats或类似解决方案。这些解决方案通过解析网络服务器的访问日志来工作，不需要Cookie，因此你的网站上不需要Cookie横幅。

另一种解决方案是使用自托管的分析服务，如Matomo （以前称为Piwik）。它提供了与Google Analytics类似的几乎所有功能，但由于它是一个符合GDPR和CCPA的第一方解决方案，因此你甚至不需要显示Cookie横幅。它甚至可以导入Google Analytics的数据，这样你就可以在你的业务用例中保持数据的一致性。

通过消除对Cookie横幅的需求，你使你的网站更容易导航，对用户来说也少了很多挫败感。知道你可以这样做而不牺牲你做出业务决策所需的数据，也不强迫你的用户与一个通过出售个性化广告（如果你还没有注意到，Google主要是一个广告网络）赚钱的第三方共享他们的数据，这是非常有力的。

哦，对了，不需要使用Cookie横幅？这也让你的页面渲染性能变得更好！

暗黑模式

很可能你的网站的设计只有一种颜色方案，而且很可能是“浅色”主题，即明亮的背景和深色文字。在过去二十年里，大多数网站都是这样，这与大多数操作系统最初只提供选项的情况一致。

对于一些用户来说，这种颜色方案是难以访问的，使用反转屏幕颜色也不是一个很好的解决方案；所有颜色都会反转，包括插图和图像，这会带来令人不愉快的体验。此外，为你的网站提供暗色方案将使其更具可访问性。它还会使你的网站对那些更喜欢暗色方案而不是浅色方案的人更有吸引力——如果你的目标受众是极客和游戏玩家，这是一个值得考虑的好点。

如果你的模板正在使用Bootstrap 5，你可以通过我的DarkMagic插件添加自动暗黑模式支持。

在我自己的博客中，我写了更多关于什么是暗黑模式、为什么以及如何使用它的内容，我还提供了一个关于暗黑模式的演示文稿。我将仅链接到这些资源，而不是在这个已经相当长的文章中重复自己。

AMP

在我最初开始撰写这个文章系列时，我打算推荐你的网站使用AMP（加速移动页面）。现在，我对此并不那么确定了。

如果你还不知道，AMP基本上是HTML的一个子集，它有一些特性使得在移动设备上加载速度更快——至少看起来是这样。它比常规的响应式网站更加受限。AMP标准的吸引力在于，当用户在智能手机上使用Google应用进行搜索时，Google会将AMP内容优先展示在搜索结果轮播图中。

但它的缺点是，AMP非常特定于Google，且在Google生态圈之外没有得到支持。此外，点击指向你网站AMP页面的搜索结果时，用户在浏览器地址栏中看到的是google.com，而不是你的网站。我认为这些是主要的缺点，它会将你与你的受众隔离开。

事实是，AMP顾问委员会的一名成员最近辞职，因为他认为Google几乎完全利用AMP项目为自己谋取利益，德克萨斯州州长已对Google提起反垄断诉讼，这将结束AMP在搜索轮播图中的优先待遇。这让我怀疑是否有必要在你的网站上引入AMP。根据我的经验，如果你想要为AMP页面创建自己的自定义模板，集成过程几乎可以说是复杂的。

最后，根据我在自己网站上收集的统计分析，AMP并没有带来像预期那么多的流量。我的大部分流量来自其他地方的直接链接、有机搜索以及我的常规响应式模板和社会媒体。AMP在流量来源雷达上几乎微不足道。

因此，我不会告诉你如何在你的网站上集成AMP，而是告诉你你可能不应该这样做。不过，如果你执意要实施它，Joomla有相应的解决方案。我使用过wbAMP，但必须警告你，创建自定义模板相当复杂。在我完成这个系列的第一稿到今天，我已经从我的网站上移除了AMP。

待续

这个系列还有一个最后的部分。它涉及一些更通用的、非Joomla特定的操作，可以帮助你的网站对人类用户更有吸引力，而不仅仅是搜索引擎，并保持网站速度快。在此之前，祝您网站建设愉快！

本文的德语翻译：[https://www.jug-zueri.ch/artikel/performance-tuning-in-joomla-teil-4-fitnessuebungen](https://www.jug-zueri.ch/artikel/performance-tuning-in-joomla-teil-4-fitnessuebungen)

本文的西班牙语翻译：[https://mejorconjoomla.com/noticias/magazine/puesta-a-punto-del-rendimiento-de-joomla-4-parte-iv-calistenia-en-la-construccion-del-sitio](https://mejorconjoomla.com/noticias/magazine/puesta-a-punto-del-rendimiento-de-joomla-4-parte-iv-calistenia-en-la-construccion-del-sitio)

《Joomla社区杂志》上发布的一些文章代表了作者在特定主题上的个人观点或经验，可能并不与Joomla项目的官方立场一致。

标签

性能 Joomla 4

关于作者

Nicholas K. Dionysopoulos

Nicholas是一位机械工程师，后来成为了一名网页开发者。他在2004年发现了Mambo（Joomla的前身），从此他的生活就变了。

他是Joomla几个流行扩展的开发者，也是Joomla核心的频繁贡献者。他目前与他的妻子、女儿和两只猫住在希腊雅典的海滨。他喜欢感谢Joomla社区给了他事业和家庭——毕竟，他在一个Joomla会议上遇见了他的妻子！

当他不在编写Joomla及其扩展的代码、文档或文章时，他喜欢摆弄机械键盘、玩D&D和看科幻系列。

已经注册？这里登录

Marc Dechèvre on Saturday, 26 March 2022 11:33

DarkMagic：不仅仅是Cassiopeia？

哦，实际上DarkMagic不仅在前端为Cassiopeia工作（如https://github.com/nikosdion/DarkMagic所述），而且为任何基于Bootstrap 5的模板？
如果是这样，那么可能需要在GitHub上的readme.md中进行相应的修改。

Nicholas K. Dionysopoulos on Sunday, 27 March 2022 03:58

有点意思

目前，前端和后端都硬编码了对模板名称的检查。然而，你可以使用插件提供的CSS为你的自定义模板。SCSS源代码也包含在插件中。因此，你可以非常顺利地安装插件，不启用它，从你的模板的SCSS中包含其SCSS文件并重新构建你的CSS。如果存在删除模板名称检查的用例，请提交一个GitHub问题，我将在配置页面上添加一个控件。

Brian on Sunday, 02 April 2023 21:59

含糊的陈述

“将 $this 替换为 $this->getDocument()” 的陈述是含糊的。

Nicholas K. Dionysopoulos on Tuesday, 04 April 2023 12:40

不是含糊的

这根本不是含糊的。它指的是前面的代码块（两行）。每一行开始处只有一个 $this 需要替换。此外，这已经在“DNS预加载”部分中演示和解释了。重复相同的信息将是多余的。

Brian on Tuesday, 04 April 2023 14:03

重复的

很抱歉。您是对的。它是重复的，而不是含糊的。谢谢您的澄清。

Joomla! 社区杂志™

Joomla 性能调优 IV：网站建设练习

网站建设练习

OpenGraph和Twitter Cards

DNS预取和外部资源预加载

DNS预取

预连接

资源预加载

交换字体

网站图标（favicon）

分析和Cookie通知

暗黑模式

AMP

待续

关于作者

Nicholas K. Dionysopoulos

评论 5

订阅 Joomla! 杂志通讯