在本系列文章的第二部分中，我描述了如何通过一些简单的更改来解锁 Joomla 网站的基础性能水平。今天我们将深入探讨静态媒体：JavaScript、CSS 和图像文件。这些更改更为复杂，但可以将一个速度慢的网站变成一个性能良好的网站。可以说，并非所有的这些更改都适用于所有网站，但您获得的是巨大的性能提升。

您网站的大部分内容是以静态媒体文件的形式出现的：CSS、JavaScript、图像，以及可能的音频和视频。我们往往不太重视它们，认为它们不如我们的内容重要，但它们通常构成了当用户访问页面时从我们的网站服务器传输到用户设备的数据的大部分。更进一步的是，解析大型 CSS 和 JavaScript 文件或解码大型图像会冻结主浏览器线程，简单地说，这意味着浏览器无法进行任何工作来渲染页面（它只能在后台下载更多数据）。此外，CSS、JavaScript 和图像文件越多，它们全部加载所需的时间就越长，这意味着浏览器必须停止渲染页面并从头开始重新计算一切，每当这些文件之一完成加载时。这可能会导致页面看起来加载速度较慢或引起其他渲染问题，如内容在屏幕上跳跃（这在浏览器术语中被称为“布局偏移”）。

优化您的图像

如果您有一个图像密集型的网站，如博客或新闻网站，您的页面内容传输量最大的一部分是图像。您可能已经习惯了只需取一张图像，使用 Joomla 的媒体管理器上传它，也许稍微调整大小或裁剪一下——Joomla 4 的媒体管理器现在可以这样做！——然后就可以结束了。这对您来说是个好消息，但您的图像可能没有经过优化，并且（以千字节为单位，不一定以尺寸为单位）比应有的要大。

你可能对pngcrush（https://pmt.sourceforge.io/pngcrush/）和mozjpeg（https://github.com/mozilla/mozjpeg）这样的工具略知一二或者非常熟悉。如果你对命令行操作比较熟练，可以使用它们来优化你的图片。

更简单的方法是，有一个名为ImageOptim的免费工具（https://imageoptim.com/mac），适用于Windows、macOS和Linux，可以针对你的图片运行这些工具并选择最小的文件。操作非常简单。将图片文件夹拖放到工具上。等待它完成。你的图片将被它们的优化版本所替换。显然，这应该首先在你网站的本地副本上完成。如果不清楚，请保留原始图片的副本，因为ImageOptim会用优化版本覆盖你的图片。

使你的图片自适应

你已经知道你的网站将在不同屏幕尺寸的设备上显示：小于5英寸的预算友好的Android手机、6英寸的主流智能手机、7英寸以上的大屏手机或小型平板、10英寸至11英寸的平板、13英寸至15英寸的笔记本电脑以及巨大的23英寸以上的桌面显示器。你已经通过使网站响应式来考虑到这一点，这意味着内容会缩放，设计会根据网站渲染的屏幕尺寸的交互模式进行调整。

但你的图片怎么办呢？

当你的目标设备从宽度为380像素的预算手机到宽度为5120像素的桌面时，相同的图片文件并不适合所有尺寸。如果你针对小屏幕进行优化，图片在大屏幕上看起来会模糊且像素化。如果你针对大屏幕进行优化，那么大多数访客都会下载一个不必要的大的文件来显示一个远小于实际尺寸的图片。针对受众中最常见的设备尺寸进行优化是两害相权取其轻：小设备下载大文件，大屏幕显示模糊的照片。

如果你还考虑到HiDPI设备，它们的像素密度是标准屏幕密度的2倍、3倍或4倍（标准是每英寸96像素），你将面临一个相当复杂的难题。是选择一个相对较小的文件，它会在许多设备上显示得很差，还是选择一个巨大的文件，它会在所有设备上显示得很好，但大小可能在几兆字节左右？

幸运的是，你不必做出选择。浏览器已经长期支持自适应图片。简而言之，使用带有适当媒体查询的PICTURE元素，你可以告诉浏览器自动选择适合网站渲染的显示（分辨率和DPI）的正确图片文件。如果显示尺寸发生变化，例如用户将设备从纵向旋转到横向或调整桌面浏览器窗口的大小，浏览器会智能地决定如何处理。如果它有一个足够大的图片，它会将其缩小。如果没有，并且你在PICTURE元素中暗示了有一个适合所需尺寸的更合适的图片文件可用，它将加载该文件。在加载大图片的同时，小图片会以缩放的形式出现，所以从用户的角度来看，图片会有短暂的模糊，但很快就会消失。

