缓慢的网站令人沮丧,而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。
1 |
pip install django_compressor |
安装后,在项目设置中将“ compressor”添加到INSTALLED_APPS。
1 2 3 4 5 6 |
# myproject/settings.py INSTALLED_APPS = [ # apps 'compressor', ] |
完美,因为我们使用的是Django的staticfiles contrib应用程序,所以我们必须将Django Compressor的文件查找器添加到STATICFILES_FINDERS设置中。 在您的settings.py文件中,添加:
1 2 3 4 5 6 7 |
# myproject/settings.py STATICFILES_FINDERS = ( 'django.contrib.staticfiles.finders.FileSystemFinder', 'django.contrib.staticfiles.finders.AppDirectoriesFinder', 'compressor.finders.CompressorFinder', ) |
现在,Django Compressor可以找到我们的静态文件。 默认情况下,Django Compressor将捆绑我们的CSS文件,但不会缩小它们。 为了最小化捆绑的CSS文件,我们需要使捆绑的文件通过CSS过滤器。 让我们配置CSS过滤器。 在您的settings.py文件中,添加:
1 2 3 4 5 6 7 8 9 |
# 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模板并添加:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{% 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这些文件要使用哪些过滤器。
注意,我在样式模板模板标记中放置了一个样式块,这会将子模板样式表放置在压缩器中以进行捆绑和缩小。
最后,让我们创建一个子模板并为其添加样式表。
1 2 3 4 5 6 7 8 9 10 11 |
{% extends 'base.html' %} {% load static %} {% block styles %} <link rel="stylesheet" href="{% static 'css/index.css' %}"> {% endblock %} {% block content %} <h1>Index</h1> {% endblock %} |
完美,现在我们可以在浏览器中对其进行测试。 保存文件,然后在浏览器中导航到localhost:8000。 在开发人员工具的“网络”标签中,您应该看到类似以下内容:
打包并缩小的CSS文件output.9a3d8d8fb748.css在第二行。 太棒了,Django压缩器将我们的两个CSS文件打包,打包并缩小了,这将减少网络请求并加快浏览器的下载和解析时间!
我们也可以使用Django Compressor对我们的JavaScript文件执行相同的操作。 在下一部分中,我们将学习如何进一步优化模板的CSS文件。
减少具有媒体属性的渲染阻止CSS
CSS文件很快就会因我们的页面不需要的规则而变得肿。 例如,如果某人在移动设备上访问您的网站,则在使用该网页之前,他们无需解析平板电脑和台式机的样式。 他们只需要移动样式。
CSS文件很快就会因我们的页面不需要的规则而变得肿。 例如,如果某人在移动设备上访问您的网站,则在使用该网页之前,他们无需解析平板电脑和台式机的样式。 他们只需要移动样式。
幸运的是,我们可以通过media属性解决此问题。 我们可以在链接标记中添加一个media属性,以在渲染之前根据屏幕大小有条件地解析样式。 其他CSS文件仍处于下载状态,但不再具有渲染阻止功能,这意味着浏览器无需等待它们加载就可以渲染网页。
我们来看一个使用我们的子模板和基本模板的示例。 在基本模板内,定义一个名为mobile_styles的新块。
1 2 3 4 5 6 7 |
<head> {% compress css %} {% block mobile_styles %} {% endblock %} {% endcompress %} </head> |
现在,让我们在子模板中添加移动样式表。
1 2 3 |
{% 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/