Nasıl düzgün görüntüler, js ve css dosyaları önyükleneceği?

4 Cevap php

Ben sıfırdan bir web sitesi oluşturmak ve ben 90 en geç gerçekten bu içine ama web o zamandan beri çok değişti! Ve ben birlikte bu siteyi koyarak başladı ki, ben temelde php bir sistem yaptım bir tasarımcı daha olduğum site daha "dinamik" yapmak için içerir

When you first visit the site, you'll be presented to a logon screen, if you're not already logged on (cookies). If you're not logged on, a page called access.php is introdused. I thought I'd preload the most heavy images at this point. So that when the user is done logging on, the images are already cached. And this is working as I want. But I still notice that the biggest image still isn't rendered immediatly anyway. So it's seems kinda pointless.

Tüm bu beni site yapılandırılmış ve nasıl scriptler ve css dosyaları yüklenir nasıl düşünmek yaptı. Firefox ile FireBug ve YSlow kullanarak ben gibi birkaç noktalar başlıkları sona eriyor görmek ve her komut boyutunu azaltmak. Ama bu gerçekten suçlu olduğunu?

Örneğin, bu ana index.php gerçekten aptalca olurdu? Tüm site temelde bu gibi yapılandırılmıştır

<?php
require("dbconnect.php");
?>

<?php
include ("head.php");
?>

And below this is basically just the body and the content of the site. Head.php however consists of the doctype, head portions, linking of two css style sheets, jQuery library, jQuery validation engine, Cufon and Cufon font file, and then the small Cufon.Replace snippet.

The rest of the body comes with the index.php file, but at the bottom of this again is an include of a file called "footer.php" which basically consists of loading of a couple of jsLoader scripts and a slidepanel and then a js function. All of this makes the end page source look like a typical complete webpage, but I'm wondering if any of you can see immediatly that "this is really really stupid" and "don't do that, do this instead" etc. :) Are includes a bad way to go?

This site is also pretty image intensive and I can probably do a little more optimization. But I don't think that's its the primary culprit. YSlow gives me a report of what takes up the most space:

doc(1) - 5.8K
js(5) - 198.7K
css(2) - 5.6K
cssimage(8) - 634.7K
image(6) - 110.8K

Ben (8) o en ağırlığında cssimage gibi görünüyor biliyorum, ama ben zaten daha önce bu görüntüleri önceden yüklenmiş ettik ve gerçekten işlenmesini etkilemez.

4 Cevap

To speed a little, you could assemble all your images on the same image sprite, so that you have only 1 request to download all the images. But that requires you to fine tune your css to let display just the small subset of your image. To have a better explanation, check out : http://css-tricks.com/css-sprites/

Sadece Basit tutun: biraz aptalca görünüyor ama ben bir web sitesi yapmak, bu düşünmek istiyorum olabilir başka cevap. Yani bütün JS hafif bir tasarım yapmak, daha az göstermek olabilir, bütün bu görüntüler ince yapmak, gerçek değer eklerim? Ben bütün çalışmalarınızı eleştiren değilim, sadece sana öneririm ...

Ben bir extranet projesi üzerinde aşağıdaki yaklaşım kullanılmıştır:

Onlar önbellek önceden yüklenmiş böylece jQuery ve dosya adları bir dizi kullanarak, bütün görüntüler,. Js ve. Css dosyaları ajax. Kadar bir flaş yükleyici gibi - Ben dizi yineleme gibi, ben site yükleniyor belirten ekranda bir ilerleme çubuğu güncelleyin.

Bu iyi çalıştı.

Varsayılan olarak göstermek saf CSS ve HTML ile yükleme sayfası Ne yapacağım o zaman ImageLoader ile görüntüleri yüklemek ve önceden yüklemek için jQuery için bekleyin. Bir kez yapılır görüntüleri tekrar yüklü olmayacak zaten önbellekte olacak çünkü normal bir web sitesine yönlendirmek.

Yapabileceğiniz başka bir optimizasyon küçültmek tüm dosyaları JS ve tüm jquery.js dışında birleştirmek olduğunu. Ilk yükler böylece HTML içine ilk jquery.js koydu. Ayrıca HTML alt kısmında SCRIPT etiketleri koymak.

Bu hemen hemen bir kez yüklü varsa, önyükleme çivilenmiş var gibi geliyor, ve son kullanma başlık doğru ayarlanmış, sen olursa olsun ne tür içerik, onu önceden yüklenmiş var.

Dosya kombinasyonu hızlı bir web sitesi için anahtar olabilir, fazladan her dosya, yükleme süresini katacak ağ ve sunucu kötü durumda her ayrı dosya için ikinci bir ekstra kadar ekleyebilirsiniz lag. Dosya başına 200 milisaniye - Daha yaygın olarak yaklaşık 100 olacak.

Zaten minified değilse, komut küçültmek ve aynı dosyada onları koymak, sadece düzeni tutmak için unutmayın. Ben Ivo Sabev jQuery dahil olmaz neden hiçbir fikrim yok.

CSS dosyaları ile aynı şey.

Eğer test görüntü sıkıştırma hakkında ne kadar yaptın? Gerçekten farklı sıkıştırma ayarları çalışıyor ve kalite vs boyutunu karşılaştırarak bir kazanç olabilir. PNG görüntüler için PNGOUT ile IrfanView genellikle sadece can grafik öğeleri bir sürü, 8 bit renk görüntüyü azaltarak elde edilebilir ki üstüne, boyut küçültme çok büyük bir kazanç diğer programlar,% 25 daha küçük dosyaları yapabilirsiniz 't farkı anlatmak. Burada Yığın taşması editörü kontrol düğmeleri iyi sıkıştırılmış ve yığılmış görüntüleri büyük bir örneği var: http://sstatic.net/so/Img/wmd-buttons.png

etiketler