更快的Django应用-优化模板,第1部分

缓慢的网站令人沮丧,而Google也不喜欢它们。 Google将于2021年5月发布一组称为Core Web Vitals的新排名指标。
Google的核心网络要素是什么?核心网络要素是一组用于确定网页加载速度的指标。这三个指标是:
内容最丰富的画图:加载网页主要内容所需的时间-理想情况下应在2.5秒以下。
首次输入延迟:页面与用户进行交互需要多长时间。这应该少于100毫秒。
累积版式移位:页面内容中意外版式移位所花费的时间;应该小于0.1毫秒。
在本教程中,您将学习如何优化Django模板以提高页面加载速度,以使网站为新的Google更新做好准备。另外,它也会使您的访客高兴!让我们开始吧!
使用Django Compressor捆绑和缩小CSS
CSS是一种阻止渲染的资产,这意味着它会阻止浏览器渲染我们的网页,直到CSS被完全下载并解析为止。
我们可以使用Django Compressor在Django模板中优化此过程,以缩小并捆绑样式表。因此,可以减小CSS的文件大小和浏览器必须发出的网络请求数量。太好了,让我们看看如何做到这一点。
首先,让我们安装和配置Django Compressor。

安装后,在项目设置中将“ compressor”添加到INSTALLED_APPS。

完美,因为我们使用的是Django的staticfiles contrib应用程序,所以我们必须将Django Compressor的文件查找器添加到STATICFILES_FINDERS设置中。 在您的settings.py文件中,添加:

现在,Django Compressor可以找到我们的静态文件。 默认情况下,Django Compressor将捆绑我们的CSS文件,但不会缩小它们。 为了最小化捆绑的CSS文件,我们需要使捆绑的文件通过CSS过滤器。 让我们配置CSS过滤器。 在您的settings.py文件中,添加:

让我们分解一下这里发生的事情。 首先,我们将COMPRESS_ENABLED设置为True,这告诉Django Compressor在开发模式下压缩CSS文件。
接下来,我们定义一个过滤器列表,以使捆绑包CSS通过。 CssAbsoluteFilter将CSS文件的URL标准化为绝对URL,而不是默认的相对路径,而CSSMinFilter缩小了捆绑的CSS。
完美,它负责配置。 让我们设置模板,并开始使用Django Compressor在下一节中缩小并捆绑CSS文件。
设置模板
在我们的Django应用中,我们创建一个模板目录,并在模板目录中创建另一个名为myapp的目录。 我们会将模板放置在模板的myapp文件夹中。
这将照顾文件夹结构。 现在创建我们的base.html模板。 创建一个base.html模板并添加:

我们加载压缩器模板标签,然后将要捆绑的文件放在{%compress%}模板标签中并缩小以使用Django Compressor。 compress template标签带有一个参数:COMPRESS_FILTERS字典中的filter键,它告诉Django Compressor这些文件要使用哪些过滤器。
注意,我在样式模板模板标记中放置了一个样式块,这会将子模板样式表放置在压缩器中以进行捆绑和缩小。
最后,让我们创建一个子模板并为其添加样式表。

完美,现在我们可以在浏览器中对其进行测试。 保存文件,然后在浏览器中导航到localhost:8000。 在开发人员工具的“网络”标签中,您应该看到类似以下内容:

 

 

打包并缩小的CSS文件output.9a3d8d8fb748.css在第二行。 太棒了,Django压缩器将我们的两个CSS文件打包,打包并缩小了,这将减少网络请求并加快浏览器的下载和解析时间!
我们也可以使用Django Compressor对我们的JavaScript文件执行相同的操作。 在下一部分中,我们将学习如何进一步优化模板的CSS文件。
减少具有媒体属性的渲染阻止CSS
CSS文件很快就会因我们的页面不需要的规则而变得肿。 例如,如果某人在移动设备上访问您的网站,则在使用该网页之前,他们无需解析平板电脑和台式机的样式。 他们只需要移动样式。
幸运的是,我们可以通过media属性解决此问题。 我们可以在链接标记中添加一个media属性,以在渲染之前根据屏幕大小有条件地解析样式。 其他CSS文件仍处于下载状态,但不再具有渲染阻止功能,这意味着浏览器无需等待它们加载就可以渲染网页。
我们来看一个使用我们的子模板和基本模板的示例。 在基本模板内,定义一个名为mobile_styles的新块。

现在,让我们在子模板中添加移动样式表。

如果我们在浏览器中进行测试,我们会看到仍然下载了移动样式表和桌面样式表,但是只有一个是渲染阻止的,这取决于我们的屏幕尺寸。 如果我们调整浏览器窗口的大小,我们将看到移动样式表会影响520px以下的屏幕尺寸。
完美的是,我们现在正在加载较少的渲染阻止CSS,这将改善我们最大的内容绘画和首次输入延迟指标。
结论
恭喜您完成了本教程! 现在,您应该知道如何使用Django Compressor优化Django模板的CSS和JavaScript,并减少渲染阻止CSS。
在下一个教程中,我们将研究如何在Django模板中优化图像-图像对页面加载速度性能有很大影响。
希望本教程对您有所帮助。 如果您有任何疑问,请在下面留下评论,我会尽力帮助您!

https://engineertodeveloper.com/faster-django-apps-optimizing-templates-part-1/