Sunucunuzun tarayıcıya kritik alt kaynaklarla ilgili ipuçları nasıl gönderebileceğini öğrenin.
Erken ipuçları nedir?
Web siteleri zaman içinde daha karmaşık hale geldi. Bu nedenle, bir sunucunun istenen sayfanın HTML'sini oluşturmak için basit olmayan işlemler (ör. veritabanlarına erişim veya kaynak sunucuya erişen CDN'ler) yapması normaldir. Maalesef bu "sunucu düşünme süresi", tarayıcı sayfayı oluşturmaya başlamadan önce ek gecikmeye neden olur. Gerçekten de, sunucunun yanıtı hazırlaması kadar bağlantı etkin bir şekilde boşta kalır.
Erken İpuçları, nihai yanıttan önce ön bir HTTP yanıtı göndermek için kullanılan bir HTTP durum kodudur (103 Early Hints). Bu sayede sunucu, ana kaynağı oluşturmakla meşgulken tarayıcıya kritik alt kaynaklar (ör. sayfanın stil sayfaları, kritik JavaScript) veya sayfa tarafından büyük olasılıkla kullanılacak kökler hakkında ipuçları gönderebilir. Tarayıcı, ana kaynağı beklerken bağlantıları ısıtmak için bu ipuçlarını kullanabilir ve alt kaynaklar isteyebilir. Diğer bir deyişle, erken ipuçları, tarayıcıya bazı çalışmaları önceden yaparak bu tür "sunucu düşünme süresinden" yararlanmasına yardımcı olur ve böylece sayfa yüklemelerini hızlandırır.
Bazı durumlarda, Largest Contentful Paint'te elde edilen performans artışı Shopify ve Cloudflare tarafından gözlemlendiği üzere birkaç yüz milisaniyeden bir saniyeye kadar çıkabilir. Bu karşılaştırmada da görüldüğü gibi:
Erken ipuçları nasıl kullanılır?
Erken İpuçları'ndan yararlanmanın ilk adımı, en başarılı açılış sayfalarını yani kullanıcılarınızın web sitenizi ziyaret ettiğinde genellikle başladıkları sayfaları belirlemektir. Bu, ana sayfa veya diğer web sitelerinden gelen çok sayıda kullanıcınız varsa popüler ürün listeleme sayfaları olabilir. Bu giriş noktalarının diğer sayfalardan daha önemli olmasının nedeni, kullanıcı web sitenizde gezindikçe Erken İpuçları'nın yararlılığının azalmasıdır (yani, tarayıcının ikinci veya üçüncü gezinme sırasında ihtiyaç duyduğu tüm alt kaynaklara sahip olma olasılığı daha yüksektir). Muhteşem bir ilk izlenim yaratmak da her zaman iyi bir fikirdir.
Bu öncelikli açılış sayfaları listesine sahip olduğunuza göre, bir sonraki adım preconnect veya preload ipuçları için hangi kaynakların veya alt kaynakların iyi aday olduğunu belirlemektir. Bunlar genellikle Largest Contentful Paint veya First Contentful Paint gibi temel kullanıcı metriklerine en çok katkıda bulunan kaynaklar ve alt kaynaklardır. Daha net bir şekilde belirtmek gerekirse, eşzamanlı JavaScript, stil sayfaları ve hatta web yazı tipleri gibi oluşturmayı engelleyen alt kaynakları arayın. Benzer şekilde, önemli kullanıcı metriklerine çok fazla katkıda bulunan alt kaynakları barındıran kaynakları arayın.
Ayrıca, ana kaynaklarınızda preconnect veya preload kullanılıyorsa Erken İpuçlarına adaylar arasında bu kaynakları ya da kaynakları göz önünde bulundurabilirsiniz. Daha fazla ayrıntı için LCP'yi nasıl optimize edeceğinizi öğrenin. Ancak preconnect ve preload yönergelerini HTML'den Erken İpuçları'na kopyalamanın en iyi seçenek olmayabileceği unutulmamalıdır.
Bunları HTML'de kullanırken genellikle Ön Yükleme Tarayıcı'nın HTML'de keşfetmeyeceği kaynakları (ör. aksi takdirde geç keşfedilecek yazı tipleri veya arka plan resimleri) preconnect veya preload etmek istersiniz. Erken ipuçları için HTML'niz olmaz. Bu nedenle, kritik alanlara veya olası başka bir durumda HTML'nin başlarında keşfedilecek kritik kaynaklara preconnect yapmak isteyebilirsiniz. Örneğin, main.css veya app.js'i önceden yükleyebilirsiniz. Ayrıca, tüm tarayıcılar erken ipuçları için preload'yi desteklemez. Tarayıcı desteği bölümüne bakın.
İkinci adım, eski veya artık ana kaynak tarafından kullanılmayan kaynaklarda ya da kaynaklarda Erken İpuçları kullanma riskini en aza indirmekten oluşur. Örneğin, sık sık güncellenen ve sürümlendirilen kaynaklar (ör. example.com/css/main.fa231e9c.css) en iyi seçenek olmayabilir. Bu sorunun erken ipuçlarına özgü olmadığını, nerede olursa olsun tüm preload veya preconnect için geçerli olduğunu unutmayın. Bu tür ayrıntılar, otomasyon veya şablonlama ile en iyi şekilde ele alınır (örneğin, manuel bir işlemle preload ile kaynağı kullanan gerçek HTML etiketi arasında eşleşmeyen karma veya sürüm URL'leri oluşma olasılığı daha yüksektir).
Örneğin, aşağıdaki akışı ele alalım:
GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
Sunucu, main.abcd100.css'e ihtiyaç duyulacağını tahmin eder ve Erken İpuçları'nı kullanarak bu öğeyi önceden yüklemeyi önerir:
103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]
Birkaç dakika sonra, bağlı CSS dahil olmak üzere web sayfası yayınlanır. Maalesef bu CSS kaynağı sık sık güncellenir ve ana kaynak zaten tahmin edilen CSS kaynağının (abcd100) beş sürümü (abcd105) ilerisindedir.
200 OK
[...]
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.abcd105.css">
Genel olarak, oldukça kararlı ve büyük ölçüde ana kaynağın sonucundan bağımsız kaynaklar ve kökenler kullanmayı hedefleyin. Gerekirse önemli kaynaklarınızı ikiye ayırabilirsiniz: İlk İpuçlarıyla kullanılmak üzere tasarlanmış sabit bir bölüm ve ana kaynak tarayıcı tarafından alındıktan sonra getirilecek daha dinamik bir bölüm bırakılacaktır:
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/experimental.3eab3290.css">
Son olarak, sunucu tarafında, erken ipuçlarını desteklediği bilinen tarayıcılar tarafından gönderilen ana kaynak isteklerini arayın ve 103 erken ipucu ile hemen yanıt verin. 103 yanıtına, ilgili önceden bağlanma ve önceden yükleme ipuçlarını ekleyin. Ana kaynak hazır olduğunda, normal yanıtı (örneğin, başarılıysa 200 OK) gönderin. Geriye dönük uyumluluk için nihai yanıta Link HTTP üstbilgilerini de eklemek iyi bir uygulamadır. Hatta ana kaynağın oluşturulması sırasında ortaya çıkan kritik kaynaklarla (ör. "ikiye bölme" önerisini uyguladıysanız önemli bir kaynağın dinamik kısmı) bu üstbilgileri destekleyebilirsiniz. Bu durum aşağıdaki gibi görünür:
GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Birkaç dakika sonra:
200 OK
Content-Length: 7531
Content-Type: text/html; charset=UTF-8
Content-encoding: br
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Link: </experimental.3eab3290.css>; rel=preload; as=style
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/experimental.3eab3290.css">
<script src="/common.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
Tarayıcı desteği
103 Erken İpucu tüm büyük tarayıcılarda desteklenir ancak Erken İpucu'nda gönderilebilecek yönergeler tarayıcıya göre değişiklik gösterir:
Önceden bağlantı desteği:
Tarayıcı desteği
' d='M96 183a64 64 0 0 1-23-23L17 64a128 128 0 0 0 111 192l55-96a64 64 0 0 1-87 23Z'/%3E%3Cpath fill='url(%23b)' d='M192 128a64 64 0 0 1-9 32l-55 96A128 128 0 0 0 239 64H128a64 64 0 0 1 64 64Z'/%3E%3Ccircle cx='128' cy='128' r='52' fill='%231a73e8'/%3E%3Cpath fill='url(%23c)' d='M96 73a64 64 0 0 1 32-9h111a128 128 0 0 0-222 0l56 96a64 64 0 0 1 23-87Z'/%3E%3C/svg%3E)
' xlink:href='%23A'%3E%3Cstop offset='.76' stop-opacity='0'/%3E%3Cstop offset='.95' stop-opacity='.5'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3CradialGradient id='F' cx='2523' cy='4680' r='20243' gradientTransform='matrix(-.03715 .99931 -2.12836 -.07913 13579 3530)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2335c1f1'/%3E%3Cstop offset='.11' stop-color='%2334c1ed'/%3E%3Cstop offset='.23' stop-color='%232fc2df'/%3E%3Cstop offset='.31' stop-color='%232bc3d2'/%3E%3Cstop offset='.67' stop-color='%2336c752'/%3E%3C/radialGradient%3E%3CradialGradient id='G' cx='24247' cy='7758' r='9734' gradientTransform='matrix(.28109 .95968 -.78353 .22949 24510 -16292)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2366eb6e'/%3E%3Cstop offset='1' stop-color='%2366eb6e' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpath id='H' d='M24105 20053a9345 9345 0 01-1053 472 10202 10202 0 01-3590 646c-4732 0-8855-3255-8855-7432 0-1175 680-2193 1643-2729-4280 180-5380 4640-5380 7253 0 7387 6810 8137 8276 8137 791 0 1984-230 2704-456l130-44a12834 12834 0 006660-5282c220-350-168-757-535-565z'/%3E%3Cpath id='I' d='M11571 25141a7913 7913 0 01-2273-2137 8145 8145 0 01-1514-4740 8093 8093 0 013093-6395 8082 8082 0 011373-859c312-148 846-414 1554-404a3236 3236 0 012569 1297 3184 3184 0 01636 1866c0-21 2446-7960-8005-7960-4390 0-8004 4166-8004 7820 0 2319 538 4170 1212 5604a12833 12833 0 007684 6757 12795 12795 0 003908 610c1414 0 2774-233 4045-656a7575 7575 0 01-6278-803z'/%3E%3Cpath id='J' d='M16231 15886c-80 105-330 250-330 566 0 260 170 512 472 723 1438 1003 4149 868 4156 868a5954 5954 0 003027-839 6147 6147 0 001133-850 6180 6180 0 001910-4437c26-2242-796-3732-1133-4392-2120-4141-6694-6525-11668-6525-7011 0-12703 5635-12798 12620 47-3654 3679-6605 7996-6605 350 0 2346 34 4200 1007 1634 858 2490 1894 3086 2921 618 1067 728 2415 728 2952s-271 1333-780 1990z'/%3E%3Cuse fill='url(%23B)' xlink:href='%23H'/%3E%3Cuse fill='url(%23D)' opacity='.35' xlink:href='%23H'/%3E%3Cuse fill='url(%23C)' xlink:href='%23I'/%3E%3Cuse fill='url(%23E)' opacity='.4' xlink:href='%23I'/%3E%3Cuse fill='url(%23F)' xlink:href='%23J'/%3E%3Cuse fill='url(%23G)' xlink:href='%23J'/%3E%3C/svg%3E)
' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%239059ff' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%238c4ff3' stop-opacity='.1'/%3E%3Cstop offset='.8' stop-color='%237716a8' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%236e008b' stop-opacity='.6'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-g' cx='239.1' cy='34.6' r='171.6' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffe226'/%3E%3Cstop offset='.1' stop-color='%23ffdb27'/%3E%3Cstop offset='.3' stop-color='%23ffc82a'/%3E%3Cstop offset='.5' stop-color='%23ffa930'/%3E%3Cstop offset='.7' stop-color='%23ff7e37'/%3E%3Cstop offset='.8' stop-color='%23ff7139'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-h' cx='374' cy='-74.3' r='732.2' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-i' cx='304.6' cy='7.1' r='536.4' gradientTransform='rotate(84 303 4)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.3' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.6' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-j' cx='235' cy='98.1' r='457.1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-k' cx='355.7' cy='124.9' r='500.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.2' stop-color='%23ffe141'/%3E%3Cstop offset='.5' stop-color='%23ffaf1e'/%3E%3Cstop offset='.6' stop-color='%23ff980e'/%3E%3C/radialGradient%3E%3ClinearGradient id='ff-a' x1='446.9' y1='76.8' x2='47.9' y2='461.8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.4' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.5' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/linearGradient%3E%3ClinearGradient id='ff-l' x1='442.1' y1='74.8' x2='102.6' y2='414.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%23fff44f' stop-opacity='.8'/%3E%3Cstop offset='.3' stop-color='%23fff44f' stop-opacity='.6'/%3E%3Cstop offset='.5' stop-color='%23fff44f' stop-opacity='.2'/%3E%3Cstop offset='.6' stop-color='%23fff44f' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134a120 120 0 0 0-66 25 71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a229 229 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zM202 355l3 1-3-1zm55-145zm198-31z' fill='url(%23ff-a)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-b)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-c)'/%3E%3Cpath d='m362 195 1 1a130 130 0 0 0-22-29C266 92 322 5 331 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62z' fill='url(%23ff-d)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-e)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-f)'/%3E%3Cpath d='m171 151 5 3a111 111 0 0 1-1-58c-25 11-44 29-58 44 1 0 36 0 54 11z' fill='url(%23ff-g)'/%3E%3Cpath d='M18 261a242 242 0 0 0 231 197 207 207 0 0 0 206-279c8 56-20 110-64 146-86 71-169 43-186 31l-3-1c-50-24-71-70-67-110-42 0-57-35-57-35s38-28 89-4c46 22 90 4 90 4 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5l-5-3c-18-11-52-11-54-11-9-12-9-51-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73c0 1-9 38-5 57z' fill='url(%23ff-h)'/%3E%3Cpath d='M341 167a130 130 0 0 1 22 29 46 46 0 0 1 4 3c55 50 26 121 24 126 44-36 72-90 64-146-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-9 5-65 92 10 167z' fill='url(%23ff-i)'/%3E%3Cpath d='M367 199a46 46 0 0 0-4-3l-1-1c-13-9-36-18-58-15 86 44 63 193-57 187a107 107 0 0 1-31-6 131 131 0 0 1-11-5c17 12 99 39 186-31 2-5 31-76-24-126z' fill='url(%23ff-j)'/%3E%3Cpath d='M148 277s12-41 80-41c7 0 28-20 29-26s-44 18-90-4c-51-24-89 4-89 4s15 35 57 35c-4 40 16 85 67 110l3 1c-29-15-54-44-57-79z' fill='url(%23ff-k)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62-13-9-36-18-58-14 86 43 63 192-57 186a107 107 0 0 1-31-6 131 131 0 0 1-11-5l-3-1 3 1c-29-15-54-44-57-79 0 0 12-41 80-41 7 0 28-20 29-26 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a279 279 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zm-24 13z' fill='url(%23ff-l)'/%3E%3C/svg%3E)
' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%2324a5f3' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%231e8ceb' /%3E%3C/radialGradient%3E%3CradialGradient id='s-j' cx='109.3' cy='13.8' r='93.1' gradientTransform='matrix(-.02 1.1 -1.04 -.02 137 -115)' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%235488d6' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%235d96eb' /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='220' height='220' x='22' y='-107' fill='url(%23s-a)' ry='49' transform='matrix(.57 0 0 .57 187 256)' /%3E%3Cg transform='translate(194 190)'%3E%3Ccircle cx='67.8' cy='67.7' fill='url(%23s-c)' paint-order='stroke fill markers' r='54' /%3E%3Ccircle cx='-69.9' cy='69.3' fill='url(%23s-i)' transform='translate(138 -2)' r='54' /%3E%3C/g%3E%3Cellipse cx='120' cy='14.2' fill='url(%23s-j)' rx='93.1' ry='93.7' transform='matrix(.58 0 0 .58 192 250)' /%3E%3Cg transform='matrix(.58 0 0 .57 197 182)'%3E%3Cpath fill='%23cac7c8' d='M46 192h1l72-48-7-9-66 57Z' /%3E%3Cpath fill='%23fbfffc' d='M46 191v1l66-57-7-9-59 65Z' /%3E%3Cpath fill='url(%23s-d)' d='m119 144-7-9 66-57-59 66Z' /%3E%3Cpath fill='%23fb645c' d='m105 126 7 9 66-57-1-1-72 49Z' /%3E%3C/g%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='1' stroke-width='1.3' d='m287 278 3-2m-12-17 8-2m-8-3h4m-4-13 8 2m-8 3h4m-1-13 7 3m-4-11 7 4m-2-11 6 6m0-12 6 7m1-11 4 6m4-10 3 7m5-9 2 7m15-7-1 7m10-5-3 7m11-4-4 7m11-2-5 6m16 7-7 4m10 4-7 3m10 6-8 1m8 16-8-2m5 10-7-3m4 11-7-4m2 11-6-5m0 11-5-6m-2 11-4-7m-4 11-3-8m-6 10-1-8m-16 8 2-8m-10 5 3-7m-11 4 4-7m-11 2 5-6m-8 3 3-3m4 8 2-3m5 8 2-4m6 7 1-4m8 5v-4m8 4v-4m9 3-1-4m9 1-2-4m9 0-2-4m9-2-3-3m8-4-3-2m8-5-4-2m7-6-4-1m5-8h-4m4-8h-4m3-9-4 1m1-9-4 2m-1-9-3 2m-2-9-3 3m-4-8-2 3m-5-8-2 4m-6-6-1 3m-8-5v4m-8-4v4m-9-2 1 3m-9 0 2 3m-9 1 2 3m-9 2 3 3m-8 4 3 2m-8 5 4 2m-7 6 4 1m-4 25 4-1m-2 5 7-3m-6 7 4-2m-2 6 7-4m-13-21h8m41-41v-8m0 99v-8m49-42h-8' transform='translate(-65 8)' /%3E%3C/svg%3E)
Ön yükleme desteği:
Tarayıcı Desteği
Chrome Geliştirici Araçları'nda 103 Erken İpucu desteği de vardır ve Link üstbilgileri belge kaynaklarında görülebilir:
Link başlıkları gösterilir.Erken İpuçları kaynaklarını kullanmak için Erken İpuçları tarayıcı önbelleğini kullandığından DevTools'ta Disable cache işaretlenmemelidir. Önceden yüklenmiş kaynaklarda başlatıcı early-hints, boyut ise (Disk cache) olarak gösterilir:
early-hints başlatıcı bulunur ve bu kaynaklar disk önbelleğinden yüklenir.Bu işlem ayrıca HTTPS testi için güvenilir bir sertifika gerektirir.
Firefox'ta (126 sürümü itibarıyla) DevTools'ta 103 Erken İpucu desteği açıkça belirtilmemiştir ancak Erken İpuçları kullanılarak yüklenen kaynaklar, Erken İpuçları ile yüklendiklerinin bir göstergesi olan HTTP üstbilgisi bilgilerini göstermez.
Sunucu desteği
Popüler açık kaynak yazılım HTTP sunucusu yazılımları arasında Erken İpuçları desteğinin düzeyine dair kısa bir özet aşağıda verilmiştir:
- Apache: mod_http2 kullanılarak desteklenir.
- H2O: Destekleniyor.
- NGINX: Deneysel modül.
- Düğüm: 18.11.0'dan itibaren http ve http2 için desteklenmektedir
Erken İpuçlarını daha kolay şekilde etkinleştirin
Aşağıdaki CDN'lerden veya platformlardan birini kullanıyorsanız erken ipuçları özelliğini manuel olarak uygulamanız gerekmeyebilir. İlk İpuçlarını destekleyip desteklemediğini öğrenmek için çözüm sağlayıcınızın online belgelerine bakın veya buradaki olası her örneğe yer verilmemiş olan listeyi inceleyin:
Erken İpuçları'nı desteklemeyen istemcilerde sorunları önleme
100 aralığındaki bilgilendirici HTTP yanıtları HTTP standardının bir parçasıdır ancak 103 Erken İpuçları kullanıma sunulmadan önce genel web tarayıcılığı için nadiren kullanıldıkları için bazı eski istemciler veya botlar bunlarla ilgili sorun yaşayabilir.
Yalnızca sec-fetch-mode: navigate HTTP istek üstbilgisi gönderen istemcilere yanıt olarak 103 Erken İpucu göndermek, bu tür ipuçlarının yalnızca sonraki yanıtı beklemeyi anlayan yeni istemcilere gönderilmesini sağlar. Ayrıca, erken ipuçları yalnızca gezinme isteklerinde desteklendiğinde (mevcut sınırlamalara bakın) bu, diğer isteklerde gereksiz yere gönderilmesini önleme avantajına da sahiptir.
Ayrıca, Erken İpuçları'nın yalnızca HTTP/2 veya HTTP/3 bağlantıları üzerinden gönderilmesi önerilir ve çoğu tarayıcı bunları yalnızca bu protokoller üzerinden kabul eder.
Gelişmiş desen
Erken İpuçları'nı önemli açılış sayfalarınıza tam olarak uyguladıysanız ve daha fazla fırsat arıyorsanız aşağıdaki gelişmiş kalıbı kullanabilirsiniz.
Tipik bir kullanıcı yolculuğunun bir parçası olarak n. sayfa isteğinde bulunan ziyaretçiler için Erken İpuçları yanıtını sayfada daha az ve daha derinde yer alan içeriğe uyarlamak, başka bir deyişle daha düşük öncelikli kaynaklarda Erken İpuçları'nı kullanmak isteyebilirsiniz. Yüksek öncelikli, oluşturmayı engelleyen alt kaynaklara veya kaynaklara odaklanmanızı önerdiğimiz için bu durum mantıksız gelebilir. Ancak bir ziyaretçi sitenizde bir süre gezindikten sonra tarayıcıda tüm önemli kaynakların bulunması muhtemeldir. Bu noktadan sonra, dikkatinizi daha düşük öncelikli kaynaklara çevirmeniz mantıklı olabilir. Örneğin, bu durum ürün resimlerini yüklemek için erken ipuçları veya yalnızca daha az yaygın kullanıcı etkileşimleri için gereken ek JS/CSS kullanmak anlamına gelebilir.
Mevcut sınırlamalar
Chrome'da uygulanan erken ipuçlarıyla ilgili sınırlamalar aşağıda verilmiştir:
- Yalnızca gezinme istekleri (yani üst düzey dokümanın ana kaynağı) için kullanılabilir.
- Yalnızca
preconnectvepreloaddesteklenir (yaniprefetchdesteklenmez). - İlk İpuçları ve ardından son yanıtta kaynaklar arası yönlendirme, Chrome'un Erken İpuçlarını kullanarak edindiği kaynakları ve bağlantıları bırakmasına neden olur.
- Erken İpuçları kullanılarak önceden yüklenen kaynaklar HTTP önbelleğine depolanır ve daha sonra sayfa tarafından buradan alınır. Bu nedenle, yalnızca ön ipuçlarını kullanarak ön yüklenebilen kaynaklar ön yüklenebilir. Aksi takdirde kaynak iki kez getirilir (ön ipuçları tarafından bir kez, doküman tarafından tekrar). Chrome'da, güvenilir olmayan HTTPS sertifikaları için HTTP önbelleği devre dışı bırakılır (sayfayı yükleseniz bile).
- Uyumlu resimlerin önceden yüklenmesi (
imagesrcset,imagesizesveyamediakullanılarak), doküman oluşturulana kadar görüntü alanı tanımlanmadığından HTTP<link>üstbilgileri kullanılarak desteklenmez. Bu, 103 erken ipucunun duyarlı resimleri önceden yüklemek için kullanılamayacağı ve bu amaçla kullanıldığında yanlış resmi yükleyebileceği anlamına gelir. Bu sorunu daha iyi nasıl çözeceğinizle ilgili öneriler hakkındaki tartışmayı takip edin.
Diğer tarayıcılarda da benzer sınırlamalar vardır ve daha önce belirtildiği gibi bazı tarayıcılar 103 erken ipucunu yalnızca preconnect ile kısıtlar.
Sırada ne var?
Topluluğun ilgisine bağlı olarak, erken ipuçları uygulamamızı aşağıdaki özelliklerle genişletebiliriz:
- HTTP önbelleği yerine bellek önbelleğini kullanan önbelleğe alınamayan kaynaklar için erken ipuçları.
- Alt kaynak isteklerinde gönderilen erken ipuçları.
- iframe ana kaynak isteklerinde gönderilen erken ipuçları.
- Erken İpuçları'nda ön getirme desteği.
Öncelik verilecek konular ve erken ipuçlarının nasıl daha da iyileştirileceği hakkında geri bildirimlerinizi bekliyoruz.
H2/Push ile ilişkisi
Desteği sonlandırılan HTTP2/Push özelliği hakkında bilginiz varsa Erken İpuçları'nın bu özellikten farkının ne olduğunu merak edebilirsiniz. Erken İpuçları, tarayıcı için kritik alt kaynakları getirmeye başlamak üzere bir gidiş dönüş gerektirirken HTTP2/Push ile sunucu, yanıtla birlikte alt kaynakları göndermeye başlayabilir. Bu durum kulağa harika gelse de önemli bir yapısal dezavantaja neden oldu: HTTP2/Push ile, tarayıcıda zaten bulunan alt kaynakların gönderilmesini önlemek son derece zordu. Bu "aşırı zorlama" etkisi, ağ bant genişliğinin daha az verimli kullanılmasına neden olarak performans avantajlarını önemli ölçüde engelledi. Genel olarak Chrome verileri, HTTP2/Push'in aslında web genelinde performans açısından net bir olumsuz etki yarattığını gösterdi.
Buna karşılık, erken ipuçları, ön yanıt gönderme özelliğini, tarayıcıya gerçekten ihtiyaç duyduğu bilgileri getirme veya bunlara bağlanma görevini veren ipuçlarıyla birleştirdiği için pratikte daha iyi performans gösterir. Erken İpuçları, HTTP2/Push'in teoride ele alabileceği tüm kullanım alanlarını kapsamasa da gezinmeleri hızlandırmak için daha pratik bir çözüm olduğuna inanıyoruz.
Pierre Bamin tarafından oluşturulan küçük resim.