[JavaScript][CSS][HTML] Optymalizacja witryny Opcje

[elmozaur]

Witam i o pomoc pytam :-)

Ostatnio zainteresowalem sie tematem optymalizacji stron WWW.
Googlajac i czytajac rozne watki postanowilem zainstalowac Yslow i kilka innych narzedzi.
Poniewaz programy ladnie pokazuja gdzie sa waskie gardla - mniej wiecej wiem co nalezy poprawic. Problem w tym ze nie do konca wiem jak.

- style CSS
npaisane jest ze trzeba w osobnych plikach (a najlepiej aby polaczyc w jeden plik aby zmniejszyc ilosc zapytan lub importow), poczym czytam ze dobrzejest umiescic kod css w headzie strony
Pytanie: czy ze wzgledu na wydajnosc lepiej dac sytl w kodzie strony czy w zewnetrzynm pliku. Jesli troche tu a troche tu to czym sie kierowac wybierajac style do wpisania w kodzie ?

- kod Javascript
Tu tez doczytalem ze generalnie lepiej wszystko w 1 pliku wczytywanym gdzies w dole strony
Pytanie: Jesli ktos uzywa np jQuery + TinyMCE(z pluginami) + Lightbox+costam jeszcze (w sumie ok 1MB danych JS) jak optymalnie i szybko wczytywac te dane ?

- Etagi a Expire
Gdzies wyczytalem, że generalnie etagi mozna sobie odpuscic na rzecz Expire
Jak juz wczesniej pisalem troche danych mam do pobrania wiec chcialbym je pobrac raz i uzywac bez ponownego pobierania przez np 24h - z wyjatkiem plikoww graficznych ktore powinny byc walidowane. Ale nie wiem jak to ustawic.

Sporo czytalem na ten temat ale nie wiem jak ogarnac to praktycznie. Czy moge prosic o jakas podpowiedz w tym temacie ?
pozdrawiam
Grzegorz

[!*!]

- style CSS

wszystko ładujesz w osobne pliki, które wiszą w header (lub jeden i używasz @import).

- kod Javascript
Tu tez doczytalem ze generalnie lepiej wszystko w 1 pliku wczytywanym gdzies w dole strony
Pytanie: Jesli ktos uzywa np jQuery + TinyMCE(z pluginami) + Lightbox+costam jeszcze (w sumie ok 1MB danych JS) jak optymalnie i szybko wczytywac te dane ?

1MB js? Również tak jak w przypadku CSS do plików i niby dlaczego na końcu? To nie ma znaczenia.

Zainteresuj się kompresją, zarówno po stronie serwera jak i samych plików JS. Np czymś takim http://javascriptcompressor.com/

[memory]

Polecam wtyczkę PageSpeed . Można pobrać już skompresowane css czy obrazy

[Niktoś]

wszystko ładujesz w osobne pliki, które wiszą w header (lub jeden i używasz @import).

Chyba lepiej używać atrybutu style w przypadku kiedy jakiś tag jest tworzony dynamicznie.

Jeśli chodzi o optymalizację strony to także radziłbym się zapoznać z kompresowaniem plików statycznych(grafika,css,js itp.) oraz samego header'a poprzez gzip, oraz optymalnym ustawieniem cache browsera z poziomu aplikacji.

Ten post edytował Niktoś 23.07.2012, 10:56:27

[rocktech.pl]

Witam.

- style CSS

Zainteresuj się tym projektem https://github.com/h5bp/html5-boilerplate . Nie chodzi mi o to abyś od razu implementował te rozwiązanie ale po przeczytaniu okomentowanych plików będziesz wiedział więcej.

- Etagi a Expire

Rzuć okiem na .htaccess https://github.com/h5bp/html5-boilerplate/b...aster/.htaccess

- kod Javascript

https://github.com/ender-js

[!*!]

Chyba lepiej używać atrybutu style w przypadku kiedy jakiś tag jest tworzony dynamicznie.

