распараллеливания загрузки CSS-файлов

S7

56

skynet777

15 августа 2013, 09:05

3932

Добрый день.

Оптимизируя по советам pagespeed добился 90\100 пунктов.

Осталось пару незначительных улучшений,которые не смог решить самостоятельно:

1.Optimize CSS delivery for the following resources:

Следующие встроенные блоки скриптов обнаружены в http://mysite.ru/ между внешним CSS-файлом и другим ресурсом. Для распараллеливания загрузки поместите встроенный скрипт перед внешним CSS-файлом или после следующего ресурса.

Встроенный блок скриптов #1

Следующие внешние CSS-файлы включаются после внешнего файла JavaScript в http://mysite.ru/ . Для распараллеливания загрузки CSS-файлов следует всегда включать внешние файлы CSS перед внешними файлами JavaScript.

http://content.zemanta.com/.../vertical-m.css?...

http://mysite.ru/ .../shutter-reloaded.css?...

http://mysite.ru/ .../style-blue.css

2.Remove render-blocking JavaScript:

http://mysite.ru/ /js/jquery/jquery.js?ver=1.10.2

http://mysite.ru/ js/jquery/jquery-migrate.min.js?ver=1.2.1

http://mysite.ru/ themes/Sahifa-Theme/sahifa/js/tie-scripts.js?ver=3.6

Поиск по форуму ничего не дал,в гугле тоже не нашел дельных советов(или не разобрался).Был бы признателен,если бы ув. форумчани помогли (ну или ткнули носом,где уже обсуждалось это,если пропустил).

Заранее спасибо.

S7

56

skynet777

16 августа 2013, 13:12

#1

Нет желающих помочь ?

IL

435

ivan-lev

16 августа 2013, 14:12

#2

skynet777:
Следующие внешние CSS-файлы включаются после внешнего файла JavaScript в http://mysite.ru/ . Для распараллеливания загрузки CSS-файлов следует всегда включать внешние файлы CSS перед внешними файлами JavaScript.

CSS по коду выше поднять

skynet777:
2.Remove render-blocking JavaScript:

js-файлы убрать "поглубже"

https://developers.google.com/speed/docs/insights/BlockingJS

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )

532

Vladimir

16 августа 2013, 15:29

#3

skynet777:

http://content.zemanta.com/.../vertical-m.css?...
http://mysite.ru/ .../shutter-reloaded.css?...
http://mysite.ru/ .../style-blue.css
2.Remove render-blocking JavaScript:
http://mysite.ru/ /js/jquery/jquery.js?ver=1.10.2
http://mysite.ru/ js/jquery/jquery-migrate.min.js?ver=1.2.1
http://mysite.ru/ themes/Sahifa-Theme/sahifa/js/tie-scripts.js?ver=3.6

1.

http://content.zemanta.com/.../vertical-m.css?...

http://mysite.ru/ .../shutter-reloaded.css?...

http://mysite.ru/ .../style-blue.css

Слить в один файл и оптимизировать, есть онлайн оптимизаторы

2.

http://mysite.ru/ /js/jquery/jquery.js?ver=1.10.2

http://mysite.ru/ js/jquery/jquery-migrate.min.js?ver=1.2.1

Загрузить с Gугла

1

