PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!
Transcript of PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!
![Page 1: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/1.jpg)
PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA
SZYBCIEJ?
Piotr Nalepa – Joomla Day Polska 2014
![Page 2: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/2.jpg)
Kilka słów o mnie
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 2
BLOGER I WEBDEVELOPER
SPORTOWIEC AMATOR
![Page 3: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/3.jpg)
Perfomance + Joomla = ?
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 3
![Page 4: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/4.jpg)
Google PageSpeed
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 4
Narzędzie do analizowania wydajności strony internetowej w celu jej optymalizacji i przyspieszenia ładowania. ur1.pl/pagespeed
![Page 5: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/5.jpg)
WebPageTest
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 5
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
![Page 6: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/6.jpg)
Grunt.js
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 6
Javascriptowy menedżer zadań, oparty o node.js, służący do automatyzacji pracy webdevelopera.
www.gruntjs.com
![Page 7: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/7.jpg)
Strona którą optymalizowałem
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 7
![Page 8: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/8.jpg)
Przed – wynik w PageSpeed
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 8
![Page 9: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/9.jpg)
Przed – analiza ogólna
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 9
![Page 10: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/10.jpg)
Przed – pliki CSS
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 10
![Page 11: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/11.jpg)
Przed – pliki JS
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 11
![Page 12: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/12.jpg)
Przed – obrazki
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 12
![Page 13: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/13.jpg)
Przed – kod HTML
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 13
![Page 14: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/14.jpg)
Gotowi?
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 14
![Page 15: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/15.jpg)
Optymalizacja CSS #1
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 15
Gdy korzystamy z frameworków CSS, typu Bootstrap czy Foundation, usuńmy zbędne
reguły CSS.
![Page 16: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/16.jpg)
Optymalizacja CSS #2
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 16
Zredukujmy specificity selektorów CSS dzięki stosowaniu wybranej metodologii pisania kodu
CSS: OOCSS, BEM, AMCSS, itp., itd.
![Page 17: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/17.jpg)
Optymalizacja CSS #3
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 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
![Page 18: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/18.jpg)
Optymalizacja CSS #4
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 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.
![Page 19: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/19.jpg)
Optymalizacja CSS #5
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 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.
![Page 20: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/20.jpg)
Optymalizacja CSS #6
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 20
Optymalizujmy animacje CSS. Pełna lista właściwości CSS i ich wpływ na animacje:
ur1.pl/cssanimacje
![Page 21: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/21.jpg)
Optymalizacja JS #1
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 21
Łączenie wielu plików JS w jeden plik
![Page 22: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/22.jpg)
Optymalizacja JS #2
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 22
Wykorzystanie asynchronicznych modułów JS (AMD)
![Page 23: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/23.jpg)
Optymalizacja JS #3
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 23
Łączenie wielu niezbędnych plików JS w jeden, a pozostałych w drugi plik JS i ładowanie drugiego pliku po załadowaniu strony.
![Page 24: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/24.jpg)
Minifikacja plików CSS i JS
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 24
• Zmniejszenie wagi plików, • Zmniejszenie opóźnienia ładowania plików, • Obfuskacja plików JS za pomocą Uglify2
lub Google Closure.
![Page 25: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/25.jpg)
Optymalizacja obrazków
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 25
• 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.
![Page 26: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/26.jpg)
Redukowanie wielkości pliku HTML
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 26
• Minifikowanie kodu HTML, • Usunięcie zbędnych klas, komentarzy, • Usunięcie stylów CSS wewnątrz HTML.
![Page 27: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/27.jpg)
Optymalizacja ładowania czcionek
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 27
Ł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">
![Page 28: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/28.jpg)
Optymalizacja ładowania czcionek
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 28
Przed: Po:
![Page 29: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/29.jpg)
Optymalizacja ładowania czcionek
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 29
Jedno żądanie, wiele czcionek z Google Fonts
<link href="http://fonts.googleapis.com/css?family=Roboto|Alegreya+Sans" rel="stylesheet">
![Page 30: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/30.jpg)
Optymalizacja ładowania czcionek
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 30
Wykorzystanie localStorage jako systemu cache dla czcionek
![Page 31: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/31.jpg)
Po – wynik w PageSpeed
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 31
![Page 32: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/32.jpg)
Po – Analiza ogólna
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 32
![Page 33: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/33.jpg)
Critical render path #1
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 33
Kod HTML i pliki (JS, CSS) wymagane aby wyświetlić początkowy widok strony.
![Page 34: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/34.jpg)
Critical render path #2
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 34
Zastanów się, jakie elementy są potrzebne, aby wyświetlić widoczny (zaraz po załadowaniu)
kawałek strony?
![Page 35: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/35.jpg)
Critical render path #3
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 35
Oprócz kodu HTML potrzebujemy: • Logo strony, • Główny obrazek artykułu, • Ikony menu, • Style CSS.
![Page 36: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/36.jpg)
Critical render path #4
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 36
Możemy dodać po załadowaniu strony: • Kod JS Google AnalyXcs, • Kod JS sieci społecznościowych, • Pozostałe obrazki, • Pozostałe pliki CSS i JS.
![Page 37: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/37.jpg)
Critical render path #5
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 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.
![Page 38: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/38.jpg)
Ale po co to robić ręcznie?
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 38
![Page 39: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/39.jpg)
Rozszerzenia Joomla!
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 39
• Mootools Enabler/Disabler, • JCH Optimize, • Content Optimizer.
![Page 40: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/40.jpg)
Po użyciu rozszerzeń Joomla! – wynik w PageSpeed
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 40
![Page 41: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/41.jpg)
Analiza ogólna – po użyciu rozszerzeń Joomla!
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 41
![Page 42: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/42.jpg)
Podsumowanie
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 42
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ą!
![Page 43: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/43.jpg)
Pytania?
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 43
![Page 44: PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!](https://reader030.fdocuments.pl/reader030/viewer/2022040923/5e9dd482b343bd57a9192c78/html5/thumbnails/44.jpg)
Dziękuję za uwagę! J
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 44
blog.piotrnalepa.pl
ur1.pl/fanpage @sunpietro