Если вы регулярно посещаете Martech Zone, вы, вероятно, заметили заметную разницу в производительности WordPress за последний год. Я ускоряю WordPress, чтобы улучшить мой пользовательский опыт (UX), а также это важный фактор ранжирования в органическом поиске (SEO), который доминирует над общим трафиком моего сайта.

В то же время я использовал Ezoic для увеличения монетизации за счет оптимизации рекламы. Платформа Ezoic имеет фантастический набор инструментов под названием Прыгать который анализирует ваш сайт, чтобы определить, что замедляет его работу и какие альтернативы обеспечивают аналогичную функциональность. Одна проблема, с которой я столкнулся на своем сайте, распространенная среди сайтов WordPress, заключалась в загрузке шрифтов Google.

29% доменов, использующих Google Fonts, работают значительно хуже чем средний сайт.

эзоик

Независимо от того, использует ли ваш сайт шрифты Google или нет, он, скорее всего, будет загружаться… несколько раз. Вот разбивка:

• Ядро WordPress предварительно загружает домен Google Fonts. Я объясню это позже.
• Темы WordPress часто предлагают шрифты Google для настройки ваших тем. Независимо от того, используете вы их или нет, они все равно могут быть загружены.
• Плагины WordPress часто используют шрифты Google. Опять же, загружены ли они уже, используете ли вы их или нет… они могут быть загружены.
• Другие инструменты, такие как Google ReCaptcha, загружают шрифты Google.

У Leap есть отличная статья о Удаление шрифтов Google с сайта WordPress добавив плагин или код в вашу тему functions.php файл. Ничего из этого не работало для моего сайта, поэтому я написал свою собственную функцию:

// Remove reference to fonts.googleapis.com
function remove_google_fonts($src, $handle) {
    if (strpos($src, 'fonts.googleapis.com') !== false) {
        $src = false;
    }
    return $src;
}
add_filter('style_loader_src', 'remove_google_fonts', 9999, 2);

Я продолжал тестировать Leap после того, как он снова проверил мой сайт, и они продолжили определять строку кода, которая замедляла работу сайта.

<link rel="dns-prefetch" href="//fonts.googleapis.com

Подсказка, которая мне была нужна, была в атрибуте rel… dns-prefetch.

Что такое предварительная обработка ДНК?

Предварительная выборка DNS — это метод, используемый веб-браузерами для предварительного разрешения доменных имен до того, как они потребуются. Это включает в себя получение информации DNS для внешних ресурсов, таких как сценарии, таблицы стилей, изображения или шрифты, чтобы уменьшить задержку и сократить время загрузки страницы.

WordPress включает предварительную загрузку DNS как часть своего основного кода для повышения производительности веб-сайтов, созданных на платформе. Первоначально загружая информацию DNS для внешних ресурсов, WordPress стремится оптимизировать загрузку этих ресурсов, когда браузер их запрашивает. Это может обеспечить более быстрый и плавный просмотр для посетителей сайта WordPress.

WordPress генерирует выходные данные HTML и автоматически добавляет предложения предварительной выборки DNS по мере их появления. <link rel="dns-prefetch" href=" теги для определенных внешних ресурсов. Эти подсказки предписывают браузеру заранее разрешить DNS указанного доменного имени, чтобы, когда браузер встречает запрос для этого домена, он уже имел доступный разрешенный IP-адрес. Это устраняет необходимость в том, чтобы браузер выполнял поиск DNS во время запроса, сокращая общее время загрузки страницы.

Включив предварительную выборку DNS в свой основной код, WordPress стремится оптимизировать производительность веб-сайта за счет уменьшения задержки поиска DNS и повышения скорости загрузки внешних ресурсов.

Что такое ДНК-праймер?

Предварительная привязка DNS — это метод оптимизации веб-производительности, который позволяет браузерам подключаться к DNS сервера и предварительно устанавливать TCP-квитирование еще до того, как будет запрошен фактический ресурс. Это помогает еще больше сократить задержку, устраняя время на разрешение DNS и установку соединения, когда требуется ресурс.

WordPress включает предварительную привязку DNS как часть своего основного кода для дальнейшей оптимизации загрузки внешних ресурсов и повышения производительности сайта. Он добавляет предложения перед подключением в форме <link rel="preconnect" href=" теги, сообщающие браузеру о необходимости заранее подключиться к указанному доменному имени.

WordPress генерирует выходные данные в формате HTML и автоматически включает предварительные ссылки на определенные внешние ресурсы, такие как шрифты, таблицы стилей, скрипты или другие сторонние сервисы. Эти подсказки информируют браузер о том, что он запускает разрешение DNS и рукопожатие TCP для указанного доменного имени, обеспечивая более быстрые соединения при выполнении реальных запросов ресурсов.

Используя предварительное подключение DNS, WordPress стремится уменьшить задержку, связанную с разрешением DNS и настройкой подключения, что приводит к более быстрой и эффективной загрузке ресурсов. Этот метод оптимизации помогает повысить производительность веб-сайта и сделать просмотр более плавным для посетителей сайта WordPress.

Они необходимы?

Если вы используете ресурсы, которые WordPress предварительно загружает или на которые ссылается, имеет смысл загрузить их на свой сайт. Но странно, что он загружается независимо от того, используете ли вы ресурсы терминала, такие как Google Fonts или любой другой ресурс.

WordPress добавил этот код, чтобы ускорить работу, но он излишне использует ресурсы браузера, если он не используется! В случае с Martech Zone на сайте есть два таких ресурса:

<link rel=dns-prefetch href=//fonts.googleapis.com/>
<link rel=dns-preconnect href=//fonts.gstatic.com/>

Мне пришлось провести некоторое исследование, но я обнаружил, что существует вызов API WordPress, который можно обновить, чтобы удалить ресурсы DNS Prefetch или DNS Preconnect для URL-адресов, которые не нужны. Вот пример кода, который вы можете добавить в свою тему functions.php файл:

function remove_dns_prefetch( $hints, $relation_type ) {
    $excluded_urls = array(
        'dns-prefetch' => array(
            '//fonts.googleapis.com/',
            '//example1.com/',
        ),
        'preconnect'    => array(
            '//fonts.gstatic.com/',
            '//example2.com/',
        ),
    );

    if ( isset( $excluded_urls[ $relation_type ] ) ) {
        $excluded_prefetch_urls = $excluded_urls[ $relation_type ];

        foreach ( $hints as $index => $hint ) {
            foreach ( $excluded_prefetch_urls as $excluded_url ) {
                if ( false !== strpos( $hint, $excluded_url ) ) {
                    unset( $hints[ $index ] );
                    break;
                }
            }
        }
    }

    return $hints;
}

add_filter( 'wp_resource_hints', 'remove_dns_prefetch', 10, 2 );

Как видите, вам нужно будет обновить код вашего сайта для URL-адресов, которые вы не хотите изначально загружать или к которым нужно подключаться.

Помните, что это не важный улучшения скорости сайта… но если на вашем сайте много таких проблем, миллисекунды могут легко складываться в секунды во время загрузки, и каждая мелочь имеет значение!