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:

rel="stylesheet" type="text/css">

Przed: Po:

Jedno żądanie, wiele czcionek z Google Fonts

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

GEL - Performance Health

Performance Sportswear

JoomlaDay Poland 2013 - Joomla! - Automatyczne kopie zapasowe

Oferta produktowa Performance

AVG Performance User Manual

ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!

Przewodnik po Google Analytics - Performance Mediablog.performancemedia.pl/wp-content/uploads/2010/08/...•śledzenie aplikacji Flash, wideo i sieci społecznościowej, •zbieranie

Magento performance

Perfomance w Joomla - Jak przyspieszyć działanie strony?

Joomla!Days Poland 2012

Joomla! 3.5 - Czy mniej znaczy więcej?

SMARTPHONE - T-Mobile€¦ · Google, el logotipo de Google, Android, el logotipo de Android, Google Play, Gmail, Google Mail, Google Maps, Google Music, Google Hangouts, Picasa,

Dj-tabs w Joomla 2-5

Azure na Joomla Day2014

Daniel gootner live performance

Zastosowanie Dokumentów Google (Google Docs)

Joomla 1.5 PL Manual

Google+ to po prostu Google

Miasto. Obiekt. Performance

Joomla w świecie korporacji: JDay Poland 2014