Priorytetowa zawartość widoczna Wordpress

Question

Używam witryny Wordpress i utworzę niestandardowy motyw. Teraz utknąłem z optymalizacją dla Google PageSpeed. Pokazuje to następujący po stronie mobilnej:

Rozważmy Mocowanie: Tylko około 63% ostatecznej ponad-the-krotnym treści może być wykonane z pełnej odpowiedzi HTML

Wydaje odkąd” Wcześniej obejmował Featured Image powyżej moich postów na index.php z kodem:

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

Jak mogę rozwiązać ten problem? Nie wydaje mi się, że ładuję coś takiego jak pasek boczny przed polecanym obrazem, oprócz logo witryny. Aby uzyskać głębsze zrozumienie, tutaj można uzyskać pełny kod mojego indeksu.php Czy ktoś może mi pomóc w tym problemie? Co ja robię źle?

Answer 1

Jako osoba posiadająca wynik 100/100 stron, mogę powiedzieć, że nadmierna optymalizacja prędkości nie jest prawdopodobnie warta frustracji, którą napotkasz, aby rozwiązać problemy. Na przykład, uruchom test Pagespeed na Wikipedii lub YouTube. Są to najlepsze witryny, a YouTube ma na przykład tylko 50 punktów. Prawdziwym powodem, dla którego chcesz poprawić te liczby, jest zapewnienie użytkownikom lepszej jakości, ponieważ nie muszą czekać na załadowanie strony.

Twój powyżej zgięcia treści jest po prostu to, co może być wyświetlane podczas oczekiwania na dodatkowych zasobów do obciążenia:

Twoja strona ma 4 blokowania zasobów scenariusz i 2 blokujące zasoby CSS. Powoduje to opóźnienie w renderowaniu Twojej strony.
Żadna z powyższych części strony na ekranie nie może zostać wyrenderowana bez czekania na załadowanie następujących zasobów. Postaraj się odłożyć lub asynchronicznie załadować zasoby blokujące lub wstawić krytyczne fragmenty tych zasobów bezpośrednio w kodzie HTML.

Usunąć tynk blokowania JavaScript:
/...-includes/js/jquery/jquery.js?ver=1.11.3
/...s/jquery/jquery-migrate.min.js?ver=1.2 0,1
/...ghtbox/jquery.touchwipe.min.js?ver=1.4.6
/...ightbox/jquery.lightbox.min.js?ver=1.4.6

Optymalizacja CSS Dostawa następujących :
/wp-content/themes/1000PB/style.css
/...ghtbox/styles/lightbox.min.css?ver=1.4.6

Twoje wysiłki najlepiej poświęcić optymalizacji dostarczania tych, (przy użyciu skryptów i arkuszy stylów async lub defer), ponieważ obniżą one ogólny wynik stron i zaszkodzą pozycjom w wyszukiwarkach.

Aby odpowiedzieć na Twoje pytanie, możesz sprawdzić elementy, które znajdują się w górnej części strony, na ogół wszystko, co można zobaczyć bez przewijania w dół, aby zobaczyć ich css.Przykład:

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

Więc te rzeczy najlepiej jest zawarte w elemencie w nagłówku inline <style>, a następnie przeglądarka nie trzeba czekać na załadowanie style.css zanim będzie mogła pokazać stronę do użytkowników.

Jeśli potrzebujesz pomocy przy włamywaniu się do motywu Wordpress, aby zrobić pewne rzeczy, aby przyspieszyć działanie, takie jak minimalizowanie skryptów, tworzenie asynchronicznych skryptów, używanie defer, wyłączanie emoji itd., Po prostu poproś o komentarze lub prześlij kolejne pytanie i chętnie pomożemy.

polecam badań na innych stronach, aby uzyskać lepsze wyobrażenie o tym, co się dzieje. Polecam Webpagetest.org i za pomocą wykresu Waterfall powie, jakie zasoby są przy najdłuższym:

Można również użyć narzędzia, aby pomóc w tym:
CSS Tricks: Authoring Critical Above-the-Fold CSS
Critical-path (Above-the-fold) CSS Tools