Przyspieszanie strony internetowej

Poniżej moje notatki sporządzone podczas optymalizacji wydajności portalu internetowego zbudowanego w oparciu o PHP 7.1, Symfony 3/4, AWS Elastic Beanstalk.

Zastosowanie się do nich pozwala znacząco zwiększyć szybkość wczytywania strony oraz zmniejszyć koszty utrzymania usługi.

  1. Zbadać stronę przy pomocy PageSpeed Insight i postarać się zastosować do podpowiedzi – niektóre zawarte w następnych punktach.
  2. Zbadać stronę przy pomocy Google Chrome DevTool – Audit (Lighthouse).
  3. Zbadać stronę przy pomocy Google Chrome DevTool – Network
  4. Szukać wąskiego gardła przy pomocy narzędzi jak NewRelic, Blackfire czy choćby Symfony WebProfiler, Xdebug.
  5. Użyć szybkiego “reverse proxy” typu Varnish czy na początek choćby Symfony HTTP Cache
  6. Włączyć obsługę HTTP/2
    Warto pamiętać, że aby skorzystać z HTTP/2 większość przeglądarek wymaga aby strona była zabezpieczona SSL-em.
    Dla projektów uruchamianych przy pomocy AWS Elastic Beanstalk zazwyczaj wystarczy użyć Application Load Balancer zamiast domyślnego Classic Load Balancer.
    W przypadku PHP trzeba również użyć PHP-FPM zamiast mod_php.
  7. Użyć “Preload” dla podstawowych plików ze stylami i JS.
  8. Użyć mod_expires aby ustawić nagłówki, kiedy ma wygasać w przeglądarce cache dla statycznych plików.
    <IfModule mod_expires.c>
    # Try cache static files
    ExpiresActive On
    ExpiresByType image/gif "access plus 1 months"
    ExpiresByType image/jpg "access plus 1 months"
    ExpiresByType image/jpeg "access plus 1 months"
    ExpiresByType image/png "access plus 1 months"
    ExpiresByType text/javascript "access plus 1 months"
    ExpiresByType application/javascript "access plus 1 months"
    ExpiresByType text/css "access plus 1 months"
    </IfModule>
  9. Włączyć kompresję gzip np. przy pomocy mod_deflate. Przynajmniej dla statycznych plików.
    <IfModule mod_deflate.c>
    # Enable gzip compression for static files
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
    </IfModule>
  10. Użyć szybkiego i skalowalnego CDN-a jak np. CloudFront
  11. Zmienić ustawienia PHP, np. dla projektu opartego na Symfony (3/4) i uruchamianego na PHP 7.1:
    apc.enable_cli = 1
    apc.shm_size = 64M
    opcache.enable_cli = On
    opcache.memory_consumption = 256
    opcache.max_accelerated_files = 100000
    opcache.fast_shutdown = 1
    opcache.validate_timestamps = 0 # disable for development
    realpath_cache_size = 4096k
    realpath_cache_ttl = 600
  12. Zoptymalizować użycie Composera
    composer install --no-dev
    composer dump-autoload --optimize --apcu
  13. Dodać indeksy w bazie danych (dotyczy SQL i NoSQL)
  14. Ograniczać liczbę i złożoność zapytań do bazy danych (dotyczy SQL i NoSQL)
  15. Długie zadania wykonywać na osobnym środowisku, np. AWS EB Worker Environment
  16. Starać się unikać “hydration” wykonywanego przez ORM – dla operacji na dużej ilości wierszy/obiektów.
  17. Starać się unikać skomplikowanej serializacji/deserializacji danych wykonywanej np. JMSSerializer

… 

 

Dziedziczenie w JavaScript – część 3

Na pewno  sporo z was wie jak dużo jest niezrozumienia pomiędzy tym czy używać w JavaScript konstruktorów czy nie.
A odkąd możemy korzystać ze słowa class w ES6 to wielu ludzi myśli, że to rozwiązuje wszystkie problemy związane z konstruktorami – a tak niestety nie jest.

W tym wpisie poznamy dwie metody dziedziczenia w JavaScript: Delegate prototype oraz  Concatenative Inheritance i skupimy się  na tym, żeby je dobrze zrozumieć.

… 

 

Efektywne usuwanie błędów

Jeśli do tej pory odpluskwiasz (“debagujesz”) oprogramowanie używając rozwiązania podobnego do PHP-owego var_dump lub JavaScript-owego console.log to robisz to mało efektywnie.
… 

 

Dziedziczenie w JavaScript – część 2

Jak wygląda obiekt?

Chciałabym wam opowiedzieć o tym jak wygląda dziedziczenie w JavaScript i po co jest nam w ogóle potrzebne, ale zanim do tego dojdziemy musimy porozmawiać o tym jak wygląda obiekt. Także ta część powinna was dobrze wprowadzić w podstawy.

Jak wiecie tłumacząc różne rzeczy zawsze staram się szukać jakiejś metafory, która pomoże w zrozumieniu trudnych zagadnień. Tym razem również znalazłam coś ciekawego do opisania dziedziczenia prototypowego – Zajrzyj do wpisu Dziedziczenie w JavaScript – część 1

… 

 

Dlaczego znowu nie dowiozłeś projektu?

Wiele firm marnuje pieniądze często poniekąd zmuszając pracowników do ciężkiej, mozolnej  i nieefektywnej pracy.

Na szczęście w środowisku, gdzie większość osób chce zmiany na lepsze można pozbyć się największych kosztów dość łatwo i szybko.

… 

 

Dziedziczenie w JavaScript – część 1

Z biologicznego punktu widzenia dziedziczenie to przekazywanie cech potomstwu. Możemy po rodzicach odziedziczyć takie cechy jak np. kolor oczu, wzrost, kształt ciała, a nawet niektóre umiejętności (podobno).
Ale jak przekazujemy te cechy ? Czy biologiczne dziedziczenie ma jakieś powiązanie z programowaniem?

…