Jump to content
Sign in to follow this  
Guest Dydu

[html] Optymalizacja kodu strony .

Recommended Posts

Guest Dawid

Każdy z nas wie jakie są… polskie realia w dostępie do sieci.

 

Wielu internautów wcią…z korzysta z drogich (chodzi mi tutaj o koszty połaczenia z internetem), powolnych i awaryjnych modemów.

Jeżeli już posiadają… stałe łą…cze, to jest ono z reguły wolne, a nawet ograniczone transferowo .

Z badań wynika że internauta odwiedzają…cy daną… strone jest w stanie czekać na jej załadowanie maksymalnie od 15 do 20 sekund .

Jeżeli kod Twojej www jest "zaśmiecony" , strona obładowana jest masą… skryptów lub ciężarną… grafiką… , warto zastanowić się czy nie zoptymalizować kodu, aby nie zniechęcać potencjalnych gości do wizyty w naszym serwisie.

Głównym powodem długiego wczytywania się strony jest ciężarna grafika.

Największym błędem jaki może popełnić webmaster jest wstawianie na strone grafiki w formacie BMP.

BMP jest formatem graficznym znacznie większym od formatów takich jak GIF , czy JPG .

 

Jaki format grafiki na strone ?

 

Jeżeli na stronie umieszczasz grafike taką… jak:

-logo

-banner reklamowy

-button

warto wykorzystać format .GIF .

 

Format ten wpradzie ma palete barw ograniczoną… do 256 kolorów ,

jednakże przy małej grafice , w której nie potrzebujemy uzyskania fotograficznej jakości (od 24 bitów w wzwyż) nie powinnismy zauważyć defektów graficznych.

 

Dodatkowym plusem formatu .GIF jest możliwość tworzenia animacji, oraz jego mała objętość .

Format JPG stosujemy , kiedy mamy do czynienia z grafiką… o jakości fotograficznej .

 

Wykorzystanie graficznego formatu .JPG :

-top strony

-zdjęcia na strone www itp.

 

Warto równiez pocią…ć grafike na strone www na mniejsze części, co

znacznie przyśpieszy czas ładownia strony .

 

Drugim ważnym czynnikiem wpływają…cym na przedłuzenie czasu załadunku strony są… skrypty .

Mimo tego że wiele skryptów ładnie prezentuje sie na stronie , musimy zastanowic się po co właściwie internauta wchodzi na naszą… strone.

 

Większość internautów szuka na danych stronach informacji i nie zwaraca szczególnej uwagi na skrypty .

Często bywa tak że dany skrypt może zniechęcić internaute do odwiedzania Twojego serwisu .

 

Następnym aspektem jest oczyszczenie kodu strony ze zbędnych znaczników, wpisów , nadpisanych kodów itp.

Wiele darmowych programów do tworzenia stron internetowych (głównie typu wysiwyg) nadpisuje nasz kod zbędnymi informacjai o danym programie .

 

Pamiętaj że internauta nie wchodzi na Twoją… strone po to aby przyglą…dać się latają…cym po całej stronie "listkom" czy "balonikom" .

 

Pamiętaj równiez że strona nie musi byc cała oblepiona grafkią… - Zwróć uwage na czołowe polskie portale internetowe.

Ich strony wyglą…daja profesjonalnie, chociaż nie są… wielkim przedsięwzięciem garficznym .

 

Dziękuje za przeczytanie artykułu .

 

Autor: [usunięte na prośbę użytkownika] dla Webtips.pl

Prawa Autorskie: Pełnie praw autorskichposiada serwis www.webtips.pl

 

Kopiowanie i rozpowszechnianie surowo zabronione .

 

 

2006 Å  [usunięte na prośbę użytkownika] dla WebTips.PL

Share this post


Link to post
Share on other sites

Artykuł dla począ…tkują…cych, dla tych, którzy robią… pierwsze stronki, ale takich to jest najwięcej. Dobry art


Atmosphere-studio.com:

Oferujemy wykonanie:


  •  
  • stron internetowych (w caÅ‚oÅ›ci lub fragmentów)
  • skryptów (php, actionscript, js, html)
  • layout'ów (grafika i/lub kodowanie)
  • banerów
  • innych wybranych grafik
  • obróbki fotografii
  • jingli (przerywnik muzyczny) np. radiowych
  • ... oraz innych prac zwiÄ…zanych z podobnÄ… tematykÄ….

