[mod] simple theme - improve Cumulative Layout Shift (CLS)

1. request `searxng.head.min.js` to add & remove some CSS classes from html tags,
   as soon as possible / best before any other CSS rules are loaded and applied.
2. request `searxng.min.css`
3. request `js/searxng.min.js`
4. request other styles
5. request favicon and other stuff

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
This commit is contained in:
Markus Heiser 2021-12-04 13:32:03 +01:00
parent 059f4157fa
commit eecc36aad9

View file

@ -12,15 +12,21 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>{% block title %}{% endblock %}{{ instance_name }}</title> <title>{% block title %}{% endblock %}{{ instance_name }}</title>
{% block meta %}{% endblock %} {% block meta %}{% endblock %}
<script src="{{ url_for('static', filename='js/searxng.head.min.js') }}"></script>
{% if rtl %} {% if rtl %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/searxng-rtl.min.css') }}" type="text/css" media="screen" /> <link rel="stylesheet" href="{{ url_for('static', filename='css/searxng-rtl.min.css') }}" type="text/css" media="screen" />
{% else %} {% else %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/searxng.min.css') }}" type="text/css" media="screen" /> <link rel="stylesheet" href="{{ url_for('static', filename='css/searxng.min.css') }}" type="text/css" media="screen" />
{% endif %} {% endif %}
<script src="{{ url_for('static', filename='js/searxng.min.js') }}"
data-method="{{ method or 'POST' }}"
data-autocompleter="{% if autocomplete %}true{% else %}false{% endif %}"
data-search-on-category-select="{{ 'true' if 'plugins/js/search_on_category_select.js' in scripts else 'false'}}"
data-infinite-scroll="{{ 'true' if 'plugins/js/infinite_scroll.js' in scripts else 'false' }}"
data-hotkeys="{{ 'true' if 'plugins/js/vim_hotkeys.js' in scripts else 'false' }}"
data-static-path="{{ url_for('static', filename='themes/simple') }}/"
data-translations="{{ translations }}"></script>
{% block styles %}{% endblock %} {% block styles %}{% endblock %}
<!--[if gte IE 9]>-->
<script src="{{ url_for('static', filename='js/searxng.head.min.js') }}"></script>
<!--<![endif]-->
{% block head %} {% block head %}
<link title="{{ instance_name }}" type="application/opensearchdescription+xml" rel="search" href="{{ opensearch_url }}"/> <link title="{{ instance_name }}" type="application/opensearchdescription+xml" rel="search" href="{{ opensearch_url }}"/>
{% endblock %} {% endblock %}
@ -53,15 +59,5 @@
<a href="{{ get_setting('general.contact_url') }}">{{ _('Contact instance maintainer') }}</a>{% endif %} <a href="{{ get_setting('general.contact_url') }}">{{ _('Contact instance maintainer') }}</a>{% endif %}
</p> </p>
</footer> </footer>
<!--[if gte IE 9]>-->
<script src="{{ url_for('static', filename='js/searxng.min.js') }}"
data-method="{{ method or 'POST' }}"
data-autocompleter="{% if autocomplete %}true{% else %}false{% endif %}"
data-search-on-category-select="{{ 'true' if 'plugins/js/search_on_category_select.js' in scripts else 'false'}}"
data-infinite-scroll="{{ 'true' if 'plugins/js/infinite_scroll.js' in scripts else 'false' }}"
data-hotkeys="{{ 'true' if 'plugins/js/vim_hotkeys.js' in scripts else 'false' }}"
data-static-path="{{ url_for('static', filename='themes/simple') }}/"
data-translations="{{ translations }}"></script>
<!--<![endif]-->
</body> </body>
</html> </html>