Optymalizacja szybkości strony

Luźne omówienie praktyk stosowanych w celu przyspieszenia działanie stron i aplikacji internetowych. Więcej szczegółów na temat poszczególnych zagadnień znajdziesz w Google.

Php

Język PHP jest językiem skryptowym, tzn każde żądanie użytkownika powoduje konieczność skompilowania skryptu na język zrozumiały dla procesora serwera.
Od wersji 5.5 php ma wbudowany mechanizm Opcache (nie jest włączony domyślnie), który powoduje, że pominięty jest etap kompilacji skryptu podczas kolejnych wywołań strony internetowej, co powoduje szybsze jej działanie.
Niektóre zalecenia dotyczące samego programowania:
1. Unikać w pętli lub rekurencji zapytań do bazy danych. Np. podczas tworzenia drzewa danych – skategoryzowane wielopoziomowe menu. Lepiej jest pobrać jednym zapytaniem wszystkie potrzebne dane, a następnie w pętli i/lub rekurencji wygenerować strukturę na podstawie wyniku zapytania.
2. Nie powtarzać się np.

 $x = array(1,2,3,4,5,6,7,8,9);
 for ($y = 1;$y <= count($x); $y++) echo $y;

9 razy wywołana jest funkcja count(). Lepiej będzie przypisać jej rezultat do zmiennej i tą zmienną podstawić do pętli. Czyli:

 $x = array(1,2,3,4,5,6,7,8,9);
 $r = count($x);
 for ($y = 1;$y <= $r; $y++) echo $y;

CSS, HTML, JS

1. Narzędzia do zmiejszenia wagi plików html,css,js – htmlcompressor.com, javascriptcompressor.com, csscompressor.com. Narzędzia te wycinają z plików puste linie, komentarze, spacje, białe znaki. Zmniejszenie wagi plików = mniejszy zużyty transfer.
2. Umieszczaj JavaScript tuż przed tagiem </body>. Dzięki temu użytkownik zobaczy treść strony, zanim przeglądarka załaduje skrypty javascript (chyba, że javascriptem generujesz jakąś treść). Natomiast css ładuj w sekcji head, jeśli nie to przeglądarka wykona jeden przebieg więcej, aby wyświetlić stronę.
Nie ładuj plików css i js na podstrony, które tego nie wymagają.
3. Połącz poszczególne rodzaje plików (css, js) w jeden cały plik. Dzięki temu zmniejsza się liczba żądań http przeglądarki internetowej.
4. Korzystaj z publicznych repozytoriów popularnych bibliotek, np. jquery. Nie musisz wówczas trzymać ich na własnym serwerze i zmniejszasz liczbę żądań, które każda przeglądarka ogranicza do maksymalnej liczby jednoczesnych żądań. Cdn Google udostępnia popularne biblioteki jak jquery, czy Angular Js. Stosuj cdn z umiarem, gdyż czas zabiera również rozwiązanie nazw domenowych dns.
5. Stosuj HTML5 i CSS3 – w stosunku do poprzedników posiadają wiele udogodnień w pisaniu kodu , np. przy zaokrąglaniu rogów.
6. Jeśli posiadasz wiele małych plików graficznych, np. ikonki edycji, usuwania, stosuj tzw Sprite Css.
Chodzi o połączenie wielu małych plików w jeden duży plik i odczytywanie ich na stronie za pomocą css odpowiednimi pozycjami atrybutu background-color. Narzędzie, które całkowicie automatyzuje te czynności jest np. na css.spritegen.com.

Zostań Profesjonalistą W Tworzeniu Aplikacji Webowych! Zapisz Się Na Kurs Laravel nauczysz się również tworzyć aplikacje hybrydowe na smartfony

GRAFIKA

1. Nie przesadzaj z wielkością plików graficznych. Istnieją narzędzia, które zmniejszają objętość plików graficznych bez straty na jakości grafiki (dla ludzkiej zdolności percepcji). Przykładem jest narzędzie Yahoo – smush.it.

2. Jeśli masz jakąś pojedynczą małą grafikę do umieszczenia razem z tekstem (tekst podobnej wielkości co obrazek), nie rób tego za pomocą tagu img. Zastosuj natomiast base64 do zakodowania obrazka i wyświetlenia go na ekranie. Obniżysz wtedy liczbę żądań http.

3. Uważaj na kradzież transferu, jeśli masz popularny serwis z ładną grafiką lub filmami, ktoś może chcieć wykorzystać twoje media. W tym wypadku możesz paść ofiarą sieciowego rozboju nawet podwójnie: skopiowanie treści bez twojej zgody oraz sposób w jaki złodziej umieścił twój obrazek na swojej stronie – w atrybucie src tagu img, podał adres twojego serwera ze źródłem grafiki. Strona internetowa złodzieja:

 <html>
 <body>
 <img src=”sciezka/do/obrazka/na/serwerze/ktory/sobie/znalazlem/i/przypisalem/sobie/autorstwo/ich/tresci”>
 </body>
 </html>

