PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!

PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA

SZYBCIEJ?

Piotr Nalepa – Joomla Day Polska 2014

Kilka słów o mnie

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

BLOGER I WEBDEVELOPER

SPORTOWIEC AMATOR

Perfomance + Joomla = ?


Google PageSpeed


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

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

Grunt.js


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

www.gruntjs.com

Strona którą optymalizowałem


Przed – wynik w PageSpeed


Przed – analiza ogólna


Przed – pliki CSS


Przed – pliki JS


Przed – obrazki


Przed – kod HTML


Gotowi?


Optymalizacja CSS #1


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

reguły CSS.



Zredukujmy specificity selektorów CSS dzięki stosowaniu wybranej metodologii pisania kodu

CSS: OOCSS, BEM, AMCSS, itp., itd.



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



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.



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.



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

ur1.pl/cssanimacje

Optymalizacja JS #1


Łączenie wielu plików JS w jeden plik

Optymalizacja JS #2


Wykorzystanie asynchronicznych modułów JS (AMD)

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.

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.

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.

Redukowanie wielkości pliku HTML


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

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">



Przed: Po:



Jedno żądanie, wiele czcionek z Google Fonts

<link href="http://fonts.googleapis.com/css?family=Roboto|Alegreya+Sans" rel="stylesheet">



Wykorzystanie localStorage jako systemu cache dla czcionek

Po – wynik w PageSpeed


Po – Analiza ogólna


Critical render path #1


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



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

kawałek strony?



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



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.



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.

Ale po co to robić ręcznie?


Rozszerzenia Joomla!


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

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


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


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

Pytania?


Dziękuję za uwagę! J


blog.piotrnalepa.pl

ur1.pl/fanpage @sunpietro

PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!

Documents

Transcript of PERFORMANCE W JOOMLA! · Google PageSpeed Performance!w!Joomla!!