Среда, Ноябрь 22Полезные советы и секреты в мире IT и создание сайтов, а так же новости.

Как удалить из верхней части страницы код Javascript и ускорить загрузку сайта

Для сокращения времени загрузки блога WordPress, Google рекомендует переместить код Javacsript и CSS из верхней части страницы HTML вниз.

Но это не всегда просто. Одна из причин в том, что некоторые, дополнительно установленные плагины WordPress, автоматически добавляют свои скрипты в заголовок, и повлиять на этот процесс не всегда можно.

Предлагаем простое решение.
Желательно этот пример применить не на «живом» сайте. И еще надо понимать о каких функциях в примере идет речь, и где они расположены.

Первый шаг.

Добавляем следующий код в файл functions.php вашей активной темы:

/**
* Filter HTML code and leave allowed/disallowed tags only
*
* @param string $text Input HTML code.
* @param string $tags Filtered tags.
* @param bool $invert Define whether should leave or remove tags.
* @return string Filtered tags
*/
function theme_strip_tags_content ($text, $tags = '', $invert = false) {

preg_match_all ( '/<(.+?)[\s]*\/?[\s]*>/si', trim ( $tags ), $tags );
$tags = array_unique ( $tags[1] );

if ( is_array ( $tags ) AND count ( $tags ) > 0 ) {
if ( false == $invert ) {
return preg_replace ( '@<(?!(?:'. implode ( '|', $tags ) .')\b)(\w+)\b.*?>.*?@si', '', $text );
}
else {
return preg_replace ( '@<('. implode ( '|', $tags ) .')\b.*?>.*?@si', '', $text );
}
}
elseif ( false == $invert ) {
return preg_replace ( '@<(\w+)\b.*?>.*?@si', '', $text );
}

return $text;
}

/**
* Generate script tags from given source code
*
* @param string $source HTML code.
* @return string Filtered HTML code with script tags only
*/
function theme_insert_js ($source) {

$out = '';

$fragment = new DOMDocument ();
$fragment->loadHTML ( $source );

$xp = new DOMXPath ( $fragment );
$result = $xp->query ( '~~~COMM2~~~
$scripts = array ();
$scripts_src = array ();
foreach ( $result as $key => $el ) {
$src = $result->item ( $key ) ->attributes->getNamedItem ( 'src' ) ->value;
if ( ! empty ( $src ) ) {
$scripts_src[] = $src;
} else {
$type = $result->item ( $key ) ->attributes->getNamedItem ( 'type' ) ->value;
if ( empty ( $type ) ) {
$type = 'text/javascript';
}

$scripts[$type][] = $el->nodeValue;
}
}

~~~COMM3~~~foreach ( $scripts as $key => $value ) {
$out .= '<script type="~~~QUO17~~~">';

        foreach ( $value as $keyC => $valueC ) {
            $out .= "\n".$valueC;
        }

        $out .= '</script>';
}

~~~COMM4~~~foreach ( $scripts_src as $value ) {
$out .= '<script src="~~~QUO20~~~"></script>';
}
return $out;
}
Добавить код в файл functions.php

Второй шаг.

Редактируем файл header.php. Найдем функцию wp_head() и заменим ее кодом:

<?php
ob_start();
wp_head();
$themeHead = ob_get_contents();
ob_end_clean();
define( 'HEAD_CONTENT', $themeHead );
$allowedTags = '<style><link><meta><title>';
print theme_strip_tags_content ( HEAD_CONTENT, $allowedTags );
?>
Редактируем файл header.php

И в завершении, в файле footer.php перед закрывающимся тегом BODY добавьте

<?php theme_insert_js( HEAD_CONTENT ); ?>
И в завершении, в файле footer.php перед закрывающимся тегом BODY добавьте

 

Добавить комментарий

%d такие блоггеры, как: