Czy "inline" rzeczywiście psuje kod i...

przez **Czałczesq** » 12 kwi 2018, o 11:53

Witajcie,

korzystając z narzędzie takich jak Seoptimer czy Woorank, dostałem ostrzeżenie że "inline" jest niekorzystny dla kodu strony. Czy ktoś obeznany, kto ma wgląd w ten temat mógłby powiedzieć obiektywnie jak to naprawdę jest. Byłbym niezmiernie wdzięczny gdym otrzymał odpowiedź pod kątem mojej strony: http://human2.com.pl/
A mianowicie czy powinienem usunąć styl inline ze swojej strony, zmnieszyć ilość ,usunąć w poszeczególnych miejscach czy zostawić tak jak jest ?

Pozdrawiam, Michał.

przez **bercik156** » 14 kwi 2018, o 03:28

Cześć,

Zacznijmy od tego, że według przyjętych standardów na całym świecie nie używa się css inline.

Z tym, że jest niekorzystny dla strony to nie do końca tak jest. Jest po prostu przestarzały i nie według standardów. Na dzisiejsze czasy używamy identyfikatorów i klas dodatkowo do tego wiadomo css doładowywany do strony.

Teraz czemu się z tego nie korzysta.
Według standardów np. takiego Google treść strony ma się załadować jak najszybciej. Treść strony to jest cały dokument HTML. Dopisując do każdego elementu HTML styl css interpreter HTML razem z interpreterem CSS ładują stronę linijka po linijce budując treść oraz styl. Więc strona ładuję się dłużej. Ale w tym wszystkim chodzi o to, że przykładowo:

Dokument HTML oparty na inline waży dajmy na to 400KB.
Ten sam dokument oparty na klasy waży np. 150KB do tego doładowanie stylu CSS 50KB.
Więc widać, że różnica jest 200KB. Teraz pewnie pytanie ale skąd taka różnica?
Różnica wynika stąd, że używasz klas. Nie ma sensu powtarzać ten sam styl css 50 razy na stronie, to marnowanie miejsca, a zatem czasu ładowania przez przeglądarkę strony. Przykład:

Strona inline:
<html>
<head></head>
<body>
<div style="width:100%;max-height:200px">
<div style="width:300px; height:50px; margin: 0 auto">
<a href="linkdostrony/.../" style="color:#396189; text-decoration:none; font-size: 14px;">Przykładowy nagłówek</a>
</div>
<div style="width:100%;min-height:50px;height:100%;margin:15px"><p style="jakiś styl">Treść wpisu</p></div>
<div>
</body>
</html>

Strona z doładowaniem CSS.

<html>
<head>
<link href="style.css">
</head>
<body>
<div class="post">
<div class="post-header">
<a href="linkdostrony/.../">Przykładowy nagłówek 1</a>
</div>
<div class="post-content"><p>Treść wpisu</p></div>
</div>
<div class="post">
<div class="post-header">
<a href="linkdostrony/.../">Przykładowy nagłówek 2</a>
</div>
<div class="post-content"><p>Treść wpisu</p></div>
</div>
<div class="post">
<div class="post-header">
<a href="linkdostrony/.../">Przykładowy nagłówek 3</a>
</div>
<div class="post-content"><p>Treść wpisu</p></div>
</div>
</body>
</html>

style.css

post{
width:100%;
max-height:200px
}
post-head{
width:300px;
height:50px;
margin: 0 auto
}
a{
color:#396189;
text-decoration:none;
font-size: 14px;
}
post-content{
width:100%;
min-height:50px;
height:100%;
margin:15px
}
p{
jakiś styl
}

Jak chyba widzisz jest to spore zmniejszenie ilości kodu na stronie

Mniej kodu = Mniej czasu na jego napisanie = Mniejszy plik do wczytania przez przeglądarkę = Szybsze ładowanie strony

Innymi słowy przepisuj stronę

wordpress.org.pl

Czy "inline" rzeczywiście psuje kod i...