Tracisz w ten sposób dodatkowo na transferze. Jest kilka sposobów na zabezpieczenie się przed tym, np. okresowa zmiana nazw grafik lub folderów w którym się znajdują. Więcej szczegółów w google pod hasłami „bandwidth theft” lub „hotlinking”.
Ty natomiast możesz robić to legalnie, hostując obrazki na innych wykupionych przez ciebie serwerach, oszczędzając na transferze swojego głównego serwera.

BAZA DANYCH

1. Memcached – system komunikacji z bazą danych polegający na przechowywaniu wyników zapytania sql w pamięci operacyjnej serwera. Zasada jest prosta: tworzymy zapytanie, wynik jest zapisywany w pamięci z unikalnym kluczem identyfikacyjnym dla każdego zapytania, przy następnym odpytywaniu system sprawdza czy wynik tego zapytania jest dostępny w ram, jeśli tak to go zwraca, jeśli nie, łączy się z bazą ponownie. Jest to bardzo szybki system cache-ujący, ponieważ odczyt z pamięci ram jest wielokrotnie szybszy niż odczyt z pamięci dyskowej. Nie martwimy się o wygaśnięcie pamięci ram, gdyż serwery pracują non-stop w przeciwieństwie do naszych domowych komputerów.
2. Wyciągaj dane z bazy z pól numerycznych, zakładaj indeksy na pola, po których wyszukujesz lub grupujesz dane.

SERWER

1. Kompresja gzip – kod html, js czy css ma wiele powtarzających się elementów jak np. nazwy tagów. Kompresja gzip zamienia te ciągi na umowne liczby, dzięki czemu plik taki waży mniej. I teraz jeśli przeglądarka obsługuje kompresję gzip, odkodowuje przesłany z serwera plik. Jest to kolejny sposób na obniżenie transferu.
2. Serwery lustrzane – kopia strony internetowej na innym serwerze. Dns można skonfigurować tak, aby zwracał kilka adresów ip komputerów, na których masz ten sam serwis www. Wówczas przeglądarka wylosuje sobie, z którym komputerem się połączyć. Uzyskasz w ten sposób równomierny rozkład obciążenia i zapewnisz komfort klientom twojej strony, którzy szybciej będą wczytywać taką stronę (raz z jednego serwera, raz z drugiego). Możesz też umieścić bazę danych na jednym serwerze, a kilka takich samych front-endów na innych.
3. Varnish – serwer pośredniczący między tobą a serwerem docelowym. Keszuje całe zapytania http. Gdy łączysz się z normalnym serwerem, składa ono po kolei to co od niego zażądałeś: css, html, grafikę, dane z bazy danych i wysyła ci wynik. I tak za każdym razem. Gdy masz varnish – wynik twojego zapytania trafi do niego I następnym razem szybciej otrzymasz odpowiedź na to samo zapytanie.
4. Masz za dużo żądań http, które przeglądarka musi wykonać jednorazowo aby wykonać zawartość twojej strony? Możesz założyć osobną subdomenę np. cdn.domena.pl i na niej trzymać np. grafikę. Przeglądarka traktuje to jako osobny serwer.

HTACCESS

Ustawiaj nagłówek Expiry w pliku htaccess. Pliki graficzne, css, js mogą być zapamiętywane przez przeglądarkę na ustalony w pliku htaccess czas. Dzięki temu zmniejszysz również obciążenie serwera.

BLOKADA ADRESÓW IP

Jeśli prowadzisz lokalną firmę i obsługujesz tylko lokalnych klientów, np zakład fryzjerski, to nie potrzebujesz aby na twoją firmową stronę www wchodziły roboty sieciowe z Chin itp. Jeśli korzystasz z popularnych systemów CMS, możesz poszukać specjalnej wtyczki do tego celu lub poproś administratora twojej strony www. Odciążysz w ten sposób swoją stronę od niepotrzebnego ruchu oraz zmniejszysz ryzyko ataku hakerskiego, jak również ilość spamu na twoją skrzynkę email lub formularz kontaktowy.

WORDPRESS

Jeśli używasz systemu cms WordPress (lub jakiegokolwiek innego), rozważ stosowanie wtyczek, które zoptymalizują i przyspieszają działanie twojej strony.
W3 total cache – bardzo rozbudowane narzędzie do keszowania zawartości strony internetowej.
Db optimizer – wtyczka optymalizujące bazę danych wordpress: usuwa komentarze oznaczone jako spam, rewizję stron czy wpisów i in.

—-

To tyle. Nie trzeba stosować odrazu wszystkich technik tu opisanych, zależy to od obciążenia strony. Im więcej ma ruchu tym bardziej trzeba dbać o jej wydajnościową optymalizację.

 

zapisz się na kurs Laravela >>>> lub program partnerski
Share

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *