Prezentacja otwierająca WordCamp Gdynia 2016, traktująca o czynnikach wpływających na ekosystem WordPressa oraz o tym jak będzie wyglądała przyszłość WordPressa.
Prezentacja otwierająca WordCamp Gdynia 2016, traktująca o czynnikach wpływających na ekosystem WordPressa oraz o tym jak będzie wyglądała przyszłość WordPressa.
Jak tworzyć motywy przyjazne użytkownikom i programistom - WordUp SilesiaTomasz Dziuda
Kolejna iteracja mojej prezentacji dotyczącej tworzenia motywów, które spełniają nie tylko potrzeby użytkowników ale też programistów, którzy z nimi pracują.
Contributor Day - WordCamp Lublin 2017 - przegląd motywówTomasz Dziuda
Zbiór porad i informacji dla osób chcących zajmować się przeglądem motywów kandydujących do pojawienia się na oficjalnym repozytorium WordPress.org. Przygotowany z myślą o uczestnikach Contributor Day
Na Contributor Day przed WordCampem w Gdyni przeprowadziłem review motywu na żywo dla uczestników, którzy również przeglądali motywy. Zauważyłem, że dla wszystkich było to interesujące doświadczenie i pokazywało wiele kwestii, które normalnie się pomija mówiąc jak przeglądać motywy.
Dlatego przejrzałem kod kilkudziesięciu motywów (nie mylić z pełnym review) z kilkuset czekających w kolejce do przejrzenia i wybrałem najciekawsze błędy developerów motywów, aby je omówić i zaproponować lepsze rozwiązania.
Dlaczego? Bo jedną z idei oprogramowania Open Source jest wspólna nauka (także ta na cudzych błędach).
Wielomilonowy ruch na wordpressie wordpress wordcamp gdynia 2016Lukasz Wilczak
W powszechnej opinii WordPress nie jest używany do tworzenia serwisów o dużym natężeniu ruchu. Jednak przy odpowiednim zapleczu i konfiguracji możemy korzystać z jego możliwości i nie martwić się o wydajność. Z prezentacji dowiesz się, jak w Grand Parade tworzymy serwisy i przygotowujemy pod nie infrastrukturę dla blogów o dużym natężeniu ruchu i tematyce bettingowej takich jak: news.bwin.com, articles.matchbook.com, news.ladbrokes.com czy sunbets.cu.uk.
Omówimy mechanizmy cache-ujące takie jak Varnish, Redis, infrastrukturę CloudFront i S3 Amazona, sposoby skalowania środowisk z użyciem Load Balancera.
Rozszerzanie witryny o obsługę nowych języków lub krajówPerformance Media
Witryny multiregionalne i wielojęzyczne:
1. Problemy z wyszukiwaniem witryn międzynarodowych
2. Kilka pytań przed dodaniem nowego języka
3. Przykłady rozszerzania zasięgu na nowe kraje
4. Sygnały pomagające Google zrozumieć witrynę międzynarodową
5. Najlepsze praktyki
Od dawna Flash wykorzystywany jest do tworzenia efektownych, interaktywnych witryn WWW i prezentacji internetowych. Język programowania Action Script, znacznie rozbudowany w najnowszych wersjach tej aplikacji, umożliwia napisanie wielu oryginalnych, ciekawych programów. Czasem jednak nawet tak olbrzymi potencjał, jakim dysponuje Action Script, okazuje się niewystarczający. Co zrobić, gdy trzeba sięgnąć do bazy danych znajdującej się na serwerze lub przechować informacje o sesji? Jak dynamicznie uaktualniać treść artykułów opublikowanych w witrynie? Odpowiedź jest oczywista, trzeba sięgnąć po inne, rewelacyjne narzędzie dla twórców stron WWW, czyli duet PHP i MySQL -- dostępny nieodpłatnie w pełni obiektowy język programowania oraz stabilna i wydajna baza danych.
Książka "Flash i PHP5. Podstawy" to niezastąpiony poradnik dla tych użytkowników Flasha, którzy chcą "wycisnąć" z niego więcej, niż oferuje Action Script. Czytając ją, nauczysz się łączyć witryny WWW tworzone we Flashu ze skryptami PHP i bazą danych MySQL. Poznasz podstawy języków PHP i SQL i dowiesz się, jak skonfigurować środowisko pracy. Znajdziesz w niej informacje o możliwościach wykorzystania PHP do realizacji zadań, których wykonanie za pomocą języka Action Script byłoby niemożliwe. Te zadania to przetwarzanie danych wprowadzanych przez użytkowników, zapisywanie i odczytywanie informacji z bazy danych, zarządzanie sesjami i tworzenie mechanizmu zarządzania treścią serwisu.
* Instalacja i konfiguracja środowiska
* Wysyłanie danych z formularzy za pomocą poczty elektronicznej
* Obliczenia matematyczne w PHP
* Przetwarzanie danych tekstowych
* Tworzenie czytnika RSS
* Praca z bazami MySQL i SQLite
* Wprowadzanie informacji do bazy danych
* Obsługa sesji
* System CMS oparty o bazę danych i XML
Wykorzystaj PHP i stwórz dynamiczne witryny WWW we Flashu.
#MTC2018: Optymalizacja doświadczenia użytkownika na stronach mobilnych w cel...Mobile Trends
Optymalizacja doświadczenia użytkownika na stronach mobilnych poprzez zastosowanie nowych technologii typu AMP, PWA. Jak podejść do tego strategicznie, priorytetyzować działania? Prezentacja oparta na przykładach i case studies. Prelekcja wygłoszona podczas Mobile Trends Conference, 1-2 marca 2018 r. w Krakowie.
Wszystko, co chciałbyś wiedzieć o WooCommerce, ale bałeś się zapytaćMaciej Swoboda
Pytania o WooCommerce, na które odpowiadam w prezentacji w ramach WordUp Trójmiasto #7.
1. Jakie jest Twoje wrażenie - skąd nadal niska popularność przy relatywnie wysokich stawkach developerów PrestaShop, czy Magento? Czy wynika to ze słabszej wydajności WooCommerce?
2. Dlaczego WooCommerce i długo, długo nic po nim?
3. Sklep z największą bazą produktów, który widziałeś na Woo (ile produktów, ile ważyła baza)?
4. Czy Woo wymaga wg Ciebie dodatkowej, specjalnej optymalizacji?
5. Jakie są Twoje doświadczenia przy cachowaniu sklepów na Woo?
6. Najbliższa przyszłość WooCommerce - w którą stronę pójdzie ten soft?
Jak tworzyć motywy przyjazne użytkownikom i programistom - WordUp SilesiaTomasz Dziuda
Kolejna iteracja mojej prezentacji dotyczącej tworzenia motywów, które spełniają nie tylko potrzeby użytkowników ale też programistów, którzy z nimi pracują.
Contributor Day - WordCamp Lublin 2017 - przegląd motywówTomasz Dziuda
Zbiór porad i informacji dla osób chcących zajmować się przeglądem motywów kandydujących do pojawienia się na oficjalnym repozytorium WordPress.org. Przygotowany z myślą o uczestnikach Contributor Day
Na Contributor Day przed WordCampem w Gdyni przeprowadziłem review motywu na żywo dla uczestników, którzy również przeglądali motywy. Zauważyłem, że dla wszystkich było to interesujące doświadczenie i pokazywało wiele kwestii, które normalnie się pomija mówiąc jak przeglądać motywy.
Dlatego przejrzałem kod kilkudziesięciu motywów (nie mylić z pełnym review) z kilkuset czekających w kolejce do przejrzenia i wybrałem najciekawsze błędy developerów motywów, aby je omówić i zaproponować lepsze rozwiązania.
Dlaczego? Bo jedną z idei oprogramowania Open Source jest wspólna nauka (także ta na cudzych błędach).
Wielomilonowy ruch na wordpressie wordpress wordcamp gdynia 2016Lukasz Wilczak
W powszechnej opinii WordPress nie jest używany do tworzenia serwisów o dużym natężeniu ruchu. Jednak przy odpowiednim zapleczu i konfiguracji możemy korzystać z jego możliwości i nie martwić się o wydajność. Z prezentacji dowiesz się, jak w Grand Parade tworzymy serwisy i przygotowujemy pod nie infrastrukturę dla blogów o dużym natężeniu ruchu i tematyce bettingowej takich jak: news.bwin.com, articles.matchbook.com, news.ladbrokes.com czy sunbets.cu.uk.
Omówimy mechanizmy cache-ujące takie jak Varnish, Redis, infrastrukturę CloudFront i S3 Amazona, sposoby skalowania środowisk z użyciem Load Balancera.
Rozszerzanie witryny o obsługę nowych języków lub krajówPerformance Media
Witryny multiregionalne i wielojęzyczne:
1. Problemy z wyszukiwaniem witryn międzynarodowych
2. Kilka pytań przed dodaniem nowego języka
3. Przykłady rozszerzania zasięgu na nowe kraje
4. Sygnały pomagające Google zrozumieć witrynę międzynarodową
5. Najlepsze praktyki
Od dawna Flash wykorzystywany jest do tworzenia efektownych, interaktywnych witryn WWW i prezentacji internetowych. Język programowania Action Script, znacznie rozbudowany w najnowszych wersjach tej aplikacji, umożliwia napisanie wielu oryginalnych, ciekawych programów. Czasem jednak nawet tak olbrzymi potencjał, jakim dysponuje Action Script, okazuje się niewystarczający. Co zrobić, gdy trzeba sięgnąć do bazy danych znajdującej się na serwerze lub przechować informacje o sesji? Jak dynamicznie uaktualniać treść artykułów opublikowanych w witrynie? Odpowiedź jest oczywista, trzeba sięgnąć po inne, rewelacyjne narzędzie dla twórców stron WWW, czyli duet PHP i MySQL -- dostępny nieodpłatnie w pełni obiektowy język programowania oraz stabilna i wydajna baza danych.
Książka "Flash i PHP5. Podstawy" to niezastąpiony poradnik dla tych użytkowników Flasha, którzy chcą "wycisnąć" z niego więcej, niż oferuje Action Script. Czytając ją, nauczysz się łączyć witryny WWW tworzone we Flashu ze skryptami PHP i bazą danych MySQL. Poznasz podstawy języków PHP i SQL i dowiesz się, jak skonfigurować środowisko pracy. Znajdziesz w niej informacje o możliwościach wykorzystania PHP do realizacji zadań, których wykonanie za pomocą języka Action Script byłoby niemożliwe. Te zadania to przetwarzanie danych wprowadzanych przez użytkowników, zapisywanie i odczytywanie informacji z bazy danych, zarządzanie sesjami i tworzenie mechanizmu zarządzania treścią serwisu.
* Instalacja i konfiguracja środowiska
* Wysyłanie danych z formularzy za pomocą poczty elektronicznej
* Obliczenia matematyczne w PHP
* Przetwarzanie danych tekstowych
* Tworzenie czytnika RSS
* Praca z bazami MySQL i SQLite
* Wprowadzanie informacji do bazy danych
* Obsługa sesji
* System CMS oparty o bazę danych i XML
Wykorzystaj PHP i stwórz dynamiczne witryny WWW we Flashu.
#MTC2018: Optymalizacja doświadczenia użytkownika na stronach mobilnych w cel...Mobile Trends
Optymalizacja doświadczenia użytkownika na stronach mobilnych poprzez zastosowanie nowych technologii typu AMP, PWA. Jak podejść do tego strategicznie, priorytetyzować działania? Prezentacja oparta na przykładach i case studies. Prelekcja wygłoszona podczas Mobile Trends Conference, 1-2 marca 2018 r. w Krakowie.
Wszystko, co chciałbyś wiedzieć o WooCommerce, ale bałeś się zapytaćMaciej Swoboda
Pytania o WooCommerce, na które odpowiadam w prezentacji w ramach WordUp Trójmiasto #7.
1. Jakie jest Twoje wrażenie - skąd nadal niska popularność przy relatywnie wysokich stawkach developerów PrestaShop, czy Magento? Czy wynika to ze słabszej wydajności WooCommerce?
2. Dlaczego WooCommerce i długo, długo nic po nim?
3. Sklep z największą bazą produktów, który widziałeś na Woo (ile produktów, ile ważyła baza)?
4. Czy Woo wymaga wg Ciebie dodatkowej, specjalnej optymalizacji?
5. Jakie są Twoje doświadczenia przy cachowaniu sklepów na Woo?
6. Najbliższa przyszłość WooCommerce - w którą stronę pójdzie ten soft?
Nowości w WooCommerce i plany rozwoju na 2016Maciej Swoboda
Nowości w WooCommerce 2.5: WooCommerce CLI, optymalizacja szybkości, nowe zarządzanie sesjami, zmiany w ekranach podatków i e-maili w panelu admina, zmiany w procesie zakupowym - koszyk i zamówienie.
Plany WooCommerce w kontekście dużych sklepów oraz strefy wysyłki dostępne już w wersji 2.6.
Plany WP Desk na kolejne wtyczki: Allegro, Paczka w Ruchu i Flexible Pricing.
Web Dev Insider prezentuje: nowości ze świata wydajności frontendu. Nowinki, nowe narzędzia i techniki optymalizacji - przydatne z perspektywy techniczego SEO oraz front-end developmentu.
Prezentacja z webinaru: https://www.youtube.com/watch?v=K_zRugiNpGY
Poruszane tematy:
- Audyty wydajności stron w raportach SEO - dlaczego większość robi to źle?
- Co mówią nam komponenty LCP
- Czym jest interfejs Speculation Rules i jak wpływa na TTFB, LCP i CLS?
- Przykłady systemów RUM
- Proces optymalizacji wydajności interakcji
- Przykłady optymalizacji interakcji względem wskaźnika INP (zoptymalizujemy Cookie Consent Banner, analitykę uruchamianą przez Google Tag Manager, długo wykonujące się zadania przez Javascript i wiele innych)
Spróbujemy odpowiedzieć na pytanie: Jaki framework będzie dla nas najlepszy? Opowiem dlaczego to pytanie jest takie ważne oraz o tym czego potrzebujemy by znaleźć na nie odpowiedz, która wcale nie jest taka trywialna.
Wordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WPMariusz Szatkowski
Wprowadzenie do WordPressa - o co chodzi w tym CMS, liczby, statystyki, dlaczego warto, dlaczego Wordpress, a nie inny CMS?
Więcej na http://trojmiasto.us
Najlepsze wtyczki WordPress, które każdy developer powinien miećMaciej Swoboda
Subiektywny przegląd najlepszych wtyczek niezbędnych dla każdego developera WordPressa. Wtyczki, z których zawsze korzystam tworząc strony dla klientów. Na liście znajdują się takie oczywistości jak ACF, ale też być może mniej oczywiste jak Stop Emails czy User Switching.
Spojrzenie długoletniego użytkownika WordPressa, który stworzył dziesiątki stron dla klientów. Ale nie jest to spojrzenie typowego programisty, którym nigdy nie byłem. Praktycznie i zdroworozsądkowo.
Wtyczki WordPress, których każdy developer powinien używaćMaciej Swoboda
Subiektywny przegląd najlepszych wtyczek niezbędnych dla każdego developera WordPressa. Wtyczki, z których zawsze korzystam tworząc strony dla klientów. Na liście znajdują się takie oczywistości jak ACF, ale też być może mniej oczywiste jak Stop Emails czy User Switching.
Spojrzenie długoletniego użytkownika WordPressa, który stworzył dziesiątki stron dla klientów. Ale nie jest to spojrzenie typowego programisty, którym nigdy nie byłem. Praktycznie i zdroworozsądkowo.
W GavickPro zawsze poświęcaliśmy sporo czasu na rozwijanie darmowych produktów dostępnych dla szerokiego grona użytkowników. Ta prezentacja była premierą oraz pokazem możliwości naszych nowych i całkowicie darmowych pluginów dla WordPressa. Ujawnia też czego można się spodziewać po nadchodzącej wersji 2.* naszego darmowego frameworka – GavernWP.
Stwórz własną dynamiczną witrynę WWW.
* Zainstaluj i skonfiguruj PHP oraz serwery Apache i MySQL
* Naucz się zasad programowania w PHP
* Połącz aplikację WWW z bazą danych
* Poznaj sekrety zabezpieczania i optymalizowania aplikacji sieciowych
Dynamiczne witryny WWW spotykamy w sieci coraz częściej. Po mechanizmy bazodanowe i technologie skryptowe działające po stronie serwera sięgają już nie tylko twórcy portali i sklepów internetowych, ale także ci, którym jeszcze do niedawna wystarczał zwykły, statyczny HTML. Wśród technologii wykorzystywanych do tworzenia dynamicznych stron WWW od dawna prym wiedzie duet PHP i MySQL, instalowany na serwerach WWW pracujących pod kontrolą Apache’a. Te właśnie narzędzia są najczęściej wykorzystywane do tworzenia galerii, forów dyskusyjnych, giełd ogłoszeniowych i wielu innych aplikacji WWW.
"PHP, MySQL i Apache dla każdego. Wydanie II" to podręcznik dla wszystkich, którzy chcą poznać zasady tworzenia dynamicznych witryn WWW z wykorzystaniem najpopularniejszych obecnie technologii. Książka opisuje proces instalacji i konfiguracji Apache’a, MySQL-a i PHP na serwerze oraz na stacji roboczej, elementy języka PHP oraz zasady stosowania języka SQL. Na praktycznych przykładach przedstawia możliwości wykorzystywania PHP i bazy danych do tworzenia elementów dynamicznych stron WWW oraz całych projektów. Czytając ją, nauczysz się zabezpieczać aplikacje WWW oraz poprawiać wydajność ich działania.
* Instalowanie i konfigurowanie narzędzi
* Programowanie w języku PHP
* Funkcje, tablice i obiekty
* Przetwarzanie danych z formularzy
* Obsługa sesji oraz systemu plików
* Dynamiczne generowanie grafiki
* Integracja PHP z MySQL
* Operacje na danych w tabelach i język SQL
* Tworzenie prostych projektów aplikacji WWW
* Monitorowanie pracy aplikacji
* Mechanizmy bezpieczeństwa i uwierzytelniania użytkowników
* Poprawa wydajności aplikacji
Wtyczka W3 Total Cache to potężne narzędzie, za pomocą którego można znacząco przyśpieszyć działanie naszego serwisu. Warto wiedzieć jak używać różnych mechanizmów cache, ograniczyć ilość żądań wysyłanych do serwera, zmniejszyć rozmiar strony czy korzystać z CDN.
Webinar: 5 Tricks for WordPress web administratorsTomasz Dziuda
This document provides 5 tricks for WordPress web administrators. It discusses limiting user permissions, using activity logs, must-use plugins, customizing the dashboard UI, and optimizing workflows. Some key tips include using plugins to limit user permissions, enable activity logs, adjust dashboard colors and menus, and automate backups and updates. It recommends using custom CSS or child themes cautiously and considering alternatives to major version updates.
Prezentacja o tym jak utrzymać się na powierzchni w szybko rozwijającym się świecie technologii webowych. Zbiór porad, które mogą się przydać nie tylko webdeveloperom.
3. Google coraz bardziej będzie
promować strony przyjazne
urządzeniom mobilnym
Źródło: http://www.engadget.com/2015/02/27/google-
page-rank-mobile/
• Google eksperymentuje z
oznaczaniem wolno
działających stron WWW w
wynikach wyszukiwania
Źródło: http://www.webperformancetoday.com/
4. Google eksperymentuje
z oznaczaniem wolno
działających stron WWW
Źródło: http://
www.webperformancetoday.com/2015/02/25/
google-new-slow-label-web-performance/
5. Nikt nie lubi czekać
Źródła: http://www.getelastic.com/how-page-load-speed-affects-conversion-infographic/
http://www.shoutmeloud.com/improve-website-loading-speed-seo-usability.html
• Liczba pobrań Firefoksa wzrosła o 15.4% po
zmniejszeniu średniego czasu ładowania strony o
2.2 sekundy
• Walmart odnotował wzrost konwersji o 2% na każdą
1 sekundę krótszego czasu ładowania strony
• 47% konsumentów oczekuje załadowania się
strony 2 sekundy lub szybciej
6. Nikt nie lubi czekać
Źródła: http://www.getelastic.com/how-page-load-speed-affects-conversion-infographic/
http://www.shoutmeloud.com/improve-website-loading-speed-seo-usability.html
• Liczba pobrań Firefoksa wzrosła o 15.4% po
zmniejszeniu średniego czasu ładowania strony o
2.2 sekundy
• Walmart odnotował wzrost konwersji o 2% na każdą
1 sekundę krótszego czasu ładowania strony
• 47% konsumentów oczekuje załadowania się
strony 2 sekundy lub szybciej
7. Nikt nie lubi czekać
Źródła: http://www.getelastic.com/how-page-load-speed-affects-conversion-infographic/
http://www.shoutmeloud.com/improve-website-loading-speed-seo-usability.html
• Liczba pobrań Firefoksa wzrosła o 15.4% po
zmniejszeniu średniego czasu ładowania strony o
2.2 sekundy
• Walmart odnotował wzrost konwersji o 2% na każdą
1 sekundę krótszego czasu ładowania strony
• 47% konsumentów oczekuje załadowania się
strony w 2 sekundy lub szybciej
17. Powtórka ze statystyki
• więcej pomiarów === większa wiarygodność
• średnia arytmetyczna
• mediana i kwartyle
http://pl.wikipedia.org/wiki/Mediana
• wartość minimalna/maksymalna
• odchylenie standardowe
http://pl.wikipedia.org/wiki/Odchylenie_standardowe
18. Powtórka ze statystyki
• więcej pomiarów === większa wiarygodność
• średnia arytmetyczna
• mediana i kwartyle
http://pl.wikipedia.org/wiki/Mediana
• wartość minimalna/maksymalna
• odchylenie standardowe
http://pl.wikipedia.org/wiki/Odchylenie_standardowe
19. Powtórka ze statystyki
• więcej pomiarów === większa wiarygodność
• średnia arytmetyczna
• mediana i kwartyle
http://pl.wikipedia.org/wiki/Mediana
• wartość minimalna/maksymalna
• odchylenie standardowe
http://pl.wikipedia.org/wiki/Odchylenie_standardowe
20. Powtórka ze statystyki
• więcej pomiarów === większa wiarygodność
• średnia arytmetyczna
• mediana i kwartyle
http://pl.wikipedia.org/wiki/Mediana
• wartość minimalna/maksymalna
• odchylenie standardowe
http://pl.wikipedia.org/wiki/Odchylenie_standardowe
21. Powtórka ze statystyki
• więcej pomiarów === większa wiarygodność
• średnia arytmetyczna
• mediana i kwartyle
http://pl.wikipedia.org/wiki/Mediana
• wartość minimalna/maksymalna
• odchylenie standardowe
http://pl.wikipedia.org/wiki/Odchylenie_standardowe
23. Why Trying to Get 95+ on Google Page Speed Insights for
Your WordPress Site Will Drive You Mad!
http://premium.wpmudev.org/blog/why-trying-to-get-95-on-google-pagespeed-insights-will-drive-you-mad/
Jak koneserzy tematów optymalizacji walczą o 100/100
w Page Speed Insights
http://sourceforge.net/projects/schedule-analytics/
http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/
http://madskristensen.net/post/google-analytics-vs-google-page-speed
36. • Opcja dla leniwych: dokupienie wiaderka RAM-u i
słoika procesorów ;-)
• Przegląd wtyczek: usunięcie nieużywanych
• Przegląd wtyczek: zastąpienie złożonych wtyczek
prostszymi - adekwatnie do wykorzystywanych
możliwości
37. • Opcja dla leniwych: dokupienie wiaderka RAM-u i
słoika procesorów ;-)
• Przegląd wtyczek: usunięcie nieużywanych
• Przegląd wtyczek: zastąpienie złożonych wtyczek
prostszymi - adekwatnie do wykorzystywanych
możliwości
38. • Opcja dla leniwych: dokupienie wiaderka RAM-u i
słoika procesorów ;-)
• Przegląd wtyczek: usunięcie nieużywanych
• Przegląd wtyczek: zastąpienie złożonych wtyczek
prostszymi - adekwatnie do wykorzystywanych
możliwości
39. • Zainstalowanie wtyczki od cache
Opis WP Super Cache: http://wpzen.pl/przyspieszanie-strony-za-pomoca-wtyczki-wp-super-cache/
Opis W3 Total Cache: http://wpzen.pl/wp-content/uploads/2013/09/w3-total-cache-wordcamp-
wroclaw-2013.pdf
Cache Buddy: http://wptavern.com/mark-jaquith-releases-cache-buddy-a-plugin-to-enhance-popular-
wordpress-caching-solutions
• Profilowanie kodu i porządki w bazie danych
Prezentacja o profilowaniu kodu: https://prezi.com/wlegamdbtc8g/nie-daj-sie-zwolnic/
Porządkowanie bazy danych WP: http://wpzen.pl/porzadkowanie-i-optymalizacja-bazy-danych-
wordpressa/
40. • Zainstalowanie wtyczki od cache
Opis WP Super Cache: http://wpzen.pl/przyspieszanie-strony-za-pomoca-wtyczki-wp-super-cache/
Opis W3 Total Cache: http://wpzen.pl/wp-content/uploads/2013/09/w3-total-cache-wordcamp-
wroclaw-2013.pdf
Cache Buddy: http://wptavern.com/mark-jaquith-releases-cache-buddy-a-plugin-to-enhance-popular-
wordpress-caching-solutions
• Profilowanie kodu i porządki w bazie danych
Prezentacja o profilowaniu kodu: https://prezi.com/wlegamdbtc8g/nie-daj-sie-zwolnic/
Porządkowanie bazy danych WP: http://wpzen.pl/porzadkowanie-i-optymalizacja-bazy-danych-
wordpressa/
46. Dobór odpowiedniego formatu
• JPG - większość zdjęć
• PNG24 lub PNG8 - przezroczystość
• GIF - animacje
• SVG - niezależność od rozdzielczości
47. Dobór odpowiedniego formatu
• JPG - większość zdjęć
• PNG24 lub PNG8 - przezroczystość
• GIF - animacje
• SVG - niezależność od rozdzielczości
48. Dobór odpowiedniego formatu
• JPG - większość zdjęć
• PNG24 lub PNG8 - przezroczystość
• GIF - animacje
• SVG - niezależność od rozdzielczości
49. Dobór odpowiedniego formatu
• JPG - większość zdjęć
• PNG24 lub PNG8 - przezroczystość
• GIF - animacje
• SVG - niezależność od rozdzielczości
50.
51. Odpowiednie wymiary
• Warto sprawdzić czy wymiary grafik są adekwatne
do obszaru który zajmują
• W wypadku formatów takich jak PNG, JPG czy GIF
wymiary znacząco wpływają na rozmiar pliku
52. Odpowiednie wymiary
• Warto sprawdzić czy wymiary grafik są adekwatne
do obszaru który zajmują
• W wypadku formatów takich jak PNG, JPG czy GIF
wymiary znacząco wpływają na rozmiar pliku
58. CSS Sprites
• Umieszczamy obrazki w jednym pliku i modyfikując
background-position wyświetlamy odpowiedni fragment
dużej grafiki
• Redukują ilość zapytań do serwera
• Można zrobić to samo z SVG: https://css-tricks.com/svg-
sprites-use-better-icon-fonts/
59. CSS Sprites
• Umieszczamy obrazki w jednym pliku i modyfikując
background-position wyświetlamy odpowiedni fragment
dużej grafiki
• Redukują ilość zapytań do serwera
• Można zrobić to samo z SVG: https://css-tricks.com/svg-
sprites-use-better-icon-fonts/
60. CSS Sprites
• Umieszczamy obrazki w jednym pliku i modyfikując
background-position wyświetlamy odpowiedni fragment
dużej grafiki
• Redukują ilość zapytań do serwera
• Można zrobić to samo z SVG: https://css-tricks.com/svg-
sprites-use-better-icon-fonts/
63. Rozmiar HTML/CSS/JS
• Minifikacja - wtyczka Better WordPress Minify i WP
HTML Compression
https://wordpress.org/plugins/bwp-minify/
https://wordpress.org/plugins/wp-html-compression/
• Unikanie zbyt wielu wtyczek (większość ma swoje
pliki CSS i JavaScript)
64. Rozmiar HTML/CSS/JS
• Minifikacja - wtyczka Better WordPress Minify i WP
HTML Compression
https://wordpress.org/plugins/bwp-minify/
https://wordpress.org/plugins/wp-html-compression/
• Unikanie zbyt wielu wtyczek (większość ma swoje
pliki CSS i JavaScript)
65. Rozmiar fontów
• Optymalizacja poprzez wspierane zestawy znaków
(parametr subset)
https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext
• Optymalizacja poprzez ograniczenie się do
wybranych znaków (parametr text)
https://fonts.googleapis.com/css?
family=Lobster&text=JAVASCRIPT
66. Rozmiar fontów
• Optymalizacja poprzez wspierane zestawy znaków
(parametr subset)
https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext
• Optymalizacja poprzez ograniczenie się do
wybranych znaków (parametr text)
https://fonts.googleapis.com/css?family=Lobster&text=JAVASCRIPT
67. Rozmiar fontów
• Optymalizacja poprzez wspierane zestawy znaków
(parametr subset)
https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext
• Optymalizacja poprzez ograniczenie się do
wybranych znaków (parametr text)
https://fonts.googleapis.com/css?family=Lobster&text=JAVASCRIPT
• Wykorzystanie localStorage do przechowywania
fontów
http://www.sitepoint.com/improving-font-performance-subsetting-local-storage/
68. Zewnętrzne usługi
• Social media
http://www.sitepoint.com/social-sharing-hidden-costs/
http://www.sitepoint.com/social-media-button-links/
• Gravatar
http://www.wpbeginner.com/beginners-guide/how-to-disable-gravatars-in-wordpress/
• Youtube, Vimeo etc.
69. Zewnętrzne usługi
• Social media
http://www.sitepoint.com/social-sharing-hidden-costs/
http://www.sitepoint.com/social-media-button-links/
• Gravatar
http://www.wpbeginner.com/beginners-guide/how-to-disable-gravatars-in-wordpress/
Youtube, Vimeo etc.
70. Zewnętrzne usługi
• Social media
http://www.sitepoint.com/social-sharing-hidden-costs/
http://www.sitepoint.com/social-media-button-links/
• Gravatar
http://www.wpbeginner.com/beginners-guide/how-to-disable-gravatars-in-wordpress/
• Youtube, Vimeo etc.
http://www.newmediacampaigns.com/blog/lazyytjs-a-jquery-plugin-to-lazy-load-youtube-videos
72. Cache przeglądarki
<FilesMatch ".(gif|jpg|jpeg|png|swf|pdf|css|js|html|ico?|xml|txt)$">
FileETag none
</FilesMatch>
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/cache-manifest "access plus 0 seconds"
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType image/x-icon "access plus 1 week"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
ExpiresByType text/x-component "access plus 1 month"
ExpiresByType font/truetype "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>
73. CDN?
• Opłaca się gdy mamy odwiedziny z różnych
rejonów świata
• Pozwalają ominąć limit równoczesnych pobrań
plików z jednej domeny
• Popularne usługi CDN: Amazon Cloudfront,
MaxCDN, Cloudflare
• https://thethemefoundry.com/blog/why-we-dont-
use-a-cdn-spdy-ssl/
74. CDN?
• Opłaca się gdy mamy odwiedziny z różnych
rejonów świata
• Pozwalają ominąć limit równoczesnych pobrań
plików z jednej domeny
• Popularne usługi CDN: Amazon Cloudfront,
MaxCDN, Cloudflare
• https://thethemefoundry.com/blog/why-we-dont-
use-a-cdn-spdy-ssl/
75. CDN?
• Opłaca się gdy mamy odwiedziny z różnych
rejonów świata
• Pozwalają ominąć limit równoczesnych pobrań
plików z jednej domeny
• Popularne usługi CDN: Amazon Cloudfront,
MaxCDN, Cloudflare
• https://thethemefoundry.com/blog/why-we-dont-
use-a-cdn-spdy-ssl/
76. CDN?
• Opłaca się gdy mamy odwiedziny z różnych
rejonów świata
• Pozwalają ominąć limit równoczesnych pobrań
plików z jednej domeny
• Popularne usługi CDN: Amazon Cloudfront,
MaxCDN, Cloudflare
• https://thethemefoundry.com/blog/why-we-dont-
use-a-cdn-spdy-ssl/
81. HSTS
• Zmniejsza ilość zapytań do serwera
https://www.chromium.org/hsts
• Wymaga pełnego wsparcia SSL na stronie
• Nasza domena może działać tylko po HTTPS po
dodaniu domeny na: https://hstspreload.appspot.com/
• Zwiększa bezpieczeństwo chroniąc np. przed
atakami typu MiTM
http://sekurak.pl/hsts-czyli-http-strict-transport-security/
82. HSTS
• Zmniejsza ilość zapytań do serwera
https://www.chromium.org/hsts
• Wymaga pełnego wsparcia SSL na stronie
• Nasza domena może działać tylko po HTTPS po
dodaniu domeny na: https://hstspreload.appspot.com/
• Zwiększa bezpieczeństwo chroniąc np. przed
atakami typu MiTM
http://sekurak.pl/hsts-czyli-http-strict-transport-security/
83. HSTS
• Zmniejsza ilość zapytań do serwera
https://www.chromium.org/hsts
• Wymaga pełnego wsparcia SSL na stronie
• Nasza domena może działać tylko po HTTPS po
dodaniu domeny na: https://hstspreload.appspot.com/
• Zwiększa bezpieczeństwo chroniąc np. przed
atakami typu MiTM
http://sekurak.pl/hsts-czyli-http-strict-transport-security/
84. HSTS
• Zmniejsza ilość zapytań do serwera
https://www.chromium.org/hsts
• Wymaga pełnego wsparcia SSL na stronie
• Nasza domena może działać tylko po HTTPS po
dodaniu domeny na: https://hstspreload.appspot.com/
• Zwiększa bezpieczeństwo chroniąc np. przed
atakami typu MiTM
http://sekurak.pl/hsts-czyli-http-strict-transport-security/
87. Sposób renderowania strony
• Skrypty powinny być ładowane zawsze na końcu
• Natychmiastowe wyświetlanie fragmentu strony
widocznego na ekranie - unikamy FOUC
• Do kompresji kodu CSS w sekcji <head> można
użyć np. http://refresh-sf.com/
88. Sposób renderowania strony
• Skrypty powinny być ładowane zawsze na końcu
• Natychmiastowe wyświetlanie fragmentu strony
widocznego na ekranie - unikamy FOUC
https://adactio.com/journal/8504 - grunt-criticalcss
• Do kompresji kodu CSS w sekcji <head> można
użyć np. http://refresh-sf.com/
89. Sposób renderowania strony
• Skrypty powinny być ładowane zawsze na końcu
• Natychmiastowe wyświetlanie fragmentu strony
widocznego na ekranie - unikamy FOUC
https://adactio.com/journal/8504 - grunt-criticalcss
• Do kompresji kodu CSS w sekcji <head> można
użyć np. http://refresh-sf.com/
90. <script>
var cb = function() {
var l0 = '<link rel="stylesheet" href=“style1.css”>’;
var l1 = '<link rel="stylesheet" href=“style2.css">';
var l2 = '<link rel="stylesheet" href=“style3.css">';
var h = document.getElementsByTagName('head')[0];
h.innerHTML += l0 + l1 + l2;
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
91. <script>
var cb = function() {
var l0 = '<link rel="stylesheet" href=“style1.css”>’;
var l1 = '<link rel="stylesheet" href=“style2.css">';
var l2 = '<link rel="stylesheet" href=“style3.css">';
var h = document.getElementsByTagName('head')[0];
h.innerHTML += l0 + l1 + l2;
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
92. <script>
var cb = function() {
var l0 = '<link rel="stylesheet" href=“style1.css”>’;
var l1 = '<link rel="stylesheet" href=“style2.css">';
var l2 = '<link rel="stylesheet" href=“style3.css">';
var h = document.getElementsByTagName('head')[0];
h.innerHTML += l0 + l1 + l2;
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
93. <script>
var cb = function() {
var l0 = '<link rel="stylesheet" href=“style1.css”>’;
var l1 = '<link rel="stylesheet" href=“style2.css">';
var l2 = '<link rel="stylesheet" href=“style3.css">';
var h = document.getElementsByTagName('head')[0];
h.innerHTML += l0 + l1 + l2;
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
94. <script>
var cb = function() {
var l0 = '<link rel="stylesheet" href=“style1.css”>’;
var l1 = '<link rel="stylesheet" href=“style2.css">';
var l2 = '<link rel="stylesheet" href=“style3.css">';
var h = document.getElementsByTagName('head')[0];
h.innerHTML += l0 + l1 + l2;
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
95. <script>
var cb = function() {
var l0 = '<link rel="stylesheet" href=“style1.css”>’;
var l1 = '<link rel="stylesheet" href=“style2.css">';
var l2 = '<link rel="stylesheet" href=“style3.css">';
var h = document.getElementsByTagName('head')[0];
h.innerHTML += l0 + l1 + l2;
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
101. Można też sprawić, że wolno ładujące się
elementy wyglądają na ładujące się szybciej
http://blog.placeit.net/ux-tactics-make-slow-things-seem-faster/
Gdy inne metody zawiodą
102. Trzeba poczekać na szybsze protokoły
transmisji danych ;-)
http://techcrunch.com/2015/04/18/google-wants-to-speed-up-the-web-with-its-quic-protocol/
Gdy inne metody zawiodą