Table of Contents

Задача

Мне захотелось ускорить мою DokuWiki, чтобы она быстрее открывалась. Один из способов сделать это - отключить загрузку некритичных библиотек и скриптов. В частности - JQuery. Я буду отключать загрузку JQuery для незалогиненных пользователей (гостей), которые имеют права только на чтение статей.

Решение

Библиотеки JQuery загружаются кодом из файлика ./inc/template.php:

// load jquery
$jquery = getCdnUrls();
foreach($jquery as $src) {
    $head['script'][] = array(
        'type' => 'text/javascript', 'charset' => 'utf-8', '_data' => '', 'src' => $src
    );
}

Уровень привилегий пользователя можно определить с помощью функции auth_quickaclcheck($ID), которая возвращает число от 1 до 255. Гости с правом чтения имеют значение уровня привилегий 1. Вот кусочек из inc/auth.php:

define('AUTH_NONE', 0);
define('AUTH_READ', 1);
define('AUTH_EDIT', 2);
define('AUTH_CREATE', 4);
define('AUTH_UPLOAD', 8);
define('AUTH_DELETE', 16);
define('AUTH_ADMIN', 255);

Соответственно, для достижения желаемого нам надо обернуть код загрузки JQuery в условие, которое проверит уровень привилегий пользователя:

if(auth_quickaclcheck($ID) > 1){
    // load jquery
    $jquery = getCdnUrls();
    foreach($jquery as $src) {
        $head['script'][] = array(
            'type' => 'text/javascript', 'charset' => 'utf-8', '_data' => '', 'src' => $src
        );
    }
}

Теперь у незалогиненных пользователей мой сайтик грузится на ~30% быстрее. Без существенных потерь в функциональности и качестве отображения.

Делаем загрузку js асинхронной

Многие скирипты можно загружать ассинхронно, тем самым значительно ускоряя отрисовку.

./lib/plugins/ckgedit/action/meta.php

Функцию loadScript приводим к такому виду (вставляем слово async в строку <script type=“text/javascript” async> ):

function loadScript(Doku_Event $event) {
  echo <<<SCRIPT

    <script type="text/javascript" async>
    //<![CDATA[ 
    function LoadScript( url )
    {
     document.write( '<scr' + 'ipt type="text/javascript" src="' + url + '"><\/scr' + 'ipt>' ) ;        

    }
   function LoadScriptDefer( url )
    {
     document.write( '<scr' + 'ipt type="text/javascript" src="' + url + '" defer><\/scr' + 'ipt>' ) ;        

    }
//]]> 

./inc/template.php

В функции _tpl_metaheaders_action, которая генерирует метатеги, которые, в свою очередь загружают скрипты, нужно добавить проверку привилегий пользователя и для незалогиненных пользователей добавить слово async в строке:

echo '>', $attr['_data'], '</', $tag, '>'; 

То есть функция будет выглядеть так:

function _tpl_metaheaders_action($data) {
    foreach($data as $tag => $inst) {
        if($tag == 'script') {
            echo "<!--[if gte IE 9]><!-->\n"; // no scripts for old IE
        }
        foreach($inst as $attr) {
            if ( empty($attr) ) { continue; }
            echo '<', $tag, ' ', buildAttributes($attr);
            if(isset($attr['_data']) || $tag == 'script') {
                if($tag == 'script' && $attr['_data'])
                    $attr['_data'] = "/*<![CDATA[*/".
                        $attr['_data'].
                        "\n/*!]]>*/";
                if(auth_quickaclcheck($ID) > 1){
                  echo '>', $attr['_data'], '</', $tag, '>';
                } else {
                  echo ' async>', $attr['_data'], '</', $tag, '>';
                }
            } else {
                echo '/>';
            }
            echo "\n";
        }
        if($tag == 'script') {
            echo "<!--<![endif]-->\n";
        }
    }
}

Таким образом, для незалогиненных пользователей страница будет загружаться гораздо быстрее, но иногда возможны несущественные артефакты из-за ассинхронной загрузки скриптов.

bootstrap3 Template Optimization

Jquery not loaded

После очередного обновления DokuWiki сломался темплейт bootstrap3 - перестали работать выпадающие меню, а отладочная консоль браузера говорила, что нету jquery.
Оказалось, что нужно пойти в настройки (doku.php?do=admin&page=config) и выключить (снять галочку) defer_js (или внести те же изменения в config.php вручную).

Font Optimization

https://web.dev/font-display/?utm_source=lighthouse&utm_medium=unknown
В файлик ./lib/tpl/bootstrap3/assets/fonts/united.fonts.css нужно вставить свойство:

font-display: swap