optymalizacja - Kody, triki, sztuczki

20 lis 2019

Jak usunąć nadmiarowy css, tailwindcss, purgecss oraz postcss

Każdy wie, że największą bolączką obecnych stron jest nadmiarowość wszelakiego kodu. Często same style dochodzą do 1MB a gdzie reszta, DOM, obrazki, skrypty, analityka google, reklamy? Do tego wszystkie te pliki css, js itd. ładowane są za jednym razem.

Większość z nas aby przyspieszyć sobie pracę korzysta z css frameworków. Czy to będzie bootstrap, semantic ui, materialize css, fundation i mógłbym jeszcze tak wymieniać i wymieniać. Najlepiej sami zobaczcie ile tego jest - awesome-css-frameworks, ale czy na pewno potrzebny nam jest cały kod np. takiego bootstrapa, no raczej nie?

Frameworki te mają też jedną poważną wadę, przynajmniej dla mnie, składają się z komponentów które jeżeli chcemy zmodyfikować to musimy nieźle się nagimnastykować z !important. Wszystko trzeba nadpisywać!.

A może by tak użyć frameworka, który nie będzie posiadał komponentów ale czyste style. Wiąże się to oczywiście z pisaniem wszystkie we własnym zakresie, ale tak możemy użyć Tailwindcss, poniżej informacja ze strony czym dokładnie jest ten framework.

Czytaj dalej

21 maj 2019

Tworzenie fragmentów dokumentu

CreateDocumentFragment jest metodą, która tworzy fragment dokumentu, jest to wirtualny dokument. Jest on podobny do diva, ale przy wstawianiu go do dokumentu, wstawiamy jego dzieci.

Gdzie to stosować, tam gdzie zależy Ci na wydajności i danych których wstawiasz jest dużo. Gdy wstawiamy do html nowy element całe drzewo DOM musi być za każdym razem przebudowywane.

const fragment = document.createDocumentFragment();
const ul = document.createElement("ul");

for (let i = 0; i < 10; i += 1) {
  ul.appendChild(document.createElement('li'))
    .appendChild(document.createTextNode("li element " + (i + 1)));
  fragment.appendChild(ul);
}

document.body.appendChild(fragment);
// wynik dostaniemy listę 10 elementów
// lista 1
// ...
// lista 10

Przykład dodania 540 rekordów.
Wersja użycia innerHTML w pętli - czas wykonania: 0.146240234375ms zaś wersja korzystająca z createDocumentFragment - czas wykonania: 0.072041015625ms

14 kwi 2019

Google AdSense, wiele reklam - optymalizacja kodu

Najpierw zadajmy sobie pytanie. Ile reklam chcemy umieścić na stornie, jeżeli więcej niż jedną to zapewniam warto przeczytać poniższy tekst 😉
Na stornie Google AdSense kod wygenerowany zawsze wygląda podobnie jak ten poniżej.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- SiteName -->
<ins class="adsbygoogle" 
  style="display:block;"
  data-ad-client="pub-111111111111111"
  data-ad-slot="2222222222"   
  data-ad-width="250"
  data-ad-height="250"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});  });
</script>

Problem jaki występuje przy większej liczbie reklam to to że wywołujemy kilka razy tę samą stronę, a to ma bardzo duże znaczenie przy optymalizacji strony i szybkości jej działania.
Najprostszym rozwiązaniem jest oczywiście wywołanie tylko raz 🙂

Czytaj dalej