Muzyk jako Tilnaaay : http://www.youtube.com/tilnaay

Share this post


Link to post
Share on other sites
Guest Dawid

Dziękuje za pozytywną… ocene artykułu .

 

Masz racje .

Artykuł pisałem z myslą… o poczatkują…cych webmasterach, dlatego art znalazł się w dziale:

"Począ…tkują…cy webmaster".

 

Pozdrawiam

 

Dawid

Share this post


Link to post
Share on other sites

To są tylko takie podstawy, które jedynie skracają czas ładowania strony. Do tego dochodzi poprawne zakodowanie, żeby nie tylko ci z "jedyną słuszną przeglądarką" widzieli naszą stronę poprawnie. Oprócz tego dochodzi dobra typografia (na stronie w klimacie sci-fi nie użyjemy szeryfów, na stronie jakiejś kapeli gotyckiej jak najbardziej) i dobry dobór kolorystyki (nie gryząca się i pasująca do tematyki strony). Jeżeli zwrócimy uwagę na te wszystkie aspekty, możemy stworzyć przyjazny serwis, pozytywnie odbierany przez odwiedzających.

Share this post


Link to post
Share on other sites

Do tego dochodzi poprawne zakodowanie, żeby nie tylko ci z "jedyną… słuszną… przeglą…darką…" widzieli naszą… stronę poprawnie

 

dla począ…tkują…cych: mała informacja żeby nie brali powyższego stwierdzenia dosłownie, mam nadzieję że autorowi chodziło zapewne o opis strony za pomocą… TAGÓW i STYLI a nie o kodowanie znaków aczkolwiek kodowanie jest również bardzo istotne.

Share this post


Link to post
Share on other sites

heh :D

jakbym był począ…tkują…cy to byś się wystraszył :)

a ten tekst można skopiować w CAÅOÅšCI?

Razem z autorem itp. ?

Share this post


Link to post
Share on other sites
Autor: Dawid Wachałowicz dla Webtips.pl

Prawa Autorskie: Pełnie praw autorskichposiada serwis www.webtips.pl

 

Kopiowanie i rozpowszechnianie surowo zabronione .

 

 

2006 © Wachałowicz Dawid dla WebTips.PL

Raczej nie :P


Atmosphere-studio.com:

Oferujemy wykonanie:


  •  
  • stron internetowych (w caÅ‚oÅ›ci lub fragmentów)
  • skryptów (php, actionscript, js, html)
  • layout'ów (grafika i/lub kodowanie)
  • banerów
  • innych wybranych grafik
  • obróbki fotografii
  • jingli (przerywnik muzyczny) np. radiowych
  • ... oraz innych prac zwiÄ…zanych z podobnÄ… tematykÄ….

Muzyk jako Tilnaaay : http://www.youtube.com/tilnaay

Share this post


Link to post
Share on other sites

no wlasnie co by nie bylo .png to przyszlosc : ] tyle ze poki co są… problemy ze smIEciem bo nie odpowiednio interpretuje przezroczystosc w .png (co prawda mozna to ominac filtrami)

 

nie wiem czy pisales o tym bo nie czytalem wszytkiego, ale warto wspomniec ze .gif'ow nie powinno sie stosowac przy wiekszych obrazkach typu loga, topy.

 

btw. wysiwg a nie wysiwng ; )

Share this post


Link to post
Share on other sites
btw. wysiwg a nie wysiwng ; )

dupa bo wysiwyg -> What You See Is What You Get. Jak już kogoś poprawiasz to najpierw sprawdź czy dobrze ;)


django the web framework for ponies with magical powers

Share this post


Link to post
Share on other sites

Kompresja grafiki rastrowej na potrzeby stron www [wersja 1]

poradnik dla począ…tkują…cych

 

W większości na stronach internetowych możemy zobaczyć różnorodne grafiki, stosowane do urozmaicenia przekazu, zachęcenia do dalszego przeglą…dania serwisu. Gdy odwiedzają…cy mają… powolne łą…cze lub mamy za wolny serwer, przyjemność z surfowania na naszej stronie spada i w najgorszym przypadku gość opuszcza naszą… stronę. Można temu zapobiec stosują…c bezstratną… kompresję lub optymalizację już istnieją…cej grafiki. Najlepszymi formatami na potrzeby stron html są…

Hidden Content

    Give reaction or reply to this topic to see the hidden content.
i

