Perfomance w Joomla - Jak przyspieszyć działanie strony?

PERFORMANCE W JOOMLA!

JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ?

Piotr Nalepa – Joomla Day Polska 2014

2

Kilka słów o mnie

Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska

BLOGER I WEBDEVELOPER

SPORTOWIEC AMATOR

3

Perfomance + Joomla = ?


4

Google PageSpeed


Narzędzie do analizowania wydajności strony internetowej w celu jej optymalizacji i przyspieszenia ładowania.

ur1.pl/pagespeed

5

WebPageTest


Darmowe narzędzie do testowania szybkości ładowania strony z wielu lokacji na całym świecie, w różnych przeglądarkach. Przedstawia informacje o prędkości ładowania strony, blokadzie dostępności do treści na stronie. Przedstawia również informacje o możliwych usprawnieniach dla strony.

www.webpagetest.org

6

Grunt.js


Javascriptowy menedżer zadań, oparty o node.js, służący do automatyzacji pracy webdevelopera.

www.gruntjs.com

7

Strona którą optymalizowałem


8

Przed – wynik w PageSpeed


9

Przed – analiza ogólna


10

Przed – pliki CSS


11

Przed – pliki JS


12

Przed – obrazki


13

Przed – kod HTML


14

Gotowi?


15

Optymalizacja CSS #1


Gdy korzystamy z frameworków CSS, typu Bootstrap czy Foundation, usuńmy zbędne

reguły CSS.

16



Zredukujmy specificity selektorów CSS dzięki stosowaniu wybranej metodologii pisania kodu CSS: OOCSS, BEM, AMCSS, itp., itd.

17



Optymalizujmy animacje CSS - Composite. Właściwości CSS, które można bezpiecznie

animować:

Aby włączyć wspomaganie GPU dopisujemy: translate3d(0, 0, 0)

Położenie transform: translate(x, y);

Skalowanie transform: scale(n);

Obracanie transform: rotate(deg);

Przezroczystość opacity: 0 … 1

18



Optymalizujmy animacje CSS - Layout. Właściwości CSS, które bardzo źle wpływają

na wydajność:

width, height, padding, margin, display, border-width, border, top, position, font-size, float, text-align, overflow-y, font-weight, overflow, left, font-family, line-height, vertical-align, right, clear, white-space,

bottom, min-height, itd.

19



Optymalizujmy animacje CSS - Paint. Właściwości CSS, które źle wpływają na wydajność:

color, border-style, visibility, background, text-decoration, background-image, background-position, background-repeat, outline-color, outline, outline-style, border-radius, outline-width, box-shadow,

background-size, itd.

20



Optymalizujmy animacje CSS. Pełna lista właściwości CSS i ich wpływ na animacje:

ur1.pl/cssanimacje

21

Optymalizacja JS #1


Łączenie wielu plików JS w jeden plik

22

Optymalizacja JS #2


Wykorzystanie asynchronicznych modułów JS (AMD)

23

Optymalizacja JS #3


Łączenie wielu niezbędnych plików JS w jeden,

a pozostałych w drugi plik JS i ładowanie drugiego pliku po załadowaniu strony.

24

Minifikacja plików CSS i JS


• Zmniejszenie wagi plików,• Zmniejszenie opóźnienia ładowania plików,• Obfuskacja plików JS za pomocą Uglify2

lub Google Closure.

25

Optymalizacja obrazków


• Zmniejszenie rozmiarów obrazka,• Optymalizowanie jakości obrazka,• Obrazki jako sprite’y,• Ładowanie obrazków pod Retinę (na

żądanie),• Logo strony jako SVG lub Base64.

26

Redukowanie wielkości pliku HTML


• Minifikowanie kodu HTML,• Usunięcie zbędnych klas, komentarzy,• Usunięcie stylów CSS wewnątrz HTML.

27

Optymalizacja ładowania czcionek


Ładowanie wybranych liter z Google Fonts:

<link href="http://fonts.googleapis.com/css?

family=Alegreya+Sans:300,700&text=JoomlaDayTM" rel="stylesheet" type="text/css">

28



Przed:

Po:

29



Jedno żądanie, wiele czcionek z Google Fonts

<link href="http://fonts.googleapis.com/css?

family=Roboto|Alegreya+Sans" rel="stylesheet">

30



Wykorzystanie localStorage jako systemu cache dla czcionek

31

Po – wynik w PageSpeed


32

Po – Analiza ogólna


33

Critical render path #1


Kod HTML i pliki (JS, CSS) wymagane aby wyświetlić początkowy widok strony.

34



Zastanów się, jakie elementy są potrzebne, aby wyświetlić widoczny (zaraz po

załadowaniu) kawałek strony?

35



Oprócz kodu HTML potrzebujemy:• Logo strony,• Główny obrazek artykułu,• Ikony menu,• Style CSS.

36



Możemy dodać po załadowaniu strony:• Kod JS Google Analytics,• Kod JS sieci społecznościowych,• Pozostałe obrazki,• Pozostałe pliki CSS i JS.

37



Po optymalizacji:• Niezbędną część kodu CSS wstawiono do

kodu HTML (25kB ze 104kB ogółem),• Przekonwertowanie logo strony do SVG lub

ciągu znaków Base64,• Zoptymalizowano wymagane obrazki,• Doładowywanie pozostałych obrazków,• Doładowywanie pozostałego kodu JS i CSS.

38

Ale po co to robić ręcznie?


39

Rozszerzenia Joomla!


• Mootools Enabler/Disabler,• JCH Optimize,• Content Optimizer.

40

Po użyciu rozszerzeń Joomla! – wynik w PageSpeed


41

Analiza ogólna – po użyciu rozszerzeń Joomla!


42

Podsumowanie


Mniejszy plik = szybsze ładowanie strony (nie zawsze!)

Liczy się też czas odpowiedzi z serwera.

Najlepsze wyniki osiągniesz, jeśli ręcznie zoptymalizujesz stronę.

Optymalizuj z głową!

43

Pytania?


44

Dziękuję za uwagę!


blog.piotrnalepa.pl

ur1.pl/fanpage@sunpietro

Perfomance w Joomla - Jak przyspieszyć działanie strony?

Internet

Transcript of Perfomance w Joomla - Jak przyspieszyć działanie strony?