使用PICTURE元素，你还可以让浏览器选择它支持的最合适的文件格式。大多数网页上的图片都是JPG或PNG。这些是遗留的图片格式，可以追溯到20世纪90年代甚至更早。大多数现代浏览器还支持WEBP，这是一种效率更高的图片文件格式，在支持透明度的情况下可以生成更小的文件。从网站建设者的角度来看，它就像加强版的PNG。不幸的是，你不能简单地转换所有内容为WEBP，因为旧版浏览器（以及所有版本的Safari）根本不支持WEBP。

到现在你可能已经绝望地抓着脑袋。之前简单地上传一个图片文件，在内容中放入一个IMG标签，现在却变成了一道难题，需要你创建各种不同的图片尺寸和类型。这对您来说很困难，对您的客户来说更是不可能完成的任务。

幸运的是，有第三方Joomla扩展可以为您处理这些。我过去使用过XT Adaptive Images Pro 。还有Econa，以及其他一些扩展——您可以在Joomla扩展目录中进行深入研究，那里有满足各种需求和预算的扩展。

另一个选择是使用布局覆盖和助手来自动创建您图片的响应式版本。这是我贡献给Charlie Lodder的Lightning模板的代码。如果您热衷于制作自定义模板，可以轻松地将这些布局覆盖和助手类应用于您的模板。

矢量插图

关于图片的另一个要点是，插图（与照片相反）通常是从Adobe Illustrator或Affinity Designer等软件中的矢量文件开始。我们通常看到的是，这些文件在使用前被转换为透明的PNG文件。这是最不有效的方法。

浏览器已经长期支持可缩放矢量图形（SVG）文件，这些是小文本文件，描述矢量图形。与为摄影优化的文件格式（JPG、PNG甚至WEBP）相比，它们要小得多，由于它们是纯文本，因此具有更高的压缩性。它们可以在任何屏幕分辨率上从微小的尺寸到巨大的尺寸进行缩放，而不会失去清晰度。

虽然Joomla 3中缺乏对SVG的支持——或者甚至没有使用第三方扩展添加SVG的可能性——但在Joomla 4中这是完全可以实现的，只要您手动启用它。转到内容，媒体，然后单击选项。将“法律图像扩展（文件类型）”更改为包括SVG，即更改为

bmp,gif,jpg,png,svg

如果您启用了上传限制（您应该这样做！），也请将“允许的扩展”更改为包括svg，即

bmp,gif,jpg,jpeg,png,webp,ico,mp3,mp4,odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv,svg

如果您启用了检查MIME类型，还需要将image/svg+xml添加到“法律MIME类型”，即

image/jpeg,image/gif,image/png,image/bmp,application/msword,application/excel,application/pdf,application/powerpoint,text/plain,application/x-zip,image/svg+xml

单击保存并关闭。现在Joomla允许您上传SVG文件，并在任何允许插入图片的地方使用它们。

最后提醒一点：不要在元素中使用SVG文件，这些元素期望从内容中获取其大小（SVG文件对浏览器来说没有固定的宽度和高度，尽管文件中可能指定了大小）以及不要尝试将SVG文件用作背景图片。虽然有两种方法可以做到这一点，但您可能会不必要地遇到麻烦。

不要修改JavaScript和CSS

在过去15年中，有几种技术可以提高JavaScript和CSS的加载速度。通常它们归结为以下技术：合并文件、压缩文件、GZipping文件以及将JS/CSS加载移至HTML文档的底部。

不要这样做。不要使用任何执行这些操作的插件。这些在Joomla 4中是非常糟糕的想法——而且它不需要它们！

合并文件会带来很多“鸡生蛋，蛋生鸡”的问题。您需要知道在网站的每一页中文件需要合并的顺序，并在出现问题时不工作的情况下进行调试。这并不能解决任何问题；我们上个月讨论了浏览器如何下载内容以准备显示页面。

使用PHP代码压缩JavaScript和CSS文件是完全适得其反的。大约12年前，当这些文件非常简单时，这种方法“ kinda”能工作。现代的JavaScript和CSS需要更专业的、非PHP代码来压缩它们，例如Babel和Closure。大多数开发者仍然会压缩他们的代码，Joomla从3.0版本的早期就开始完全支持压缩文件。

