Yıllar içinde web topluluğu, web performansı optimizasyonu konusunda oldukça bilgi sahibidir. 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 kuruluş faktörlerini 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, neredeyse herkesin halihazırda takip ettiği, çok etkili performans en iyi uygulamaları 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 olmalıdır.
- Çoğu site için alakalı ve geçerlidir.
- Çoğu geliştiricinin uygulamaya koyması gerçekçidir.
Birlikte ele alındığında bunlar, Core Web Vitals metriklerinizi iyileştirmenin en gerçekçi ve etkili yollarıdır. Web performansı konusunda yeniyseniz veya size en büyük yatırım getirisini neyin sağlayacağına henüz karar vermediyseniz en iyi başlangıç noktası budur.
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 teslim yapı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. 50 milisaniyeyi aşan görevler uzun görev haline gelir. 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 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'ten kaçının
Web siteleri her zamankinden daha fazla JavaScript gönderimi yapıyor ve bu trend değişmiyor. Çok fazla JavaScript gönderdiğinizde görevlerin ana iş parçacığının dikkatini çekmek için yarıştığı bir ortam oluşturmuş olursunuz. 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şlatma sırasında gereken kaynakların boyutunu küçülterek sayfaların kod ayrıştırma ve derlemeye daha az zaman harcamasını sağlayabilir, böylece daha sorunsuz bir ilk kullanıcı deneyimi sağlayabilirsiniz.
- İlk oluşturma işlemi için gerekli olmayan ancak daha sonra kullanılacak olan ayrı bir kod grubu oluşturmak için kod bölme işlevini kullanın.
- Bir etiket yöneticisi kullanıyorsanız düzenli olarak etiketlerinizi 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 çaplı oluşturma güncellemelerini önleme
JavaScript'in yürütülmesi, web sitenizin duyarlılığını etkileyen faktörlerden yalnızca biridir. Oluşturma işlemi, başlı başına pahalı bir işlemdir. 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 süreç değildir ve ne elde etmeye çalıştığınıza bağlıdır. Yine de oluşturma görevlerinin uzun görevlere dönüşmesini önlemek için şunları yapabilirsiniz:
- Zorunlu düzen ve düzen karmaşası sorunlarını önlemek için JavaScript kodunuzdaki DOM okuma ve yazma işlemlerini yeniden düzenleyin.
- DOM boyutlarını küçük tutun. DOM boyutu ve 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 her zaman kolay olmasa da karmaşık düzenler içeren alanları izole ederek gereksiz düzen ve oluşturma işlerinden kaçınabilirsiniz.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP), geliştiricilerin en çok zorlandıkları Core Web Vitals'dır. Chrome Kullanıcı Deneyimi Raporu'ndaki sitelerin %40'ı, iyi kullanıcı deneyimi 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 ve öncelikli olduğundan emin olun
Chrome ekibi, web'deki LCP ile ilgili olarak aşağıdakileri fark etti:
- HTTP Archive'nin 2022 Web Almanağı'na göre, mobil sayfaların %72'sinde 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 ayrılan bütçenin yarısından fazlası.
- LCP öğesinin resim olduğu sayfaların bu resimlerin% 39'unda, 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 önceden yükleme tarayıcısının bunları en kısa sürede keşfetmesine olanak tanıdı. - Web Almanağı'na göre, uygun sayfaların yalnızca %0,03'ü, bir sayfanın LCP'sini nispeten az çabayla iyileştirebilecekleri 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östermektedir.
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 önceliklendirilerek daha fazla bant genişliği almasını ve dolayısıyla daha hızlı yüklenmesini sağlayabilir.
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. Oluşturmak için JavaScript gerektirendata-srcgibi standart olmayan özellikleri kullanmayın. Bunlar her zaman daha yavaş olur. Sayfaların %9'unda 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 resmi yine bir
<link rel="preload">etiketi kullanarak HTML kaynağına ekleyebilirsiniz. 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 gibi 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, resmin görüntü alanının içinde veya yakınında göründüğünün onaylanmasından kaynaklanan yükleme gecikmesini önler. - 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 gezinmeyi hedefleyin
İ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 kazanmak için çok fazla çaba sarf etmeniz 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. Restorasyon ve spekülasyonlar bunu yapmanın iki yoludur. 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 önbellek (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.
Tarayıcı desteği
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 CDN kullanın
Ö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 süreç ne kadar erken tamamlanırsa diğer işlemler de o kadar erken başlayabilir.
Bu süre, İlk Bayt Zamanı (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 istenirse hızlıca sunulabilmesi için bu içeriği önbelleğe alın.
Bunların 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 ayrıca, genellikle sitenizin ihtiyaçlarına göre düzenlenebilecek 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 %29'u CDN'den yayınlandı. Bu, sitelerin ek tasarruf elde etmek için önemli bir fırsata sahip 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 bir özelliği olan ucuna taşıyıp taşıyamayacağınızı öğrenin.
Doğrudan uçta içerik yayınlayıp kaynak sunucuya gitmeyi önlediğinizde performans kazancı elde edersiniz. Yolculuğu kaynağa kadar tamamlamanız gerektiği durumlarda bile, CDN'ler genellikle bunu daha hızlı yapmak için optimize edilir. Dolayısıyla her iki durumda da avantajlı olur.
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 %72'sinde en az bir boyutlandırılmamış resim var. Belirli bir boyutu olmayan bu resimlerin başlangıç yüksekliği 0px'tür. Bu, 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. Yaygın olarak kullanıma sunulan temel bir CSS özelliğidir. Bu özellik, geliştiricilerin hem resimlerde hem de resim olmayan öğelerde açıkça en boy oranı ayarlamasına olanak tanır. Bu sayede dinamik bir width (ör. ekran boyutuna göre) ayarlayabilir ve tarayıcıya, boyutları olan resimlerde olduğu gibi uygun yüksekliği otomatik olarak hesaplamasını sağlayabilirsiniz.
Ancak, dinamik içeriğin tam boyutunu bilmek her zaman mümkün değildir. Tam boyutu bilmeseniz bile sayfa düzeni değişikliklerinin önemini azaltabilirsiniz. Anlamlı bir min-height ayarlamak, tarayıcının boş bir öğe için varsayılan 0px yüksekliğini kullanmasına izin vermekten hemen sonra her zaman daha iyidir. min-height kullanmak da genellikle basit bir çözümdür. Gerektiğinde kapsayıcının son içeriğin yüksekliğine kadar büyümesini sağlar. Bu büyümenin miktarı daha az tolere edilebilir bir düzeye indirilmiştir.
2. Sayfaların bfcache için uygun olduğundan emin olma
Bu kılavuzda daha önce belirtildiği gibi, geri-ileri önbellek (bfcache), bir sayfayı bellek anlık görüntüsünden anlık olarak ve tarayıcı geçmişinde daha önce veya daha sonra 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, bazı web siteleri bfcache için uygun olmadığından bu ücretsiz web performansı avantajından yararlanamıyorlar. Sayfanız bellekten geri yüklenmesini istemediğiniz hassas bilgiler yüklenmiyorsa sayfalarınızın bfcache için 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, yukarıdan veya alttan kayan çerez banner'ları veya diğer bildirim banner'ları genellikle CLS'ye katkıda bulunur. Bu durum, özellikle de bu banner'lar diğer içeriği engellediğinde sorun teşkil eder. Ancak engellemediğinde bile animasyonlu olmaları 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ı tesisler diğerlerinden daha kötü CLS ile ilişkilendirilir. Ö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ü herhangi bir düzene neden olan CSS özelliğinde geçiş yaptığınızda veya animasyon uyguladığınızda düzen kaymalarına neden olursunuz. Bu düzen kaymaları, bir kullanıcı etkileşiminden sonraki 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 animasyonunu uygulamak yerine transform:translateX() veya transform:translateY() animasyonlarını kullanmanız, tarayıcının sayfa düzenini güncellemesine neden olmaz ve düzen kaymalarını önler.
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 olarak kabul edilmektedir. 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 belgedeki ö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ölme kapsamında
isInputPendingAPI'yi kullanma önerimizi geri çektik. Nedenlerimiz hakkında daha fazla bilgiyi Uzun Görevleri Optimize Etme makalesinde bulabilirsiniz.
- LCP
- Keşfedilebilirlik ve önceliklendirme önerilerini tek bir öneride birleştirdik.
- Anında gezinme amacıyla 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 olun
- Düzeni tetikleyen CSS özellikleri 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.