Lighthouse raporunuzun Fırsatlar bölümü, kritik istek zincirinizdeki üçüncü istek düzeyini önceden yükleme adayları olarak işaretler:
![Lighthouse Önceden Yükleme temel istekleri denetiminin ekran görüntüsü](https://developer.chrome.com/static/docs/lighthouse/performance/uses-rel-preload/image/a-screenshot-the-lightho-a0f22e9688496.png?authuser=5&hl=tr)
Lighthouse işaretleri, adayları nasıl belirler?
Sayfanızın kritik istek zincirinin aşağıdaki gibi göründüğünü varsayalım:
index.html |--app.js |--styles.css |--ui.js
index.html
dosyanız <script src="app.js">
özelliğini tanımlıyor. app.js
çalıştırıldığında , styles.css
ve ui.js
öğelerini indirmek için fetch()
yöntemini çağırır. Bu son 2 kaynak indirilene, ayrıştırılana ve yürütülene kadar sayfa tamamlanmış olarak görünmez.
Yukarıdaki örneği kullanarak Lighthouse, styles.css
ve ui.js
alanlarını aday olarak işaretler.
Olası tasarruflar, önceden yükleme bağlantıları beyan etmeniz durumunda tarayıcının istekleri ne kadar erken başlatabileceğine bağlıdır.
Örneğin app.js
hizmetinin indirilmesi, ayrıştırılması ve yürütülmesi 200 ms sürüyorsa app.js
artık isteklerin her biri için bir performans sorunu oluşturmadığından her kaynak için potansiyel tasarruf 200 ms'dir.
Önceden yükleme istekleri, sayfalarınızın daha hızlı yüklenmesini sağlayabilir.
![Önceden yükleme bağlantıları olmadan, style.css ve ui.js yalnızca app.js indirildikten, ayrıştırıldıktan ve yürütüldükten sonra istenir.](https://developer.chrome.com/static/docs/lighthouse/performance/uses-rel-preload/image/without-preload-links-st-f9c93e03b4029.png?authuser=5&hl=tr)
styles.css
ve ui.js
için yalnızca app.js
indirildikten, ayrıştırıldıktan ve yürütüldükten sonra istenir.
Buradaki sorun, tarayıcının yalnızca app.js
dosyasını indirdikten, ayrıştırıp çalıştırdıktan sonra bu son 2 kaynağı fark etmesidir.
Ancak bu kaynakların önemli olduğunu ve bir an önce indirilmesi gerektiğini biliyorsunuz.
Önceden yükleme bağlantılarınızı bildirin
HTML'nizde önceden yükleme bağlantıları tanımlayarak tarayıcıya önemli kaynakları mümkün olan en kısa sürede indirme talimatı verin.
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>
![Önceden yükleme bağlantıları kullanıldığında, style.css ve ui.js, app.js ile aynı anda istenir.](https://developer.chrome.com/static/docs/lighthouse/performance/uses-rel-preload/image/with-preload-links-style-da7d794e22995.png?authuser=5&hl=tr)
styles.css
ve
ui.js
, app.js
ile aynı anda istenir.
Daha fazla yardım için Yükleme hızını iyileştirmek için önemli öğeleri önceden yükleme konusuna da bakın.
Tarayıcı uyumluluğu
Haziran 2020 itibarıyla Chromium tabanlı tarayıcılarda önceden yükleme desteklenmektedir. Güncellemeler için Tarayıcı uyumluluğu bölümüne bakın.
Önceden yükleme için araç desteği oluşturma
Tooling.Report'un Öğeleri Önceden Yükleme sayfasına bakın.
Yığına özel rehberlik
Angular
Navigasyonu hızlandırmak için rotaları önceden yükleyin.
Magento
Temalarınızın düzenini değiştirin ve <link rel=preload>
etiketleri ekleyin.