Nie sądzę, aby miało to większe znaczenie. Skoro i tak możesz go edytować w locie.

[Niktoś]

Nie sądzę, aby miało to większe znaczenie.

Jednakże jakieś ma.
Zakładając że budujesz kontrolkę dynamicznie w zależności od sytuacji kontrolka zmienia wygląd:

[PHP] pobierz, plaintext 
if(true){
echo "<input type='text' class='zielony' />";
 
}else{
 
echo "<input type='text' class='czerwony' />";
}
[PHP] pobierz, plaintext 

to w zewnętrznym pliku css będziesz musiał użyć dwie klasy

[CSS] pobierz, plaintext 
.zielony{
background-color:green; 
}
.czerwony
{
background-color:red; 
}
[CSS] pobierz, plaintext 

I teraz pomyśl jak takich tworzonych tagów będzie dużo to ile klas bedziesz musiał zastosować i jak wzrośnie ci rozmiar pliku css i wydłuży się czas jego wczytywania,a pamiętaj, że w danej chwili jest używana tylko jedna klasa.Dlatego uważam, że w takiej sytuacji lepiej jest używać atrybutu style.

Ten post edytował Niktoś 23.07.2012, 11:24:18

[!*!]

To ma znaczenie marginalne i jest zależne od wielu innych czynników, autor pytał o sposoby. eot.

[Niktoś]

autor pytał o sposoby. eot.

Na moim prostym przykładzie, przedstawiłem ,że pchanie wszystkiego w zewnętrzny plik css wcale nie musi być optymalniejsze.
Zgodzę się w 100% z sformułowaniem:

jest zależne od wielu innych czynników

Nie ma złotego środka:)

Ten post edytował Niktoś 23.07.2012, 11:36:30

[elmozaur]

wszystkim dziekuje za pomoc i spora ilosc wiedzy. Biore sie do roboty ;-)

[Mephistofeles]

1MB js? Również tak jak w przypadku CSS do plików i niby dlaczego na końcu? To nie ma znaczenia.

Ma znaczenie. Umieszczając (szczególnie duże) skrypty na końcu nie blokujesz ładowania innych, ważniejszych dla użytkownika plików.

[viking]

Raczej powinno się stosować ładowanie asynchroniczne:
http://microjs.com/#loader
Jeśli skompresujesz do jednego pliku w HTML 5 script ma atrybut async co pozwoli ominąć ekstra kod.

W CSS @import jest również ładowany synchronicznie.

[Niktoś]

@UP- dałbym Ci plus za ten link ,bardzo fajne biblioteki. Będę musiał wypróbować ,szczególnie te które poprawiają synchronizację ładowania/wykonywania skryptów js.
Dodane do zakładek.

[wNogachSpisz]

- style CSS
Problem polega na znalezieniu złotego środka pomiędzy dwoma zmiennymi:
- pobranych i niewykorzystanych definicji stylów
- ilości plików tj. zapytań do serwera

Z jednej strony, jeśli stworzysz dużo plików, każdy stylizujący niewielką ilość elementów czy podstron, to klient nie będzie musiał np. przy wchodzeniu na główną pobierać dużej ilości potencjalnie niewykorzystanych stylów.
Z drugiej strony jeśli podzielisz style na zbyt wiele plików, koszt zużytych zasobów serwera związany z obsłużeniem dużej ilości zapytań będzie przeważający.

Generalnie nikt się nie bawi w jakieś nadzwyczajne kompresowanie frontendu, często style są podzielone na kilka plików i to nie z uwagi na optymalizację tylko separacja layoutu od templaytu. Warto poparzeć jak robi konkurencja, np. github ma dwa potężne pliki CSS na CDNie, oba ładują się z głownej.. Niby bez sensu ale też tak można.

- Etagi a Empire
Jedno nie wyklucza drugiego, stosuj oba. Jest też bardzo przydatny max-age.