Приоритет видимого содержимого Wordpress

Я запускаю сайт Wordpress и создаю специальную тему. Теперь я зациклился на оптимизации для Google PageSpeed. На странице "Мобильный" показано следующее:

Рассмотрим исправление: только около 63% окончательного содержимого сверху может быть отображено с полным ответом HTML

Это появляется, так как я включил Featured Image выше моих сообщений в index.php с кодом:

<p>
 <!--?php if ( has_post_thumbnail() ) : ?--> 
 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
 <!--?php the_post_thumbnail(); ?-->
 </a>
 <!--?php endif; ?-->
</p>

Как я могу исправить проблему? Мне не кажется, что я загружаю что-то вроде боковой панели перед избранным изображением, кроме логотипа сайта. Для более глубокого понимания здесь полный код моего index.php

<!--?php get_header(); ?-->
 <div id="main">
 <div id="content">
 <!--?php if (have_posts()) : while (have_posts()) : the_post(); ?-->
 <p>
 <!--?php if ( has_post_thumbnail() ) : ?--> 
 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
 <!--?php the_post_thumbnail(); ?-->
 </a>
 <!--?php endif; ?-->
 </p>
 <h1>
 <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
 <!--?php the_title(); ?-->
 </a>
 </h1>
 <p>
 <!--?php the_content(__(' <br /-->  Weiterlesen →')); ?>
 </p>
  
 <!--?php endwhile; else: ?-->
 <p>
 <!--?php _e('Sorry, no posts matched your criteria.'); ?-->
 </p>
 <!--?php endif; ?-->
 <!--?php if (show_posts_nav()) : ?-->
 <div>
 <!--?php echo paginate_links(); ?-->
 </div>
 <!--?php endif; ?-->
 </div>
 <!--?php get_sidebar(); ?-->
 </div>
 <div id="delimiter">
 </div>
<!--?php get_footer(); ?-->

Может кто-нибудь помочь мне с этой проблемой? Что я делаю неправильно?

1 ответ

Как кто-то, кто имеет 100/100 страниц в скорости, я могу сказать вам, что чрезмерная оптимизация для скорости, вероятно, не стоит разочарований, которые вы столкнетесь с устранением проблем. Например, запустите тест Pagespeed в Википедии или на YouTube. Это лучшие сайты, и на YouTube, например, всего 50 баллов. Настоящая причина, по которой вы хотели бы улучшить эти цифры, - предоставить пользователям лучший опыт, потому что им не нужно ждать загрузки страницы.

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

На вашей странице есть 4 блокирующих ресурса script и 2 блокирующих ресурсы CSS. Это вызывает задержку в рендеринге вашей страницы. Ни одно из вышеперечисленного содержимого на вашей странице не может быть загружено без ожидания загрузки следующих ресурсов. Попробуйте отложить или асинхронно загрузить блокирующие ресурсы или встроить критические части этих ресурсов непосредственно в HTML. Удалить блокировку визуализации JavaScript: /...-includes/js/jquery/jquery.js?ver=1.11.3 /...s/jquery/jquery-migrate.min.js?ver=1.2.1 /...ghtbox/jquery.touchwipe.min.js?ver=1.4.6 /...ightbox/jquery.lightbox.min.js?ver=1.4.6 Оптимизировать CSS. Доставка: /wp-content/themes/1000PB/style.css /...ghtbox/styles/lightbox.min.css?ver=1.4.6

Ваши усилия лучше всего потратить на оптимизацию их доставки (используя async или defer для скриптов и таблиц стилей), так как они уменьшат ваш общий рейтинг страниц и повредит ранжирование вашей поисковой системы.

Чтобы ответить на ваш вопрос, вы можете проверить элементы, которые находятся в верхней части страницы, как правило, все, что можно увидеть без прокрутки вниз, чтобы увидеть их css. Пример:

img.attachment-post-thumbnail {
 border: 1px solid #******;
 padding: 3px;
}

Так что материал лучше всего включается в встроенный элемент

licensed under cc by-sa 3.0 with attribution.