iOS Safari, tüm sayfayı ilk kez görüntülemiyor

Question

Safari mobil cihazında (veya dar ekranlarda Safari Mac) ilk kez açtığınızda, tüm tarayıcılarda ve cihazlarda iyi performans gösteren bir web sitemiz var.

Web sitesi: http://sheriff.org/

Yeniden iPhone'da Safari:

1. Açık özel modda
2. web sitesi Yenile sayfa

Mac için Safari Yeniden:

Özel modda

1. Safari'yi açın
iOS için
2. Anahtarı User Agent -
3. bir mobil cihaz genişliği
yaklaşık bir olması tarayıcıyı yeniden boyutlandırma iPhone (iPhone geliştirin> Kullanıcı Ajan> Safari - - iOS) Beklenen
4. Açık web
5. sayfayı yenile

: Sayfa aynı ilk oluşturması gerektiğini ve ikinci

Gerçek zamanlı: Özel modda ilk defa , sadece yeşil bir kutu, sayfa tamamen

Bulgular vermektedir ikinci kez görünür : Her iki sayfayı (düzgün bir şekilde oluşturulduğunda ve oluşturma işlemi bozulduğunda) karşılaştırmayı denedim. Her iki durumda da, sayfanın tam olarak aynı HTML & CSS olduğunu bulmak için herhangi bir fark vardır.

(sayfa yenileme sonra düzgün hale gerekiyordu) ilk denemede gösterilmeyen elemanların herhangi incelemek, öğenin görünürlüğünü etkileyen herhangi bir stil bulamazsınız (gibi opacity, display, visibility , position, ... vb)

GÜNCELLEME: Öyle bir araştırma yapmış ve oto yol açtığı edilebileceğini öğrendim bu sorunu, neden olabilecek Safari Konsolundan Unhandled Promise Rejection: [object DOMError] bir hata var gibi görünüyor sayfada video oynatmak (sayfanın bir videosu var, ancak bu hata atılsa bile video oynatılıyor), Bu yüzden, bu hatanın neden atıldığının başka bir nedeni olması gerektiğine inanıyorum.

Safari'de böyle bir davranışı neden gördüğümüze dair herhangi bir tavsiye son derece takdir edilmektedir.

Answer 1

Web sitenizde sorunlar yaşanıyor ve diğer bazı yorumcular da belirttiği gibi, bazı problemler ana sayfanın saçma büyüklüğünden kaynaklanıyor. Bazı büyük harici komut dosyaları yüklendiğinde, css’den önce yükleniyor. Söz konusu CSS'nin "ikinci" denemeye yüklediği nedenden ötürü, css önbelleğe alınıyor ... çünkü sonunda (birkaç düzine javascript'ten birini yükledikten sonra, talep ettiğiniz birkaç düzine css dosyasından birine öneriyorsunuz). .. ve css'yi sonraki yüklere doğru şekilde dağıtacaktır (gerçekten ilk defa sayfayı yüklemek için yeterli zaman ve bant genişliği sağlayabildiğiniz sürece).

ben yarasa kapalı bir tavsiyede sürü vermek istiyorum, ama yayınınıza alakalı tutmak:

1. sizin css sayfanızın kafanın içinde javascripts herhangi ÖNCE denir emin olun (ler) .
2. Sitenizde kullanmanız için gereksiz olan komut dosyalarının yaklaşık% 90'ını ortadan kaldırmayı düşünün ... çünkü çok az insan web sitenize göz atmadan önce bu kadar veriyi yükleme konusunda sabırsızlığa sahip olacak ... özellikle de nispeten yavaş olan mobil tarayıcılarda.
3. Chrome konsolundaki tüm hatalara bakın (Google Chrome'da sayfanıza sağ tıklayın ve "incelemek" e basın, ardından "konsol" sekmesine bakın ... sitenizin birçok hatası var. Bunları düzeltmeniz gerekir. Eğer arama motorları tarafından taranması uyumlu ve daha muhtemel standartlara sitenizi istediğiniz
4. Google'ın Insight Sayfasında sitenize bir göz atın:.!. https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.sheriff.org%2FPages%2FHome.aspx

İyi şanslar