Аэройога ( https://vk.com/aeroyogadom ) Йога в гамаках ( https://vk.com/aero_yoga ) Аэройога обучение ( https://aeroyoga.ru ) и просто фото ( https://weandworld.com )

272

Алексей Барыкин

17 августа 2013, 06:27

#4

CSS и JS сливать в один файл и сжимать - проку больше будет.

Библиотеки типа JQUERY и т.д. грузить с CDN (google, yandex, microsoft, cdnjs и т.д.)

https://adminbook.ru/

S7

56

skynet777

17 августа 2013, 09:33

#5

Алексей Барыкин, Nadejda, ivan-lev,

Спасибо за Ваши ответы.

ivan-lev

"CSS по коду выше поднять"

А есть мануал для блондинок или пример?

Nadejda

"Загрузить с Gугла"

Я так понял можно действовать по этому мануалу ?

http://maxtop.org/optimizaciya-zagruzki-sajta-zagruzka-jquery-s-cdn/

Если,кто-то решит помочь более детальными советами или может "развежать" - буду очень признателен.Хоть и понимаю,что люди за это деньги платят,а я тут бесплатно прошу помощи.

В любом случае спасибо еще раз всем откликнувшимся.Увы,но поднять репутацию не могу,так как читаю форум давно,а вот надобности регистрироваться не было до этого момента.

129

Veterok2009

17 августа 2013, 10:07

#6

skynet777:

ivan-lev
"CSS по коду выше поднять"
А есть мануал для блондинок или пример?

Строку с подключением ксс поставить выше по коду. Например, она была на 20 строке, поднять на 10 (но не выйти за пределы head'a.

1076

Mik Foxi

17 августа 2013, 10:30

#7

Алексей Барыкин:
CSS и JS сливать в один файл и сжимать - проку больше будет.
Библиотеки типа JQUERY и т.д. грузить с CDN (google, yandex, microsoft, cdnjs и т.д.)

+1.

стили объединить в один, чтобы сократить количество запросов к серверу, а значит ускорить загрузку.

и разметить инклуд стилей в начале кода (перед body), чтобы страница сразу отрисовывалась красиво и человекочитаемо.

простые жабаскриптики объединить в один, опять же для ускорения загрузки и сокращения количества обращений к серверу. разместить инклуд в самом конце html кода страницы, там им самое место, чтоб не мешать загрузке страницы.

jquery и прочие стандартные библиотеки грузить с cdn и прочих внешних общепринятых мест.

Идеальнее схемы не бывает 🍿

Антибот, антиспам, веб файрвол, защита от накрутки поведенческих: https://antibot.cloud/ + партнерка, до 40$ с продажи.

218

DiAksID

17 августа 2013, 10:45

#8

foxi:
... Идеальнее схемы не бывает 🍿

ага 😂 а потом получить от того же pagespeed замечание типа "вставка небольших CSS/JS кодов непосредственно в тело страницы значительно ускоряет загрузку".

бездумно лепить всё подряд в один файл и грузить на все страницы не меньший маразм, чем отсутствие оптимизации...

show must go on !!!...

S7

56

skynet777

17 августа 2013, 11:11

#9

foxi,

"и разметить инклуд стилей в начале кода (перед body), чтобы страница сразу отрисовывалась красиво и человекочитаемо."

"Строку с подключением ксс поставить выше по коду. Например, она была на 20 строке, поднять на 10 (но не выйти за пределы head'a."

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

Я так понимаю это нужно сделать в header.php ?

Не совсем понятно правда ,что поднять.Вот код header'а.

<!DOCTYPE html>
<html <?php language_attributes(); ?> prefix="og: http://ogp.me/ns#">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/>
<?php wp_head(); ?>
</head>
<?php global $is_IE ?>
<body id="top" <?php body_class(); ?>>
	<div class="background-cover"></div>
	<div class="wrapper">
		<header>
			<?php if(!tie_get_option( 'top_menu' )): ?>
			<div class="top-nav">
			<?php if(tie_get_option( 'top_date' )):
				if( tie_get_option('todaydate_format') ) $date_format = tie_get_option('todaydate_format');
				else $date_format = 'l ,  j  F Y';
			?>
				<span class="today-date"><?php  echo date_i18n( $date_format , current_time( 'timestamp' ) ); ?></span><?php endif; ?>
					
				<?php wp_nav_menu( array( 'container_class' => 'top-menu', 'theme_location' => 'top-menu', 'fallback_cb' => 'tie_nav_fallback'  ) ); ?>

	<?php if(tie_get_option( 'top_right' ) == 'search'): ?>
					<div class="search-block">
						<form method="get" id="searchform" action="<?php echo home_url(); ?>/">
							<input class="search-button" type="submit" value="<?php if( !$is_IE ) _e( 'Search' , 'tie' ) ?>" />	
							<input type="text" id="s" name="s" value="<?php _e( 'РџРѕРёСЃРє...' , 'tie' ) ?>" onfocus="if (this.value == '<?php _e( 'РџРѕРёСЃРє...' , 'tie' ) ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e( 'Search...' , 'tie' ) ?>';}"  />
						</form>
					</div><!-- .search-block /-->
	<?php elseif( tie_get_option('top_right') == 'social' ):
		tie_get_social( 'yes' , 16 , 'tooldown' ); ?>
	<?php endif; ?>
			</div><!-- .top-menu /-->
			<?php endif; ?>

		<div class="header-content">
<?php $logo_margin =''; if( tie_get_option( 'logo_margin' )) $logo_margin = ' style="margin-top:'.tie_get_option( 'logo_margin' ).'px"';  ?>
			<div class="logo"<?php echo $logo_margin ?>>
			<?php if( !is_singular() ) echo '<h1>'; else echo '<h2>'; ?>
<?php if( tie_get_option('logo_setting') == 'title' ): ?>
				<a  href="<?php echo home_url() ?>/"><?php bloginfo('name'); ?></a>
				<span><?php bloginfo( 'description' ); ?></span>
				<?php else : ?>
				<?php if( tie_get_option( 'logo' ) ) $logo = tie_get_option( 'logo' );
						else $logo = get_stylesheet_directory_uri().'/images/logo.png';
				?>
				<a title="<?php bloginfo('name'); ?>" href="<?php echo home_url(); ?>/">
					<img src="<?php echo $logo ; ?>" alt="<?php bloginfo('name'); ?>" /><strong><?php bloginfo('name'); ?> <?php bloginfo( 'description' ); ?></strong>
				</a>
<?php endif; ?>
			<?php if( !is_singular() ) echo '</h1>'; else echo '</h2>'; ?>
			</div><!-- .logo /-->
			<?php tie_banner('banner_top' , '<div class="ads-top">' , '</div>' ); ?>
			<div class="clear"></div>
		</div>	
		<?php $stick = ''; ?>
		<?php if( tie_get_option( 'stick_nav' ) ) $stick = ' class="fixed-enabled"' ?>
			<nav id="main-nav"<?php echo $stick; ?>>
				<?php wp_nav_menu( array( 'container_class' => 'main-menu', 'theme_location' => 'primary' ,'fallback_cb' => 'tie_nav_fallback'  ) ); ?>
				<?php if(tie_get_option( 'random_article' )): ?>
				<a href="<?php echo home_url(); ?>/?tierand" class="random-article ttip" title="<?php _e( 'Random Article' , 'tie' ) ?>"><?php _e( 'Random Article' , 'tie' ) ?></a>
				<?php endif ?>
			</nav><!-- .main-nav /-->

		</header><!-- #header /-->
	
	<?php tie_include( 'breaking-news' ); // Get Breaking News template ?>	
<?php 
$sidebar = '';
if( tie_get_option( 'sidebar_pos' ) == 'left' ) $sidebar = ' sidebar-left';
if( is_singular() ){
	$get_meta = get_post_custom($post->ID);
	
	if( !empty($get_meta["tie_sidebar_pos"][0]) ){
		$sidebar_pos = $get_meta["tie_sidebar_pos"][0];

		if( $sidebar_pos == 'left' ) $sidebar = ' sidebar-left';
		elseif( $sidebar_pos == 'full' ) $sidebar = ' full-width';
		elseif( $sidebar_pos == 'right' ) $sidebar = ' sidebar-right';
	}
}
?>
	<div id="main-content" class="container<?php echo $sidebar ; ?>">

А вот эту строчку я так понял можно удалить ?!

1076

Mik Foxi

17 августа 2013, 11:47

#10

DiAksID:
ага 😂 а потом получить от того же pagespeed замечание типа "вставка небольших CSS/JS кодов непосредственно в тело страницы значительно ускоряет загрузку".

запихать все в код страницы ускорит загрузку человеком (браузером) относительно того, если бы подгружалось 100500 внешних файлов с этими стилями и скриптами.

Но 80-90% посещаемости сайта (посмотрите в логи вебсервера) это боты, которым не нужны ваши скрипты и стили, но им приходится постоянно загружать лишние объемы, что им не в кайф, а также не в кайф вам и вашему хостеру, т.к. это лишний бесполезный расход трафика и прочих ресурсов сервера.

DiAksID:
бездумно лепить всё подряд в один файл и грузить на все страницы не меньший маразм, чем отсутствие оптимизации...

вот именно, не стоит слепо делать то, что советуют pagespeed, w3.org и прочие советчики, они советуют только то, что будет удобно им. не стоит все таблицы заменять дивами с html5, и прочие заморочки.

к примеру предложение в пейджспиде сжать картинки 😂 и пофиг, что юзеру будет уродство, зато гуглу качать меньше, тоже самое сжатие страницы, гуглу главное чтоб объем переданных данных был меньше, типа жми с level 100500, его не волнует что сжатие страницы выше 4 - это заметно увеличенная нагрузка на сервер, а значит лишние затраты у хостера и владельца сайта.

В общем взгляд на оптимизацию под гугл, под посетителя и под владельца сайта - это 3 разные оптимизации.

Упал доход Аномальные отказы в Самсунг Помощь в фильтрации ботов

Зачем быть уникальным в мире, где все можно скопировать

Курс биткоина превысил $50 тысяч