Hidden Content

    Give reaction or reply to this topic to see the hidden content.
. Jpeg - do zdjęć, PNG do banerów, przycisków, schematów czy wykresów. GIF jest przestarzały - można stosować tylko 256 kolorów i 1 kolor przezroczystości; zastępuje go właśnie PNG - można (lecz nie trzeba!) stosować 24bit paletę kolorów i kanały alpha.

Potrzebne oprogramowanie:

• Adobe Photoshop - do ew. stworzenia grafik i zapisania na dysku.

• Paint ;) - jw.

• System operacyjny Linux (w przykładzie Ubuntu 9.04)

• programy optymalizacyjne (poniżej instrukcja ich instalacji)

 

1. INSTALACJA OPROGRAMOWANIA

Dlaczego Linux? Bo niezbędne kompresory (zwłaszcza pngnq, advpng, optipng) są… dostępne w najnowszych wersjach jako paczki z kodem źródłowym niemożliwym do łatwego skompilowania w Windows. Ubuntu można zamówić za darmo

Hidden Content

    Give reaction or reply to this topic to see the hidden content.
lub zupełnie legalnie ścią…gną…ć . W internecie jest mnóstwo artykułów dot. tego systemu i ew. problemach z instalacją…/przesiadką… z Windows. Można używać obydwu systemów na jednym dysku!

Mają…c już gotowy system ścią…gamy najnowszy soft:

• PNGOUT for linux (static!):

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

po rozpakowaniu wybieramy jeden(!) plik dla naszej architektury sprzętowej (w tym przypadku

"pngout-linux-i686-static") i wkładamy do katalogu z plikami do docelowej optymalizacji

• z menadżera pakietów Synaptic docią…gamy następują…ce pakiety:

libpng12-dev, optipng, advancecomp, jpegoptim, jpeginfo,

pngquant, pngtools

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

• możemy sami ścią…gną…ć kody źródłowe z oficjalnych stron optymalizatorów i sami

Hidden Content

    Give reaction or reply to this topic to see the hidden content.
następują…ce programy: optipng, pngquant, jpegoptim. Polecam to rozwią…zanie. Plusem jest najnowsza wersja powyższych programów co przekłada się na lepszą… wydajność i ulepszoną… kompresję

• konieczne pobranie i skompilowanie programu "pngnq" w wersji 1.0 (poprawka wprowadzona przez pornela) ze strony:

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

 

2. OPTYMALIZACJA GRAFIK JPEG

Posiadają…c ciężkie grafiki warto zeskalować je do mniejszej rozdzielczości. Wkładamy je do katalogu np. /home/[użytkownik]/kompresja/

Uruchamiamy terminal (tak, potrzebne będzie grzebanie w konsoli!), wchodzimy do powyższego katalogu:

cd /kompresja (mozna używać [Tab] do przyspieszenia operacji) i optymalizujemy zdjęcie:

jpegoptim -m100 --strip-all -f [plik.jpg]

Zawsze podajemy pełną… nazwę pliku/korzystamy z pierwszego znaku --> [Tab] i samo uzupełnia nam

nazwy. Mają…c kilkanaście obrazków do optymalizacji wpisujemy:

jpegoptim -m100 --strip-all -f *.jpg

Polecenie to zachowuje 100% jakość zdjęcia, lecz usuwa niepotrzebne informacje

Hidden Content

    Give reaction or reply to this topic to see the hidden content.
oraz dobiera wydajną… kompresję. Więcej o informacji o plikach jpeg uzyskuje się przez:

jpeginfo [plik.jpg]

W powyższym przypadku obrazek zmniejszył się o 40%.

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

3. OPTYMALIZACJA GRAFIK 24bit PNG

24bitowe pliki PNG zapisane Photoshopem posiadają… dużą… wagę. Można zmniejszyć je używają…c na począ…tku optipng, następnie zobaczyć czy zmniejszą… się używają…c advpng z pakietu advancecomp,

by następnie użyć PNGOUT. Zalecam użycie optipng+pngout gdyż zazwyczaj daje to najlepsze rezultaty. Umieść plik pngout'a w katalogu z obrazkiem .png! Wyglą…da to mniej więcej tak:

optipng -o7 [plik.png] lub

optipng -o7 *.png

nastepnie (mozna) użyć advpng:

advpng -z4 [plik.png]

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

czy PNGOUT żeby zobaczyć czy ten zmniejszy plik:

