M-Labs/web2019
5
0
Fork 3
Code Issues 21 Pull Requests 2 Releases Wiki Activity

Replace deferred styles with standard linking

Browse Source 
This alone improves CLS from 0.9 down to 0.005, and overall score in lighthouse to green values

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-12-23 12:25:26 +08:00
parent 68828c65d3
commit 037cadbe6d
3 changed files with 10 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
templates/_base.html
View File

@ -42,6 +42,11 @@
<link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="shortcut icon" type="image/x-icon">
<link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="{{ get_url(path='css/bootstrap-5.3.0.min.css', cachebust=true) }}" as="style">
<link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}" as="style">
{% block links %}{% endblock %}
{% block styles %}{% endblock %}
</head>
@ -126,25 +131,6 @@
{% endblock %}
<!-- ./MAIN CONTENT -->
<noscript id="deferred-main-styles">
<link rel="stylesheet" href="{{ get_url(path='css/bootstrap-5.3.0.min.css', cachebust=true) }}">
<link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}">
{% block deferred_styles %}{% endblock %}
</noscript>
<script>
var loadDeferredMainStyles = function() {
var addStylesNode = document.getElementById("deferred-main-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredMainStyles, 0); });
else window.addEventListener('load', loadDeferredMainStyles);
</script>
<!-- FOOTER -->
{% block footer %}
@ -186,7 +172,7 @@
<!-- <script src="{{ get_url(path='js/as.js', cachebust=true) }}"></script> -->
<script src="{{ get_url(path='js/jquery-3.7.0.min.js', cachebust=true) }}"></script>
<script src="{{ get_url(path='js/bootstrap-5.3.0.bundle.min.js', cachebust=true) }}"></script>
<script src="{{ get_url(path='js/bootstrap-5.3.0.bundle.min.js', cachebust=true) }}" defer></script>
<script>

3
templates/index.html
View File

@ -1,5 +1,8 @@
{% extends '_base.html' %}
{% block links %}
<link rel="preload" href="images/hero@2x.png" as="image" >
{% endblock %}
{% block hero %}

2
templates/page-place-order.html
View File

@ -1,7 +1,7 @@
{% extends 'section.html' %}
{% block deferred_styles %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ get_url(path='css/order-hardware.css', cachebust=true) }}">
{% endblock %}