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 = ?

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

4

Google PageSpeed

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

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

ur1.pl/pagespeed

5

WebPageTest

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

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

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

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

www.gruntjs.com

7

Strona którą optymalizowałem

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

8

Przed – wynik w PageSpeed

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

9

Przed – analiza ogólna

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

10

Przed – pliki CSS

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

11

Przed – pliki JS

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

12

Przed – obrazki

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

13

Przed – kod HTML

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

14

Gotowi?

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

15

Optymalizacja CSS #1

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

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

reguły CSS.

16

Optymalizacja CSS #2

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

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

17

Optymalizacja CSS #3

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

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

Optymalizacja CSS #4

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

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

Optymalizacja CSS #5

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

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

Optymalizacja CSS #6

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

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

ur1.pl/cssanimacje

21

Optymalizacja JS #1

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

Łączenie wielu plików JS w jeden plik

22

Optymalizacja JS #2

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

Wykorzystanie asynchronicznych modułów JS (AMD)

23

Optymalizacja JS #3

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

Łą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

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

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

lub Google Closure.

25

Optymalizacja obrazków

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

• 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

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

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

27

Optymalizacja ładowania czcionek

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

Ł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

Optymalizacja ładowania czcionek

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

Przed:

Po:

29

Optymalizacja ładowania czcionek

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

Jedno żądanie, wiele czcionek z Google Fonts

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

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

30

Optymalizacja ładowania czcionek

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

Wykorzystanie localStorage jako systemu cache dla czcionek

31

Po – wynik w PageSpeed

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

32

Po – Analiza ogólna

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

33

Critical render path #1

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

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

34

Critical render path #2

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

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

załadowaniu) kawałek strony?

35

Critical render path #3

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

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

36

Critical render path #4

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

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

Critical render path #5

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

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?

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

39

Rozszerzenia Joomla!

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

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

40

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

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

41

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

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

42

Podsumowanie

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

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?

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

44

Dziękuję za uwagę!

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

blog.piotrnalepa.pl

ur1.pl/fanpage@sunpietro