9
更快的Django应用-优化模板，第1部分
source link: https://www.mindg.cn/?p=2834
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
更快的Django应用-优化模板，第1部分
缓慢的网站令人沮丧，而Google也不喜欢它们。 Google将于2021年5月发布一组称为Core Web Vitals的新排名指标。
Google的核心网络要素是什么？核心网络要素是一组用于确定网页加载速度的指标。这三个指标是：
内容最丰富的画图：加载网页主要内容所需的时间-理想情况下应在2.5秒以下。
首次输入延迟：页面与用户进行交互需要多长时间。这应该少于100毫秒。
累积版式移位：页面内容中意外版式移位所花费的时间；应该小于0.1毫秒。
在本教程中，您将学习如何优化Django模板以提高页面加载速度，以使网站为新的Google更新做好准备。另外，它也会使您的访客高兴！让我们开始吧！
首次输入延迟：页面与用户进行交互需要多长时间。这应该少于100毫秒。
累积版式移位：页面内容中意外版式移位所花费的时间；应该小于0.1毫秒。
在本教程中，您将学习如何优化Django模板以提高页面加载速度，以使网站为新的Google更新做好准备。另外，它也会使您的访客高兴！让我们开始吧！
使用Django Compressor捆绑和缩小CSS
CSS是一种阻止渲染的资产，这意味着它会阻止浏览器渲染我们的网页，直到CSS被完全下载并解析为止。
CSS是一种阻止渲染的资产，这意味着它会阻止浏览器渲染我们的网页，直到CSS被完全下载并解析为止。
我们可以使用Django Compressor在Django模板中优化此过程，以缩小并捆绑样式表。因此，可以减小CSS的文件大小和浏览器必须发出的网络请求数量。太好了，让我们看看如何做到这一点。
首先，让我们安装和配置Django Compressor。
pip install django_compressor
# myproject/settings.py
INSTALLED_APPS = [
# apps
'compressor',
# myproject/settings.py
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'compressor.finders.CompressorFinder',
# myproject/settings.py
COMPRESS_ENABLED = True
COMPRESS_FILTERS = {
"css": [
'compressor.filters.css_default.CssAbsoluteFilter',
'compressor.filters.cssmin.CSSMinFilter',
让我们分解一下这里发生的事情。 首先，我们将COMPRESS_ENABLED设置为True，这告诉Django Compressor在开发模式下压缩CSS文件。
接下来，我们定义一个过滤器列表，以使捆绑包CSS通过。 CssAbsoluteFilter将CSS文件的URL标准化为绝对URL，而不是默认的相对路径，而CSSMinFilter缩小了捆绑的CSS。
完美，它负责配置。 让我们设置模板，并开始使用Django Compressor在下一节中缩小并捆绑CSS文件。
设置模板
在我们的Django应用中，我们创建一个模板目录，并在模板目录中创建另一个名为myapp的目录。 我们会将模板放置在模板的myapp文件夹中。
在我们的Django应用中，我们创建一个模板目录，并在模板目录中创建另一个名为myapp的目录。 我们会将模板放置在模板的myapp文件夹中。
这将照顾文件夹结构。 现在创建我们的base.html模板。 创建一个base.html模板并添加：
{% load compress static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% compress css %}
<!-- Global StyleSheets -->
<link rel="stylesheet" href="{% static 'css/base.css' %}">
{% block styles %}
<!-- Child Template StyleSheets Go Here -->
{% endblock %}
{% endcompress %}
<title>Tutorial</title>
</head>
</html>
我们加载压缩器模板标签，然后将要捆绑的文件放在{％compress％}模板标签中并缩小以使用Django Compressor。 compress template标签带有一个参数：COMPRESS_FILTERS字典中的filter键，它告诉Django Compressor这些文件要使用哪些过滤器。
注意，我在样式模板模板标记中放置了一个样式块，这会将子模板样式表放置在压缩器中以进行捆绑和缩小。
最后，让我们创建一个子模板并为其添加样式表。
{% extends 'base.html' %}
{% load static %}
{% block styles %}
<link rel="stylesheet" href="{% static 'css/index.css' %}">
{% endblock %}
{% block content %}
<h1>Index</h1>
{% endblock %}
打包并缩小的CSS文件output.9a3d8d8fb748.css在第二行。 太棒了，Django压缩器将我们的两个CSS文件打包，打包并缩小了，这将减少网络请求并加快浏览器的下载和解析时间！
我们也可以使用Django Compressor对我们的JavaScript文件执行相同的操作。 在下一部分中，我们将学习如何进一步优化模板的CSS文件。
减少具有媒体属性的渲染阻止CSS
CSS文件很快就会因我们的页面不需要的规则而变得肿。 例如，如果某人在移动设备上访问您的网站，则在使用该网页之前，他们无需解析平板电脑和台式机的样式。 他们只需要移动样式。
CSS文件很快就会因我们的页面不需要的规则而变得肿。 例如，如果某人在移动设备上访问您的网站，则在使用该网页之前，他们无需解析平板电脑和台式机的样式。 他们只需要移动样式。
幸运的是，我们可以通过media属性解决此问题。 我们可以在链接标记中添加一个media属性，以在渲染之前根据屏幕大小有条件地解析样式。 其他CSS文件仍处于下载状态，但不再具有渲染阻止功能，这意味着浏览器无需等待它们加载就可以渲染网页。
我们来看一个使用我们的子模板和基本模板的示例。 在基本模板内，定义一个名为mobile_styles的新块。
<head>
{% compress css %}
{% block mobile_styles %}
{% endblock %}
{% endcompress %}
</head>
{% block mobile_styles %}
<link rel="stylesheet" href="{% static 'css/index-mobile.css' %}" media="(max-width: 520px)">
{% endblock %}
如果我们在浏览器中进行测试，我们会看到仍然下载了移动样式表和桌面样式表，但是只有一个是渲染阻止的，这取决于我们的屏幕尺寸。 如果我们调整浏览器窗口的大小，我们将看到移动样式表会影响520px以下的屏幕尺寸。
完美的是，我们现在正在加载较少的渲染阻止CSS，这将改善我们最大的内容绘画和首次输入延迟指标。
结论
恭喜您完成了本教程！ 现在，您应该知道如何使用Django Compressor优化Django模板的CSS和JavaScript，并减少渲染阻止CSS。
恭喜您完成了本教程！ 现在，您应该知道如何使用Django Compressor优化Django模板的CSS和JavaScript，并减少渲染阻止CSS。
在下一个教程中，我们将研究如何在Django模板中优化图像-图像对页面加载速度性能有很大影响。
希望本教程对您有所帮助。 如果您有任何疑问，请在下面留下评论，我会尽力帮助您！
https://engineertodeveloper.com/faster-django-apps-optimizing-templates-part-1/
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK