Web topluluğu, yıllar içinde web performansı optimizasyonu hakkında zengin bir bilgi birikimi oluşturdu. Her bir optimizasyon birçok sitenin performansını artırabilir ancak bunların hepsini aynı anda uygulamak çok zor olabilir ve gerçekte bunların yalnızca bazıları belirli bir site için uygulanabilir.
Web performansı tam zamanlı işiniz değilse siteniz için en etkili optimizasyonların hangileri olacağı muhtemelen net değildir. Bunların hepsini uygulamak için zamanınız olmayabilir. Bu nedenle, kendinize kullanıcılarınızın performansını artırmak için seçebileceğiniz en etkili optimizasyonlar neler? sorusunu sormanız önemlidir.
Performans optimizasyonlarıyla ilgili gerçek şudur: Bu optimizasyonları yalnızca teknik özelliklerine göre değerlendiremezsiniz. Ayrıca, belirli bir optimizasyonu uygulama olasılığınızı etkileyen insan ve kurumsal faktörleri de göz önünde bulundurmanız gerekir. Bazı performans iyileştirmeleri teoride çok etkili olabilir ancak gerçekte bunları uygulamak için zaman veya kaynaklara sahip olan geliştirici sayısı azdır. Öte yandan, hemen hemen herkesin zaten uyguladığı, performansı büyük ölçüde etkileyen en iyi uygulamalar da olabilir. Bu kılavuzda, aşağıdakileri sağlayan web performansı optimizasyonları açıklanmaktadır:
- Gerçek dünyada en büyük etkiye sahip olan
- Çoğu site için alakalı ve geçerlidir.
- Çoğu geliştiricinin uygulamaya koyması gerçekçi olmalıdır.
Bu öneriler, Core Web Vitals metriklerinizi iyileştirmenin en gerçekçi ve etkili yolları arasındadır. Web performansı konusunda yeniyseniz veya size en yüksek yatırım getirisini neyin sağlayacağına henüz karar veremiyorsanız başlangıç için en iyi yer burasıdır.
Interaction to Next Paint (INP)
En yeni Core Web Vitals metriği olan Interaction to Next Paint (INP), en büyük iyileştirme fırsatlarından bazılarını sunar. Ancak desteği sonlandırılan önceki sürümüne kıyasla "iyi" deneyimler için eşikten daha az sayıda site geçtiğinden, etkileşim yanıt verimini ilk kez nasıl optimize edeceğinizi öğrenen çok sayıda geliştirici arasında olabilirsiniz. INP'yi artırmanın en etkili yolları için bu bilinmesi gereken tekniklerden başlayın.
1. Uzun görevleri parçalara ayırmak için sık sık yield kullanın
Görevler, oluşturma, düzen, ayrıştırma, derleme veya komut dosyalarını yürütme dahil olmak üzere tarayıcının yaptığı ayrı bir çalışma parçasıdır. Süresi 50 milisaniyeyi aşan görevler uzun görev olarak kabul edilir. Uzun görevler, ana ileti dizisinin kullanıcı etkileşimlerine hızlı yanıt vermesini engelleyebileceğinden sorunludur.
JavaScript'te her zaman mümkün olduğunca az işlem yapmaya çalışmalısınız. Bununla birlikte, uzun görevleri bölerek ana ileti dizisine yardımcı olabilirsiniz. Ana iş parçacığına sık sık teslim vererek bunu yapabilirsiniz. Böylece oluşturma güncellemeleri ve diğer kullanıcı etkileşimleri daha erken gerçekleşebilir.
' 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)
Scheduler API, öncelik sistemi kullanarak işleri sıraya almanıza olanak tanır. Daha açık belirtmek gerekirse scheduler.yield() API'si, uzun görevleri bölerken etkileşimlerin görev kuyruğundaki yerlerinden vazgeçmeden işlenebildiğinden emin olur.
Uzun görevleri bölerek tarayıcıya, kullanıcının erişimini engelleyen kritik işlemleri gerçekleştirmesi için daha fazla fırsat vermiş olursunuz.
2. Gereksiz JavaScript'den kaçının
Web siteleri her zamankinden daha fazla JavaScript gönderiyor ve bu trendin değiştiği görünmüyor. Çok fazla JavaScript gönderdiğinizde, görevlerin ana iş parçacığının dikkati için yarıştığı bir ortam oluşturursunuz. Bu durum, özellikle de önemli olan ilk açılış döneminde web sitenizin duyarlılığını etkileyebilir.
Ancak bu çözülemez bir sorun değildir ve aşağıdaki seçeneklerden yararlanabilirsiniz:
- Gereksiz, JavaScript tabanlı uygulamalar yerine Temel yaygın olarak kullanılabilen web platformu özelliklerini kullanın.
- Komut dosyalarınızda kullanılmayan kodu bulmak için Chrome Geliştirici Araçları'ndaki kapsam aracını kullanın. Başlangıç sırasında gereken kaynakların boyutunu azaltarak sayfaların kodu ayrıştırmak ve derlemek için daha az zaman harcamasını sağlayabilirsiniz. Bu da daha sorunsuz bir ilk kullanıcı deneyimi sağlar.
- İlk oluşturma işlemi için gerekli olmayan ancak daha sonra kullanılacak kod için ayrı bir paket oluşturmak üzere kod bölme özelliğini kullanın.
- Etiket yöneticisi kullanıyorsanız etiketlerinizi düzenli olarak optimize edin. Etiket Yöneticisi'nizin JavaScript ayak izini azaltmak için kullanılmayan kod içeren eski etiketler kaldırılabilir.
3. Büyük oluşturma güncellemelerinden kaçının
JavaScript'in yürütülmesi, web sitenizin duyarlılığını etkileyen faktörlerden yalnızca biridir. Oluşturma, başlı başına pahalı bir çalışma türüdür. Büyük oluşturma güncellemeleri sırasında web siteniz kullanıcı etkileşimlerine daha da yavaş yanıt verebilir.
Oluşturma işlemini optimize etmek basit bir işlem değildir ve neyi başarmaya çalıştığınıza bağlıdır. Yine de oluşturma görevlerinin uzun görevler haline gelmemesi için yapabileceğiniz bazı işlemler vardır:
- Zorunlu düzen ve düzen karmaşası'ndan kaçınmak için JavaScript kodunuzdaki DOM okuma ve yazma işlemlerini yeniden düzenleyin.
- DOM boyutlarını küçük tutun. DOM boyutu ile düzen çalışmasının yoğunluğu arasında bir ilişki vardır. Oluşturucunun çok büyük bir DOM'un düzenini güncellemesi gerektiğinde, düzenini yeniden hesaplamak için gereken çalışma önemli ölçüde artabilir.
- Ekran dışındaki DOM içeriklerini üşengeç şekilde oluşturmak için CSS kapsayıcıyı kullanın. Bu işlem her zaman kolay değildir ancak karmaşık düzenler içeren alanları ayırarak gereksiz düzen ve oluşturma işlemlerinden kaçınabilirsiniz.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP), geliştiricilerin en çok sorun yaşadığı Core Web Vitals metriğidir. Chrome Kullanıcı Deneyimi Raporu'ndaki sitelerin %40'ı, iyi kullanıcı deneyimleri için önerilen LCP eşiğini karşılamıyor. Chrome Ekibi, LCP'yi iyileştirmenin en etkili yolları olarak aşağıdaki teknikleri önerir.
1. LCP kaynağının HTML kaynağından bulunabilir olduğundan ve öncelikli olduğundan emin olun
Chrome ekibi, web'deki LCP ile ilgili olarak aşağıdakileri fark etti:
- HTTP Archive'nin 2024 Web Almanağı'na göre, mobil sayfaların %73'ünde LCP öğesi olarak bir resim bulunuyor.
- Chrome'daki gerçek kullanıcı verilerinin analizine göre, LCP'si düşük olan kaynakların çoğu, p75 LCP sürelerinin %10'undan azını LCP resmini indirmek için harcıyor.
- LCP'si düşük olan sayfalarda, LCP resimlerinin yüklenmesi istemcide 75. yüzdelik dilimde 1.290 milisaniye gecikiyor. Bu,hızlı bir deneyim için bütçenin yarısından fazlası.
- LCP öğesinin resim olduğu sayfalarda, bu resimlerin% 35'inde ilk HTML yanıtında bulunamayan kaynak URL'ler (
<img src="...">veya<link rel="preload" href="...">gibi) vardı. Bu URL'ler, tarayıcının ön yükleme tarayıcısının bunları en kısa sürede keşfetmesine olanak tanır. - Web Almanağı'na göre, uygun sayfaların %15'i, bir sayfanın LCP'sini nispeten az çabayla iyileştirebilecek kaynaklar da dahil olmak üzere kaynaklara daha yüksek öncelik vermek için
fetchpriorityHTML özelliğinden yararlanıyordu.
Bu istatistikler, geliştiricilerin LCP resimleri için hem kaynak yükleme gecikmesini hem de kaynak yükleme süresini azaltma konusunda büyük bir fırsata sahip olduğunu gösteriyor.
Sorunun kaynak yükleme gecikmesi olduğu durumlarda, bir sayfanın resimlerin yüklenmeye başlaması için CSS veya JavaScript'in tamamen yüklenmesini beklemesi gerekiyorsa iyi bir LCP elde etmek için çok geç olabileceğini unutmayın. Ayrıca, LCP resminin kaynak yükleme süresi, fetchpriority HTML özelliği kullanılarak yeniden önceliklendirerek daha fazla bant genişliği almasını ve dolayısıyla daha hızlı yüklenmesini sağlayarak azaltılabilir.
LCP öğeniz bir resimse resim URL'sinin, kaynak yükleme gecikmesini azaltmak için HTML yanıtında bulunabilir olması gerekir. Bunu yapmanıza yardımcı olacak bazı ipuçları:
srcveyasrcsetözelliğine sahip bir<img>öğesi kullanarak resmi yükleyin. Her zaman daha yavaş olacağından, oluşturmak için JavaScript gerektirendata-srcgibi standart olmayan özellikleri kullanmayın. Sayfaların %7'sinde LCP resmidata-srcöğesinin arkasına gizleniyor.- SSR, sayfa işaretlemesinin tamamının (resim dahil) HTML kaynağında bulunduğu anlamına geldiğinden istemci tarafı oluşturma (CSR) yerine sunucu tarafı oluşturmayı (SSR) tercih edin. Görüntünün keşfedilebilmesi için CSR çözümlerinin JavaScript'in çalışması gerekir.
- Resminize harici bir CSS veya JS dosyasından referans verilmesi gerekiyorsa
<link rel="preload">etiketini kullanarak resme HTML kaynağında yer verebilirsiniz. Satır içi stillerin referans verdiği resimlerin, tarayıcının önyükleme tarayıcısı tarafından bulunamayacağını unutmayın. Bu nedenle, HTML kaynağında bulunsalar bile diğer kaynakların yüklenmesi sırasında keşfedilmeleri engellenebilir. Bu durumlarda önyükleme yardımcı olabilir.
Ayrıca, LCP kaynağının erken ve yüksek öncelikli olarak yüklenmesini sağlayarak bir kaynağın yükleme süresini kısaltabilirsiniz:
- LCP resminizin
<img>veya<link rel="preload">etiketinefetchpriority="high"özelliğini ekleyin. Bu işlem, resim kaynağının önceliğini artırarak daha erken yüklenmeye başlamasını sağlar. - LCP resminizin
<img>etiketindenloading="lazy"özelliğini kaldırın. Bu sayede, resmin görüntü alanında veya yakınında göründüğünün onaylanmasından kaynaklanan yükleme gecikmesi önlenir. - Mümkün olduğunda kritik olmayan kaynakları erteleyin. Bu kaynakları belgenizin sonuna taşımak, resim veya iFrame'leri gecikmeli olarak yüklemek ya da JavaScript kullanarak eşzamansız olarak yüklemek, LCP resmi gibi daha önemli kaynakların daha hızlı yüklenmesini sağlar.
2. Anında gezinme sunun
İdeal kullanıcı deneyimi, sayfanın yüklenmesini beklemek zorunda kalmamaktır. Kaynak bulunabilirliği ve önceliklendirme gibi LCP optimizasyonları, kullanıcının LCP öğesinin yüklenmesi ve oluşturulması için bekleme süresini azaltmada etkilidir. Ancak bu baytların ağ üzerinden ne kadar hızlı yükleneceği ve bir sayfada oluşturulacağı konusunda fiziksel bir sınır vardır. Bu sınıra ulaşmadan çok önce, yalnızca birkaç milisaniye daha kısaltmak için çok yüksek miktarda çaba gerekir. Bu nedenle, anında gezinme sağlamak için tamamen farklı bir yaklaşım benimsememiz gerekiyor.
Anında gezinmeler, kullanıcı sayfaya gitmeye başlamadan önce sayfayı yükleyip oluşturmaya çalışır. Bu sayede, önceden oluşturulmuş sayfa sıfıra yakın bir LCP ile hemen gösterilebilir. Bunu yapmanın iki yolu vardır: restorasyon ve spekülasyon. Kullanıcı daha önce ziyaret ettiği bir sayfaya geri veya ileri gittiğinde, sayfa bellek içi önbellekten hızlı bir şekilde geri yüklenerek kullanıcının bıraktığı haliyle gösterilebilir. Alternatif olarak, web uygulamaları kullanıcının bir sonraki gideceği yeri tahmin etmeye çalışabilir. Tahmin doğru olduğunda, kullanıcı ilgili sayfaya gittiğinde sayfa zaten yüklenmiş ve oluşturulmuş olur.
Daha önce ziyaret edilen sayfaların geri yüklenmesi geri-ileri önbelleği (bfcache) ile mümkün olur. Bu özelliği kullanmak için sayfalarınızın bfcache uygunluk ölçütlerini karşıladığından emin olmanız gerekir. Sayfaların bfcache için uygun olmamasının yaygın nedenlerinden biri, no-store önbelleğe alma yönergeleriyle yayınlanmaları veya unload etkinlik dinleyicileri içermeleridir.
Tamamen oluşturulmuş sayfaları geri yüklemek yalnızca yükleme performansını değil, düzen kararlılığını da artırır. Sayfaların bfcache için uygun olduğundan emin olma bölümünde bfcache ve CLS'yi iyileştirmedeki etkinliği hakkında daha fazla bilgi edinebilirsiniz.
Browser Support
Kullanıcının ziyaret edeceği bir sonraki sayfayı önceden oluşturmak, LCP performansını önemli ölçüde iyileştirmenin etkili bir başka yoludur ve Spekülasyon Kuralları API ile mümkündür. Ancak bu avantajlardan yararlanmak için doğru sayfaların önceden oluşturulduğundan emin olun. Yanlış tahminler hem sunucuda hem de istemcide kaynakları boşa harcar ve performansı düşürebilir. Bu nedenle, bir sonraki sayfanın ne olacağı konusunda ne kadar emin değilseniz ön oluşturma işlemini o kadar dikkatli yapmanız gerekir. Kararsız kaldığınızda analiz verileriniz, bir sonraki ziyaret olasılığı en yüksek olan sayfaları daha hevesli bir şekilde önceden oluşturmanız için size güven verebilir.
3. TTFB'yi optimize etmek için bir CDN kullanma
Önceki öneri, kullanıcılara mümkün olan en iyi deneyimi sunan anında gezinmelere odaklanıyordu. Ancak bfcache ve spekülatif yükleme tekniklerinin uygulanamadığı durumlar olabilir. İlk HTML dokümanı yanıtının LCP'yi etkili bir şekilde engellediği, sitenize giden kaynakta farklı bir kaynak bağlantısını takip eden bir kullanıcıyı düşünün. Tarayıcı, yanıtın ilk baytını alana kadar herhangi bir alt kaynağı yüklemeye başlayamaz. Bu ne kadar erken gerçekleşirse diğer her şey de o kadar erken başlayabilir.
Bu süre ilk bayta geçiş süresi (TTFB) olarak bilinir. TTFB'yi azaltmanın en iyi yolları şunlardır:
- İçeriğinizi, kullanıcılarınıza coğrafi olarak olabildiğince yakın bir konumda sunun.
- Yakın gelecekte tekrar istendiğinde hızlıca sunulabilmesi için bu içeriği önbelleğe alır.
Bu ikisini de yapmanın en iyi yolu CDN kullanmaktır. CDN'ler, kaynaklarınızı dünyanın dört bir yanındaki uç sunuculara dağıtarak bu kaynakların kablo üzerinden kullanıcılara ulaşması gereken mesafeyi sınırlandırır. CDN'ler genellikle sitenizin ihtiyaçlarına göre ayarlanabilen ayrıntılı önbelleğe alma denetimlerine de sahiptir.
CDN'ler HTML dokümanlarını da yayınlayıp önbelleğe alabilir ancak Web Almanağı'na göre HTML dokümanı isteklerinin yalnızca% 33'ü CDN'den yayınlandı. Bu, sitelerin ek tasarruflar elde etmesi için önemli bir fırsat olduğu anlamına gelir.
CDN'leri yapılandırmayla ilgili bazı ipuçları:
- Statik HTML dokümanlarını kısa bir süre için bile önbelleğe alın. Örneğin, içeriğin her zaman güncel olması önemli mi? Yoksa birkaç dakika gecikmiş olabilir mi?
- Kaynak sunucunuzda çalışan dinamik mantığı, çoğu modern CDN'nin özelliği olan uç noktaya taşıyıp taşıyamayacağınızı inceleyin.
İçeriği doğrudan uçtan sunabildiğiniz ve kaynak sunucunuza gitmekten kaçınabileceğiniz her durum performans açısından bir kazançtır. Başlığa kadar tüm yolculuğu yapmanız gereken durumlarda bile CDN'ler genellikle bunu daha hızlı yapmak için optimize edildiğinden her iki durumda da kazançlı olursunuz.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS), bir web sayfasının görsel kararlılığını ölçer. CLS, çoğu sitenin iyi performans gösterdiği bir metrik olsa da yaklaşık dörtte biri hâlâ önerilen eşiği karşılamıyor. Bu nedenle, birçok sitenin kullanıcı deneyimini iyileştirmek için yararlanabileceği büyük bir fırsat var.
1. Sayfadan yüklenen tüm içeriklerde net boyutlar ayarlama
Düzen kaymaları genellikle diğer içerikler yüklendikten sonra mevcut içerikler taşındığında gerçekleşir. CLS'yi iyileştirmenin birincil yolu, gerekli alanı mümkün olduğunca önceden ayırmaktır.
Boyutlandırılmamış resimlerden kaynaklanan düzen kaymalarını düzeltmenin en iyi yolu, width ve height özelliklerini veya eşdeğer CSS özelliklerini açıkça ayarlamaktır. Sayfaların %66'sında en az bir boyutlandırılmamış resim var. Belirli bir boyutu olmayan bu resimlerin başlangıç yüksekliği 0px'tür. Bu durum, resimler yüklendiğinde ve tarayıcı boyutlarını keşfettiğinde düzen kaymalarına neden olabilir. Bu, kolektif web için büyük bir fırsattır ve bu fırsat, bu kılavuzda önerilen diğer önerilerden bazılarına kıyasla daha az çaba gerektirir.
CLS'ye katkıda bulunan tek öğe resimler değildir. Düzen kaymalarına, genellikle sayfa ilk oluşturulduktan sonra yüklenen diğer içerikler (ör. üçüncü taraf reklamlar veya yerleştirilmiş videolar) neden olabilir. aspect-ratio mülkü bu konuda yardımcı olabilir. Geliştiricilerin resimlerin yanı sıra resim dışı öğelerde de en boy oranını açıkça ayarlamalarına olanak tanıyan yaygın olarak kullanılabilen bir temel CSS özelliğidir. Bu sayede dinamik bir width (ör. ekran boyutuna göre) ayarlayabilir ve tarayıcıdan, boyutları olan resimlerde olduğu gibi uygun yüksekliği otomatik olarak hesaplamasını isteyebilirsiniz.
Ancak dinamik içeriğin tam boyutunu her zaman bilmek mümkün değildir. Tam boyutu bilmeseniz bile sayfa düzeni değişikliklerinin önemini azaltabilirsiniz. Makul bir min-height değeri ayarlamak, tarayıcının boş bir öğe için varsayılan 0px yüksekliğini kullanmasına izin vermekten neredeyse her zaman daha iyidir. min-height kullanmak da genellikle basit bir çözümdür. Çünkü gerektiğinde kapsayıcının nihai içeriğin yüksekliğine kadar büyümesine izin verir. Bu büyüme miktarını, daha kabul edilebilir bir düzeye indirir.
2. Sayfaların bfcache için uygun olduğundan emin olma
Bu kılavuzun önceki bölümlerinde belirtildiği gibi, geri/ileri önbellek (bfcache), tarayıcı geçmişinde daha önceki veya sonraki bir sayfayı bellek anlık görüntüsünden anında yükler. Bfcache, LCP'yi iyileştiren tarayıcı düzeyinde önemli bir performans optimizasyonudur ancak düzen kaymalarını da tamamen ortadan kaldırır. Aslında, 2022'de bfcache'in kullanıma sunulması, o yıl CLS'de gördüğümüz en büyük iyileşmeden sorumluydu.
Buna rağmen önemli sayıda web sitesi bfcache için uygun değildir ve bu nedenle ücretsiz web performansı avantajından yararlanamaz. Sayfanız, bellekten geri yüklenmesini istemediğiniz hassas bilgiler yüklemiyorsa sayfalarınızın bfcache'i kullanmaya uygun olduğundan emin olun.
Site sahipleri, sayfaların bfcache için uygun olup olmadığını kontrol etmeli ve uygun olmama nedenlerini düzeltmelidir. Chrome'da Geliştirici Araçları'nda bir bfcache test cihazı vardır. Ayrıca, alandaki uygunluk koşullarını karşılamama nedenlerini tespit etmek için Not Restored Reasons API'yi de kullanabilirsiniz.
3. Yerleşim oluşturan CSS özelliklerini kullanan animasyonlardan ve geçişlerden kaçının
Düzen hareketlerinin sık karşılaşılan bir diğer nedeni de öğelerin animasyonlu olmasıdır. Örneğin, üstten veya alttan kayan çerez banner'ları ya da diğer bildirim banner'ları genellikle CLS'ye katkıda bulunur. Bu durum, özellikle bu banner'lar diğer içeriği engellediğinde sorun teşkil eder. Ancak engellemediğinde bile animasyonlu banner'lar CLS'yi etkileyebilir.
HTTP Archive verileri, animasyonlarla sayfa düzeni değişiklikleri arasında kesin bir bağlantı kuramaz. Ancak veriler, sayfa düzenini etkileyebilecek CSS özelliklerini animasyonlu olarak kullanan sayfaların "iyi" CLS değerine sahip olma olasılığının genel sayfalara kıyasla% 15 daha düşük olduğunu gösteriyor. Bazı mülkler, diğerlerinden daha kötü CLS ile ilişkilidir. Örneğin, margin veya border genişliklerinde animasyon içeren sayfaların CLS değeri, genel olarak sayfaların kötü olarak değerlendirilme oranının neredeyse iki katı kadar "kötü"dür.
Bu durum şaşırtıcı değildir. Çünkü yerleşime neden olan herhangi bir CSS özelliğinde geçiş yaptığınızda veya animasyon uyguladığınızda yerleşim kaymaları meydana gelir. Bu yerleşim kaymaları, kullanıcı etkileşiminin 500 milisaniye içinde gerçekleşmezse CLS'yi etkiler.
Bazı geliştiriciler için şaşırtıcı olabilecek bir durum da, öğenin normal belge akışının dışına alındığı durumlarda bile bu durumun geçerli olmasıdır. Örneğin, top veya left öğelerini animasyonlu hale getiren ve mutlak konumlandırılmış öğeler, diğer içerikleri itmese bile sayfa düzeninde kaymalara neden olur. Ancak top veya left yerine transform:translateX() veya transform:translateY() öğesini animasyonlu hale getirirseniz tarayıcı sayfa düzenini güncellemez ve böylece düzen kaymalarından kaçınılır.
Tarayıcıdaki oluşturucu iş parçacığında güncellenebilen CSS özelliklerinin animasyonu tercih etmek, bu işi ana iş parçacığından GPU'ya taşıdığı için uzun zamandır performansla ilgili en iyi uygulamalardan biri olmuştur. Bu, genel performansla ilgili en iyi uygulamalardan biri olmasının yanı sıra CLS'yi iyileştirmeye de yardımcı olabilir.
Genel kural olarak, kullanıcının dokunmasına veya tuş basmasına yanıt olarak yapmadığınız sürece (hover olmasa da) tarayıcının sayfa düzenini güncellemesini gerektiren CSS özelliklerini hiçbir zaman animasyonlu hale getirmeyin veya geçiş yapmayın. Mümkün olduğunda, CSS transform mülkünü kullanarak geçişleri ve animasyonları tercih edin.
Birleştirilmemiş animasyonlardan kaçının Lighthouse denetimi, bir sayfa potansiyel olarak yavaş CSS özelliklerini animasyonlu hale getirdiğinde uyarı verir.
Sonuç
Sayfa performansını iyileştirmek, özellikle de web'de dikkate alınması gereken çok sayıda kılavuz olduğu düşünüldüğünde göz korkutucu görünebilir. Ancak en etkili en iyi uygulamaların yer aldığı bu kısa listeye odaklanarak soruna yeni bir odaklanmayla yaklaşabilir ve web sitenizin Core Web Vitals puanını iyileştirebilirsiniz.
Burada listelenen optimizasyonların ötesine geçmek istiyorsanız daha fazla bilgi için şu kılavuzları okuyun:
Ek: Değişiklik günlüğü
En iyi önerilerin ne zaman ve neden değiştiğini açıklamaya yardımcı olmak için bu dokümanda yapılan önemli değişiklikler burada izlenir.
Ekim 2024
2024 güncellemesi:
- INP
- INP'nin Core Web Vitals metriği olarak kullanıma sunulmasıyla birlikte bu metriği FID'den INP'ye geçirdik ve listedeki en önemli metrik haline getirdik.
- Uzun görevleri bölmek için
isInputPendingAPI'yi kullanma önerimizi geri çektik. Bu kararımızın nedenlerini Uzun Görevleri Optimize Etme makalesinde bulabilirsiniz.
- LCP
- Keşfedilebilirlik ve önceliklendirme önerilerini tek bir yerde birleştirdik.
- Anında gezinme hedefi için yeni bir öneri ekledik.
Ocak 2023
İlk öneri listesi şu şekildedir:
- LCP
- LCP kaynağının HTML kaynağından bulunabilir olduğundan emin olun
- LCP kaynağına öncelik verildiğinden emin olun
- Doküman ve kaynak TTFB'sini optimize etmek için CDN kullanma
- CLS
- Sayfadan yüklenen tüm içeriklerde net boyutlar ayarlama
- Sayfaların bfcache için uygun olduğundan emin olma
- Yerleşim oluşturan CSS özelliklerini kullanan animasyonlardan ve geçişlerden kaçının
- FID
- Uzun görevlerden kaçının veya uzun görevleri bölün
- Gereksiz JavaScript'ten kaçının
- Büyük oluşturma güncellemelerinden kaçının
Video özeti için bu 2023 Google I/O sunumunu da izleyebilirsiniz.