Görünür İçeriğe Öncelik Ver Wordpress

Question

Bir Wordpress sitesi çalıştırıyorum ve özel bir tema oluşturdum. Şimdi Google PageSpeed için optimize etmem gerekiyor. Mobil sayfa için aşağıdaki It gösterir:

Tespit düşünün: Nihai ekranın üst kısmının içeriğinin sadece yaklaşık% 63 Bu ben beri görünen tam HTML yanıtıyla

ile oluşturulamadı

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

nasıl sorunu çözebilirsiniz: koduyla index.php'de benim mesajların üstünde Featured Image dahil ettik? Bu özellik, sitenin logosundan ayrı olarak, öne çıkan resimden önce kenar çubuğu gibi bir şey yüklediğimi görmüyor. Burada daha derin bir anlama, benim index.php tam kod için

<?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 /> <br /> Weiterlesen →')); ?> 
     </p> 
     <hr> 

     <?php endwhile; else: ?> 
     <p> 
      <?php _e('Sorry, no posts matched your criteria.'); ?> 
     </p> 
     <?php endif; ?> 
     <?php if (show_posts_nav()) : ?> 
     <div class="pagination"> 
      <?php echo paginate_links(); ?> 
     </div> 
     <?php endif; ?> 
    </div> 
    <?php get_sidebar(); ?> 
    </div> 
    <div id="delimiter"> 
    </div> 
<?php get_footer(); ?> 

birisi bu konuda bana yardımcı olabilir misiniz? Neyi yanlış yapıyorum?

Answer 1

100/100 sayfalık bir puan tutan bir kişi olarak, hız için aşırı optimizasyonun muhtemelen sorunları gidermek için kullanacağınız hayal kırıklıklarına değmeyeceğini söyleyebilirim. Örnek olarak, Wikipedia veya YouTube'da bir Pagespeed testi çalıştırın. Bunlar en popüler siteler ve YouTube'un yalnızca 50’si vardır. Bu sayıları artırmak istediğiniz gerçek nedeni, kullanıcılara daha iyi bir deneyim sunmaktır çünkü sayfanın yüklenmesini beklemek zorunda kalmazlar.

Sizin Ekranın üst kısmındaki içeriğin basitçe yüke ek kaynaklar üzerinde beklerken görüntülenmesine izin verilir ne:

Sayfanız 4 engelleme komut kaynakları ve 2 engelleme CSS kaynağı var. Bu, sayfanızı oluştururken gecikmeye neden olur.
Sayfanın üst tarafındaki içerik, aşağıdaki kaynakların yüklenmesini beklemeden oluşturulamıyor. Engelleme kaynaklarını ertelemeyi veya eşzamansız olarak yüklemeyi veya bu kaynakların kritik bölümlerini doğrudan HTML'de satır içi kullanmayı deneyin.

Kaldır JavaScript engelleme kılmasıdır:
/...-includes/js/jquery/jquery.js?ver=1.11.3
/...s/jquery/jquery-migrate.min.js?ver=1.2 Aşağıdakilerden 0,1
/...ghtbox/jquery.touchwipe.min.js?ver=1.4.6
/...ightbox/jquery.lightbox.min.js?ver=1.4.6

Optimize CSS Teslimat :
/wp-content/themes/1000PB/style.css
/…ghtbox/styles/lightbox.min.css?ver=1.4.6

Kişisel çabalar en iyi arama motoru sıralamalarını genel Sayfa Hızı puanını düşürmek ve zarar verecek olanlar bu yana (komut ve stil için async veya defer kullanılarak), bunların teslimini optimize harcanmaktadır.

Sorunuzu yanıtlamak için sayfanızın üst kısmına doğru olan, genellikle aşağıya doğru gezinmeden görülebilen öğelerini, css’lerini görmek için inceleyebilirsiniz.Örnek: Yani bu madde iyi başlığında bir satır içi <style> eleman dahildir

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

, o zamanki gibi tarayıcı da kullanıcılara sayfayı göstermek için önce yüklenmesini style.css beklemek zorunda olmayacaktır.

sadece yorum isteyin, böylece, örneğin küçültmek komut dosyaları gibi daha hızlı bir şekilde belirli işlemleri için Wordpress tema hack asenkron komut verme, defer kullanarak, emoji devre dışı bırakma ve yardımcı veya başka soru göndermek gerekiyorsa ve Yardım etmekten mutluluk duyacağız.

ben neler daha iyi bir fikir elde etmek için diğer sitelerde testini öneririz. Ben tavsiye Webpagetest.org ve Şelale grafiği kullanarak kaynakları uzun zaman aldığını söyleyecektir:

Ayrıca bu konuda yardımcı olacak araçlar kullanabilirsiniz:
CSS Tricks: Authoring Critical Above-the-Fold CSS
Critical-path (Above-the-fold) CSS Tools