使用插件来GZip您的文件是极其低效的，会导致页面加载时间更长。上个月我们讨论了如何让您的Web服务器更有效地完成这项工作，并告诉浏览器缓存静态文件。

将JavaScript文件从头部移到页面底部会引发问题。如果头部或文档主体中有内联脚本引用开发人员合理预期的已加载的代码，您的网站将显示为损坏。Joomla 4支持延迟和异步脚本加载。如果开发人员知道他们的JavaScript可以支持这一点，他们将使用它，并且这几乎有与将JavaScript移到HTML文档底部相同的效果（实际上，效果更好！）。

最后，将CSS移到HTML文档的底部会制造比解决的问题更大的问题。浏览器以无样式的方式渲染整个页面，然后读取样式表，并必须重新开始。这会导致大量的额外工作，并使您的网站渲染速度变慢，同时，页面在重新渲染时会闪烁并移动。这是糟糕的用户体验。

因此，请勿使用任何声称“优化”您网站的这些功能的插件。这些技术在十年前是相关的，但现在不再如此。

使用CDN

您网站最大的性能瓶颈是静态文件的传输：图片、CSS、JavaScript、视频、音频。这由两个与拥有网站相关的因素加剧：可用带宽和用户距离。

可用带宽是您的网站服务器可以推送到客户端的字节的速度“限制”。当然，您可能拥有千兆光纤互联网连接或超快的5G移动连接。如果服务器达到20Mbps，那么，或者更确切地说，是这个速度的一小部分，是从该服务器到达您的设备的内容的速度。

用户距离与宇宙的终极速度限制有关：光速。有些人可能笑了。好吧，这是真的！您网站服务器上的所有数据都通过光纤连接传输，即激光通过玻璃管道引导。这占其旅行的99.9%。其他0.1%可能是铜线（ADSL/VDSL）、微波（卫星互联网、5G、WiFi）或电脉冲（以太网）。激光光不能比光速更快——实际上，它以大约0.9c，即光速的90%或略低于每秒270,000公里/每秒168,000英里速度传播。如果您的服务器在世界另一端，它需要穿越大约20,000公里，这给我们大约75毫秒。传输数据需要往返（发送请求，获取结果），所以我们有额外的150毫秒等待，直到从该服务器到用户设备有任何内容。服务器离用户越近，数据传输开始得越快。

从您的托管服务提供商那里购买更多带宽可能是可行的，但成本可能很高。更改服务器的位置可能不太实际，尤其是如果您正在服务一个比单个欧洲国家或美国州更大的地理区域。

这两个问题的解决方案是使用CDN（内容分发网络）。CDN在全球多个数据中心拥有多个称为节点的服务器。您的静态文件存储在这些节点上。当客户端请求您网站上的页面时，CDN将请求转发到您的服务器，您的服务器运行Joomla，并通过CDN节点将HTML内容发送给用户。然而，当浏览器请求您网站的静态内容——渲染页面所需的JavaScript、CSS、图像等——CDN节点已经将其缓存在那里，并从距离用户最近的节点提供这些内容。CDN还有大量的带宽，因为它们以比您的托管服务提供商便宜得多的价格批量购买，这意味着即使您的服务器不能，它们也能饱和快速千兆或5G连接。这种综合效果是网站加载速度更快。

市面上有很多CDN。我使用CloudFlare，因为它是一个集成的CDN、网站优化和网站安全服务。它提供的优化功能可以自动处理您的静态资源的压缩，如果您的服务器不支持该功能。根据您的需求，有免费层，也有许多更多功能的付费层。

使用CDN并非必要。如果您有一个将在大型地理区域内提供服务或您预计它将受到大量请求的网站，那么是的，这是一件您需要考虑的事情。为CDN付费通常比迁移到专用服务器便宜得多，也少了许多麻烦。

待续

下个月我们将讨论那些构建或自定义您网站模板的人的网站构建训练。本系列最后一篇文章将在两个月后发表，提供有关内容质量以及优化内容的技巧和窍门，不仅针对搜索引擎，也针对您的访客。在此之前，祝您快乐地构建网站！

本文的德语翻译：https://www.jug-zueri.ch/artikel/performance-tuning-in-joomla-teil-3-optimierung-von-statischen-medien

本文的西班牙语翻译：https://mejorconjoomla.com/noticias/magazine/puesta-a-punto-del-rendimiento-de-joomla-4-parte-iii-optimizacion-de-medios-estaticos