İnternetin hız çağında bir web veya blog sitesini nasıl optimize edeceğimizin bir kaç yollarından biri de "preload" kullanımıdır.
Basit bir ifadeyle <link rel="preload"> yüklenme sorunundan kaynaklanan gecikmeleri en aza indirmek ve script tabanlı kaynakların daha hızlı yüklenmesi için tarayıcıya bilgi verir. Bu yöntem özellikle cep telefonları için sayfa yükleme hızını daha da optimize etmek için önemlidir.
Sayfa kaynaklarının <link rel="preload"> hemen hızlı bir şekilde yüklenmesi için tarayıcıya bilgi verir ve yüklenen kaynaklar <link rel="preload"> sayesinde tarayıcıda yerel olarak depolanır, böylece blog sayfalar daha hızlı yüklenir ve görüntülenir.
Blog sitenizin hızlı olduğunu düşünebilirsin, ancak mobil cihazlar söz konusu olduğunda mutlaka eksik bir şeyler olabilir.
Kendinize şu soruyu sorabilirsiniz "AMP sayfaklar zaten hızlı değil mi!". Evet, AMP sayfalar zaten hızlı.. Ancak sayfalara mobil arama sonuçları Google önbellek yardımı ile erişim sağlıyor. Bu şekilde düşürsek tüm ziyaretçiler mobil arama sonuçlarından gelmiyor. AMP sayfalarının da optimize edilmesini sağlayan yollardan biri de <link rel="preload">. Bu sadece AMP sayfalar için geçerli değil aynı zamanda AMP olmayan sayfalar için de geçerlidir.
Mobil SEO Nedir?<link rel="preload"> yerleşimi aynı meta etiketleri gibi </head> etiketinden hemen sonraki satırlarada yer almaktadır. AMP sayfalar için aşağıdaki örnekte olduğu gibi yerleşim sağlamakta.
<!doctype html>
<html amp="amp" lang="tr">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,minimum-scale=1"/>
<meta name="description" content="This is the AMP Boilerplate."/>
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js"/>
<link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin=""/>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Import other AMP Extensions here -->
<style amp-custom>
/* Add your styles here */
</style>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link rel="canonical" href="."/>
<title>My AMP Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>Aşağıdaki AMP ana Javascript dosyası daha hızlı yüklenecektir.
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js"/>Google Font kütüphanesi kullanıyorsanız, font kütüphanesini aşağıdaki gibi düzenleyin.
<link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin="anonymous"/>Google Font dosyalarınızı CSS stil dosyalarınız içerisinde kullanıyorsanız aşağıdaki düzenleyin.
<link rel="preload" href="https://fonts.gstatic.com/.....woff2" as="font" type="font/woff2" crossorigin="anonymous"/>Blog arka plan ve blog logo resimleri kullanıyorsanız aşağıdaki örnekte olduğu gibi kullanabilirsiniz.
<link rel="preload" as="image" href="URL IMAGE"/>Google JS kütüphanesi kullanıyorsanız aşağıdaki gibi kullanabilirsiniz. AMP masaüstü sayfalar için de aynı kodu kullanabilirsiniz.
<link rel="preload" as="script" href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"/>Her blogun ihtiyaçları farklılık gösterebilir, bu nedenle blog sitenizde kullandığınız her JS kodu için blogunuzun durumuna gire ayarlayın.
Blogunuzda değişiklik yapmadan önce aşağıdaki örnek rel="preload" düzenlemesini inceleyin.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,minimum-scale=1"/>
<title>Blogger rel="preload"</title>
<link rel="preload" as="image" href="https://1.bp.blogspot.com/.../logo.jpg"/>
<link as="font" crossorigin="anonymous" href="https://fonts.gstatic.com/...woff2" rel="preconnect dns-prefetch preload" type="font/woff2"/>
<link as="script" href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" rel="preload"/>
<style type="text/css">
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;src:local(Roboto),local(Roboto-Regular),url(https://fonts.gstatic.com/...woff2) format("woff2")}
</style>
</head>
<body>
<h1>Hello World</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"/>
</body>
</html>Yayın bilgileri hakkında daha fazla bilgi almak ve yardım alabilmek için yorum formunu kullanabilirsiniz. Paylaşmış olduğumuz bilgileri aşağıdaki kaynaklardan da inceleyebilirsiniz.
Referanslar:
https: // amp.dev/documentation/guides-and-tutorials/optimize-and-measure/optimize_amp
https: // developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
https: // developers.google.com/web/updates/2016/03/link-rel-preload
https: // www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/
Hiç yorum yok:
Yorum Gönder