performance w joomla! · google pagespeed performance!w!joomla!!
Post on 18-Apr-2020
12 Views
Preview:
TRANSCRIPT
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 = ?
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 3
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
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
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
Strona którą optymalizowałem
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 7
Przed – wynik w PageSpeed
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 8
Przed – analiza ogólna
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 9
Przed – pliki CSS
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 10
Przed – pliki JS
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 11
Przed – obrazki
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 12
Przed – kod HTML
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 13
Gotowi?
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 14
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.
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.
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
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.
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.
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
Optymalizacja JS #1
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 21
Łączenie wielu plików JS w jeden plik
Optymalizacja JS #2
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 22
Wykorzystanie asynchronicznych modułów JS (AMD)
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.
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.
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.
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.
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">
Optymalizacja ładowania czcionek
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 28
Przed: Po:
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">
Optymalizacja ładowania czcionek
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 30
Wykorzystanie localStorage jako systemu cache dla czcionek
Po – wynik w PageSpeed
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 31
Po – Analiza ogólna
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 32
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.
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?
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.
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.
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.
Ale po co to robić ręcznie?
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 38
Rozszerzenia Joomla!
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 39
• Mootools Enabler/Disabler, • JCH Optimize, • Content Optimizer.
Po użyciu rozszerzeń Joomla! – wynik w PageSpeed
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 40
Analiza ogólna – po użyciu rozszerzeń Joomla!
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 41
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ą!
Pytania?
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 43
Dziękuję za uwagę! J
Performance w Joomla! -‐ Piotr Nalepa -‐ Joomla Day 2014 Polska 44
blog.piotrnalepa.pl
ur1.pl/fanpage @sunpietro
top related