Perfomance w Joomla - Jak przyspieszyć działanie strony?
•Download as PPTX, PDF•
0 likes•3,953 views
Prezentacja z JoomlaDay 2014 w Polsce wygłoszona przeze mnie - Piotr Nalepa. W prezentacji omówiłem sposoby na uzyskanie wysokiego wyniku w Google PageSpeed oraz sposób na skrócenie czasu ładowania strony do 1 sekundy.
Perfomance w Joomla - Jak przyspieszyć działanie strony?
- 1. PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ? Piotr Nalepa – Joomla Day Polska 2014
- 2. Kilka słów o mnie BLOGER I WEBDEVELOPER SPORTOWIEC AMATOR Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 2
- 3. Perfomance + Joomla = ? Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 3
- 4. Google PageSpeed Narzędzie do analizowania wydajności strony internetowej w celu jej optymalizacji i przyspieszenia ładowania. Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 4 ur1.pl/pagespeed
- 5. 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. Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 5 www.webpagetest.org
- 6. Grunt.js Javascriptowy menedżer zadań, oparty o node.js, służący do automatyzacji pracy webdevelopera. Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 6 www.gruntjs.com
- 7. Strona którą optymalizowałem Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 7
- 8. Przed – wynik w PageSpeed Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 8
- 9. Przed – analiza ogólna Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 9
- 10. Przed – pliki CSS Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 10
- 11. Przed – pliki JS Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 11
- 12. Przed – obrazki Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 12
- 13. Przed – kod HTML Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 13
- 14. Gotowi? Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 14
- 15. Optymalizacja CSS #1 Gdy korzystamy z frameworków CSS, typu Bootstrap czy Foundation, usuńmy zbędne reguły CSS. Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 15
- 16. Optymalizacja CSS #2 Zredukujmy specificity selektorów CSS dzięki stosowaniu wybranej metodologii pisania kodu CSS: OOCSS, BEM, AMCSS, itp., itd. Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 16
- 17. 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) Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 17
- 18. 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, align, overflow-y, font-weight, overflow, left, font-family, line-height, white-space, bottom, min-height, itd. Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 18
- 19. 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, position, background-repeat, outline-color, outline, outline-style, box-shadow, background-size, itd. Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 19
- 20. Optymalizacja CSS #6 Optymalizujmy animacje CSS. Pełna lista właściwości CSS i ich wpływ na animacje: ur1.pl/cssanimacje Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 20
- 21. Optymalizacja JS #1 Łączenie wielu plików JS w jeden plik Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 21
- 22. Optymalizacja JS #2 Wykorzystanie asynchronicznych modułów JS (AMD) Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 22
- 23. 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. Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 23
- 24. 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. Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 24
- 25. 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. Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 25
- 26. Redukowanie wielkości pliku HTML • Minifikowanie kodu HTML, • Usunięcie zbędnych klas, komentarzy, • Usunięcie stylów CSS wewnątrz HTML. Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 26
- 27. Optymalizacja ładowania czcionek Ładowanie wybranych liter z Google Fonts: <link href="http://fonts.googleapis.com/css?family=Al egreya+Sans:300,700&text=JoomlaDayTM" rel="stylesheet" type="text/css"> Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 27
- 28. Optymalizacja ładowania czcionek Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 28 Przed: Po:
- 29. Optymalizacja ładowania czcionek Jedno żądanie, wiele czcionek z Google Fonts <link href="http://fonts.googleapis.com/css?family=Ro boto|Alegreya+Sans" rel="stylesheet"> Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 29
- 30. Optymalizacja ładowania czcionek Wykorzystanie localStorage jako systemu cache dla czcionek Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 30
- 31. Po – wynik w PageSpeed Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 31
- 32. Po – Analiza ogólna Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 32
- 33. Critical render path #1 Kod HTML i pliki (JS, CSS) wymagane aby wyświetlić początkowy widok strony. Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 33
- 34. Critical render path #2 Zastanów się, jakie elementy są potrzebne, aby wyświetlić widoczny (zaraz po załadowaniu) kawałek strony? Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 34
- 35. Critical render path #3 Oprócz kodu HTML potrzebujemy: • Logo strony, • Główny obrazek artykułu, • Ikony menu, • Style CSS. Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 35
- 36. Critical render path #4 Możemy dodać po załadowaniu strony: • Kod JS Google Analytics, • Kod JS sieci społecznościowych, • Pozostałe obrazki, • Pozostałe pliki CSS i JS. Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 36
- 37. 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 Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 37 Base64, • Zoptymalizowano wymagane obrazki, • Doładowywanie pozostałych obrazków, • Doładowywanie pozostałego kodu JS i CSS.
- 38. Ale po co to robić ręcznie? Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 38
- 39. Rozszerzenia Joomla! • Mootools Enabler/Disabler, • JCH Optimize, • Content Optimizer. Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 39
- 40. Po użyciu rozszerzeń Joomla! – wynik w PageSpeed Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 40
- 41. Analiza ogólna – po użyciu rozszerzeń Joomla! Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 41
- 42. 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ą! Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 42
- 43. Pytania? Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 43
- 44. Dziękuję za uwagę! blog.piotrnalepa.pl ur1.pl/fanpage @sunpietro Performance w Joomla! - Piotr Nalepa - Joomla Day 2014 Polska 44
Editor's Notes
- #19: Przerysowanie layoutu strony – width, height, padding, margin, display, border-width, border, top, position, font-size, float, text-align, overflow-y, font-weight, overflowleft font-familyline-height vertical-alignright clearwhite-space bottommin-heightKolorowanie – box-shadow, border-radius, background, outline Kompozycja warstw – transform, opacity
- #20: Przerysowanie layoutu strony – width, height, padding, margin, display, border-width, border, top, position, font-size, float, text-align, overflow-y, font-weight, overflowleft font-familyline-height vertical-alignright clearwhite-space bottommin-heightKolorowanie – box-shadow, border-radius, background, outline Kompozycja warstw – transform, opacity
- #21: Przerysowanie layoutu strony – width, height, padding, margin, display, border-width, border, top, position, font-size, float, text-align, overflow-y, font-weight, overflowleft font-familyline-height vertical-alignright clearwhite-space bottommin-heightKolorowanie – box-shadow, border-radius, background, outline Kompozycja warstw – transform, opacity