PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ? Piotr Nalepa Joomla Day Polska 2014
BLOGER I WEBDEVELOPER Kilka słów o mnie SPORTOWIEC AMATOR 2
Perfomance + Joomla =? 3
Google PageSpeed Narzędzie do analizowania wydajności strony internetowej w celu jej optymalizacji i przyspieszenia ładowania. ur1.pl/pagespeed 4
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 5
Grunt.js Javascriptowy menedżer zadań, oparty o node.js, służący do automatyzacji pracy webdevelopera. www.gruntjs.com 6
Strona którą optymalizowałem 7
Przed wynik w PageSpeed 8
Przed analiza ogólna 9
Przed pliki CSS 10
Przed pliki JS 11
Przed obrazki 12
Przed kod HTML 13
Gotowi? 14
Optymalizacja CSS #1 Gdy korzystamy z frameworków CSS, typu Bootstrap czy Foundation, usuńmy zbędne reguły CSS. 15
Optymalizacja CSS #2 Zredukujmy specificity selektorów CSS dzięki stosowaniu wybranej metodologii pisania kodu CSS: OOCSS, BEM, AMCSS, itp., itd. 16
Optymalizacja CSS #3 Optymalizujmy animacje CSS - Composite. Właściwości CSS, które można bezpiecznie animować: Położenie transform: translate(x, y); Skalowanie transform: scale(n); Obracanie transform: rotate(deg); Przezroczystość opacity: 0 1 Aby włączyć wspomaganie GPU dopisujemy: translate3d(0, 0, 0) 17
Optymalizacja CSS #4 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. 18
Optymalizacja CSS #5 Optymalizujmy animacje CSS - Paint. Właściwości CSS, które źle wpływają na wydajność: color, border-style, visibility, background, text-decoration, backgroundimage, background-position, background-repeat, outline-color, outline, outline-style, border-radius, outline-width, box-shadow, background-size, itd. 19
Optymalizacja CSS #6 Optymalizujmy animacje CSS. Pełna lista właściwości CSS i ich wpływ na animacje: ur1.pl/cssanimacje 20
Optymalizacja JS #1 Łączenie wielu plików JS w jeden plik 21
Optymalizacja JS #2 Wykorzystanie asynchronicznych modułów JS (AMD) 22
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. 23
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. 24
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. 25
Redukowanie wielkości pliku HTML Minifikowanie kodu HTML, Usunięcie zbędnych klas, komentarzy, Usunięcie stylów CSS wewnątrz HTML. 26
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"> 27
Optymalizacja ładowania czcionek Przed: Po: 28
Optymalizacja ładowania czcionek Jedno żądanie, wiele czcionek z Google Fonts <link href="http://fonts.googleapis.com/css? family=roboto Alegreya+Sans" rel="stylesheet"> 29
Optymalizacja ładowania czcionek Wykorzystanie localstorage jako systemu cache dla czcionek 30
Po wynik w PageSpeed 31
Po Analiza ogólna 32
Critical render path #1 Kod HTML i pliki (JS, CSS) wymagane aby wyświetlić początkowy widok strony. 33
Critical render path #2 Zastanów się, jakie elementy są potrzebne, aby wyświetlić widoczny (zaraz po załadowaniu) kawałek strony? 34
Critical render path #3 Oprócz kodu HTML potrzebujemy: Logo strony, Główny obrazek artykułu, Ikony menu, Style CSS. 35
Critical render path #4 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. 36
Critical render path #5 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. 37
Ale po co to robić ręcznie? 38
Rozszerzenia Joomla! Mootools Enabler/Disabler, JCH Optimize, Content Optimizer. 39
Po użyciu rozszerzeń Joomla! wynik w PageSpeed 40
Analiza ogólna po użyciu rozszerzeń Joomla! 41
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ą! 42
Pytania? 43
Dziękuję za uwagę! J blog.piotrnalepa.pl ur1.pl/fanpage @sunpietro 44