./pngout-linux-i686-static [plik.png]

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

W tym przypadku najlepszy okazał się advpng, choć w większości przypadków PNGOUT okazuje się w tym lepszy o ok. 10-20%. Ogólnie nasz plik zmniejszył się o 25%! Z uwagi na dość duże możliwości

konfiguracji tych programów, zastosowano najlepsze parametry dla optipng i advpng. Chcesz osią…gną…ć lepszy rezultat?

[program] --help

np. ./pngout-linux-i686-static --help

żeby dowiedzieć się więcej o opcjach

 

4. OPTYMALIZACJA GRAFIK 24bit PNG NA 8bit PNG

Nie jest to dobre rozwią…zanie dla kolorowych obrazków (np. zdjęć z kanałem alpha), gdyż powoduje to redukcję kolorów: z kilku milionów do zaledwie 256. Poniższe programy potrafią… zachować kanał alpha.

Możemy zastosować pngquant - jest już trochę postarzały, oficjalna wersja nie zawiera poprawek pornela. Lepsze rezultaty (lepszy dihtering - gładsze obszary, dość wolny ale skutecznie odchudza grafikę) daje ulepszony pngnq w wersji przynajmniej 1.0. Zajmiemy się oboma przypadkami. Obrazek w folderze z PNGOUT.

pngquant [liczba_kolorow] [plik.png]

np. pngquant 256 plik.png (nie nadpisuje pliku tylko tworzy nowy o innej nazwie)

LUB

pngnq -n[liczba_kolorow] -s1 [plik.png]

np. pngnq -n256 -s1 plik.png (nie nadpisuje pliku tylko tworzy nowy o innej nazwie)

Następnie możemy użyć lepszej kompresji z advpng czy PNGOUT, opisane jest to w 3. pkt. Rezultaty?

Pngquant (wyraźnie widoczne piksele): 74% kompresji; pngnq (dość dobry dihtering): 80%. Po

optymalizacji zyskały do odpowiednio: 76%(PNGOUT) i 82%(advpng).

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

 

5. OPTYMALIZACJA GIFów DO PNG

Gify charakteryzują… się 8bit paletą… kolorów - buttony, tła mają… odpowiednią… ilość kolorów i przyzwoitą… wagę. Zwłaszcza Photoshop posiada dość rozbudowane opcje do ich zapisu. Dlaczego warto je jednak

wymienić na 8bit PNG? Jakości nie zyskamy ale w 99% zmniejszymy ich objętość. Zastosujemy optipng do konwersji .gif-->.png następnie pngnq+PNGOUT/advpng. Można użyć pngquant -

jest opisany w 4. pkt. lecz w większości przypadków wydajniejszy jest pngnq. Do dzieła!

optipng -o7 [plik.gif]

utworzy wtedy plik o tej samej nazwie lecz z końcówką… .png ;) Sprawdzamy ile ma kolorów poleceniem:

pnginfo [plikdosprawdzenie.png]

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

 

Zazwyczaj dobranie max. ilości kolorów w pngnq i dopiero skompresowanie to PNGoutem/advpng skutkuje lepszą… kompresją… niż dobieranie takiej samej ilości z odczytu pnginfo z grafiki przekonwertowanej optipng. Stosujemy więc 256 kolorów:

pngnq -n256 -s1 [plik.png]

./pngout-linux-i686-static [plikpngnq.png]

ewentualnie

advpng -z4 [plikpngnq.png]

Rezultaty? Optipng+PNGOUT: 20% kompresji; pngquant+PNGOUT: 21%; pngnq+PNGOUT:

32%!

 

Prowadzą…c stronę generują…cą… spore obcią…żenie serwera, warto zaoszczędzić transfer optymalizują…c grafiki

rastrowe. Zaoszczędzimy wtedy pienią…dze a użytkownicy nie będą… dłużej czekać na ładują…cą… się grafikę!

 

Poradnik ten rozprowadzany jest na licencji

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

warunkach 2.5 Polska.

Wolno:

• kopiować, rozpowszechniać, odtwarzać i wykonywać utwór

• tworzyć utwory zależne

Wszelkie komentarze i uwagi proszę na maila: loobieto@gmail.com

Autor: @lubieto

 

Poradnik .pdf można ścią…gną…ć z:

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

lub

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

Bardziej przejrzysty i można czytać bez podłą…czonego neta ;)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...