1. Co z tym? Dobry dzień dla wszystkich. W tym artykule powiem ci, jak zwiększyć wydajność strony na...
2. Jak?
3. Buforowanie
4. Aktualizacja PHP
5. CSS i JS Minification
6. Bootstrap
7. jQuery
8. Minifikacja HTML
9. favicon
10. Obrazy
11. pThumb
12. Mobilna wersja strony
13. Układ adaptacyjny
14. Mobilna wersja strony
15. Aplikacja mobilna
16. Wniosek

Co z tym?

Dobry dzień dla wszystkich. W tym artykule powiem ci, jak zwiększyć wydajność strony na MODX Revoluton. Wiele porad można zastosować do witryn na dowolnej innej platformie, ale tutaj skupiłem się na MODX.

Dlaczego?

Od optymalizacji strony pewne zalety. Po pierwsze, wysoka prędkość strony ma pozytywny wpływ na CEO (im więcej odwiedzających będzie w stanie wytrzymać MODX przy odpowiedniej prędkości pobierania, tym lepiej). Po drugie, szybkie ładowanie strony ma pozytywny wpływ na lojalność odwiedzających. Po trzecie, można mierzyć się z przyjaciółmi.

Jak?

Aby zobaczyć różnicę między stanem witryny przed i po, radzę skorzystać z usługi PageSpeed ​​Insights od Google. Usługa ta ocenia stronę pod kątem szybkości pobierania i wygody dla odwiedzających w skali od 0 do 100. Oczywiście nie powinieneś polegać wyłącznie na wykonywaniu tej usługi, ale w większości daje ona całkiem odpowiednią poradę.

Sprawdzanie witryny w Google Pagespeed Insights

Jak wiadomo, szybkość ładowania witryny jest jednym z wielu czynników rankingowych. Dlatego też, nawet jeśli Ty i Twoi goście nie są ważni szybkości witryny, nie należy ignorować opinii wyszukiwarek.

Wynik sprawdzenia szybkości witryny

Buforowanie

Buforowanie jest jedną z najsilniejszych części w MODX. Pomimo faktu, że wiele osób nie wie, jak poprawnie zaprojektować strony internetowe (nie tylko w MODX), uzyskiwanie powolnych stron internetowych, tworzenie strony internetowej, która może wytrzymać duże obciążenie, nie jest takie trudne. Ale musisz polegać nie tylko na sprzęcie i oprogramowaniu, ale także na sobie. Używając buforowania, można znacznie zmniejszyć liczbę zapytań do bazy danych, jeśli są one używane do pobierania danych, które zmieniają się stosunkowo rzadko.

Aby więc zwiększyć szybkość generowania stron, musisz wyłączyć buforowanie tylko tam, gdzie naprawdę przeszkadza: skrypty, przetwarzanie danych itp. Jak wiesz, aby wyłączyć buforowanie, wystarczy umieścić wykrzyknik przed fragmentem kodu, fragmentem lub symbolem zastępczym ( Fragmenty oprogramowania, czyli $ modx-> runSnippet („snippetName”, [], nie mogą być buforowane). Wyłączenie buforowania jest również opłacalne podczas tworzenia i debugowania projektu, aby buforowanie nie spowalniało procesu tworzenia.

Przykład połączenia bez buforowania:

[[! Jeśli? & subject = `[[* id]]` & operand = `1` & operator =` == `& then =` Hello, world`]]

Przykład połączenia z buforowaniem:

[[Jeśli? & subject = `[[* id]]` & operand = `1` & operator =` == `& then =` Hello, world`]]

Ale bądź ostrożny: nie przechowuj fragmentów pamięci podręcznej przetwarzających żądania POST (na przykład formularze opinii).

Aby dowiedzieć się, ile żądań i czasu potrzebnego do wygenerowania strony, wystarczy umieścić w dowolnym miejscu szablonu lub porcji: 96 0,4282 s. Pierwszy znacznik będzie zawierał liczbę zapytań do bazy danych, drugi - czas utworzenia strony.

Aktualizacja PHP

Zwykle w wiadomościach o nowych wydaniach PHP piszą o poprawie wydajności, co jest dobrą wiadomością. Dlatego do moich projektów używam najnowszej wersji. Niestety, nie wszyscy się do tego stosują i często można znaleźć witrynę z PHP 5.3 (w 2015 roku widziałem nawet serwer z wersji 5.2). Na szczęście większość hosterów oferuje użytkownikom wybór wersji PHP. Dlatego bez wątpienia zmieniłem wersję PHP z 5.3 na 5.6 w jednej witrynie, zwiększając szybkość tworzenia strony 2 razy (z 0.06 s do 0.03). Jak widać, aktualizacja wersji PHP nie tylko zmienia tsiferok, ale także zwiększa szybkość i bezpieczeństwo witryny.

Jak sprawdzić wersję PHP

CSS i JS Minification

Wcięcia i podziały linii poprawiają, oczywiście, czytelność kodu, ale tylko dla ludzi. Przeglądarka może również podawać zminimalizowane wersje tych zasobów: bez dodatkowych spacji i podziałów wierszy. Początkowo kompresowałem CSS i JS za pomocą usług online, ale nie jest to zbyt wygodne, ponieważ podczas następnej aktualizacji oryginałów tych plików musiałem ponownie zminimalizować te pliki i przesłać je na stronę. Następnie znalazłem fragment SmartOptimizer, który w locie eliminuje CSS i JS. Oprócz SmartOptimizer, istnieje MinifyX, który jest również przeznaczony do mineralizacji i klejenia zasobów statycznych. Takie popularne struktury, jak jQuery, Bootstrap itp., Są publikowane w formie minified, zaleca się korzystanie z tych wersji. Na przykład zamiast bootstrap.css lepiej jest połączyć bootstrap.min.css.

Przetestowana usługa klasyfikacji CSS: http://cssminifier.com/

Aby zminimalizować JavaScript: http://jscompress.com

W rzeczywistości istnieje bardziej skuteczny sposób: minifikacja podczas rozwoju. Oznacza to, że istnieją źródła - pliki w czytelnej formie i istnieje zespół - już zminimalizowane pliki, które powinny znajdować się na stronie. Podczas tworzenia strony używam: SASS, gulp - dla CSS, webpack - dla JavaScript.

Bootstrap

Jeśli witryna korzysta z Bootstrap, możesz utworzyć zestaw zawierający tylko niezbędne. Na przykład najczęściej używaną częścią tego szkieletu jest siatka i często wystarczy zostawić tylko tę siatkę. Możesz utworzyć własny zespół na oficjalnej stronie: https://getbootstrap.com/customize/ .

Aby sprawdzić, jak skutecznie Bootstrap jest używany na stronie, możesz użyć Pokrycia, napisałem o tym artykuł: https://quasi-art.ru/library/it/using-chrome-devtools-coverage .

jQuery

Nie używaj jQuery. Nowoczesny JavaScript pozwala na napisanie dość zwięzłego kodu, a używanie transpilerów będzie działać nawet w starszych wersjach Internet Explorera.

Jedynym możliwym problemem są niektóre wtyczki jQuery, ale dla większości z nich istnieją opcje, które nie są zależne od jQuery.

Minifikacja HTML

Jeśli otworzysz kod strony podanej w przeglądarce, zobaczysz, że w kodzie jest wiele dodatkowych spacji (pod warunkiem, że formatowanie kodu nie zostanie zignorowane podczas tworzenia). Ponownie przeglądarka nie troszczy się zbytnio o formatowanie, ponieważ elementy wewnątrz elementów rozpadają się na jeden, a między znacznikami są zazwyczaj ignorowane. Oczywiście usunięcie wszystkich tych przestrzeni i podziałów linii wewnątrz kawałków jest bardzo głupie. Dlatego do tego dodałem wtyczkę, która uruchamia się na zdarzeniu OnWebPagePrerender.

$ output = & $ modx-> resource -> _ output; $ output = preg_replace ('| s + |', '', $ output); $ modx-> resource-> set ('content', $ output); Przed i po pomniejszeniu HTML

W rzeczywistości dość kontrowersyjny sposób na przyspieszenie witryny. Najprawdopodobniej będzie działać nawet wolniej (nie jest namacalny, ale istnieją obiektywne argumenty), ponieważ wyrażenia regularne są dość intensywnie wykorzystujące zasoby i bardziej wydajne jest użycie kompresji serwera, możesz przeczytać więcej tutaj: https://varvy.com/pagespeed/enable-compression.html .

favicon

Przeglądarka, pobierając witrynę po raz pierwszy, szuka również favicon. Nawet jeśli link do favicon nie jest wymieniony w metatagach, przeglądarka spróbuje go pobrać na stronie site.ru/favicon.ico. Ta prosta operacja wymaga jednak jednej prośby, a podczas ładowania następnej strony przeglądarka pobiera favicon z własnej pamięci podręcznej, ale można ją także wykluczyć. Robi się to bardzo prosto - musisz zakodować favicon w base64 i wkleić go bezpośrednio na stronie. Możesz zakodować favicon w base64, na przykład w witrynie http://xaviesteve.com/pro/base64.php . Następnie wklej wynikowy kod do nagłówka strony.

Na przykład, jeśli wcześniej wskazano favicon w ten sposób:

<link rel = "icon" href = "http://quasi-art.ru/favicon.ico" />

Ten tag można zastąpić następującym:

<Link rel = "ikona" type = "image / x-icon" href = „data: image / x-icon; base64 dane: image / x-icon; base64, AAABAAEAEBAQAAAAAAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAD / AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAREREREREAABABEAEQAQAAEAEQARABAAAREREREREAABERAAAREQAAEAEAABABAAAQAQAAEAEAABERAAAREQAAERERERERAAAQARABEAEAABABEAEQAQAAERERERERAAAAAAAAAAAAAAAAAAAAAAD // WAA // // 8AAMADAADZmwAA2ZsAAMADAADDwwAA29sAANvbAADDwwAAwAMAANmbAADZmwAAwAMAAP AAD // wAA ”/>

Gra? Gra

Obrazy

Jakkolwiek banalna może być ta rada, wielu całkowicie ignoruje ten moment. Ale po prostu musisz zmniejszyć rozmiar obrazów fizycznie, używając edytorów graficznych i rozszerzeń (na przykład phpThumbOf), zamiast wizualnie, ustawiając wymiary w atrybutach wysokości i szerokości (które nie spełniają standardów, nawiasem mówiąc) lub używając CSS. Przy okazji, jeśli używasz phpThumbOf, możesz zoptymalizować witrynę, dezaktywując wtyczkę phpThumbOfCacheManager, która usuwa pamięć podręczną obrazu podczas czyszczenia pamięci podręcznej serwisu.

Należy zwrócić szczególną uwagę na optymalizację obrazów end-to-end (tych, które są obecne na większości stron). Loga, obrazki i obrazy tła mogą być optymalizowane bez zmiany jakości za pomocą usług online, na przykład, http://compresspng.com/ .

Poniższy rysunek pokazuje, że ludzie spieszyli się z piciem piwa na klatce schodowej, więc zapomnieli zrobić, aby zamiast oryginału, który waży prawie 1 MB, załadowana była skromna miniatura, oszczędzając czas odwiedzającego. Obecnie serwis PageSpeed ​​Insights szacuje tę witrynę na 0/100. To nie jest Dancing on Ice z hojnym 5,9 na 6,0.

Oddziel kocioł od tych cukrów

pThumb

Warto wspomnieć o doskonałej alternatywie do phpThumbOf - pThumb. Jak twierdzą programiści, pThumb jest szybszy (osobiście nie przeprowadzałem testów porównawczych, przyjmuję to na słowo). Aby zainstalować pThumb, po prostu usuń phpThumbOf i zainstaluj pThumb. Nie obawiaj się, że po tej wymianie coś się załamie na stronie, ponieważ oba fragmenty używają tej samej przestrzeni nazw.

Mobilna wersja strony

Istnieją dwa sposoby optymalizacji witryny dla użytkowników mobilnych:

• Układ adaptacyjny
• Mobilna wersja strony

Układ adaptacyjny

Jest mniej kosztowny dla dewelopera. Zwłaszcza jeśli na przykład używany jest Bootstrap, który upraszcza tworzenie adaptacyjnego układu. Jedyną wadą jest to, że użytkownik urządzenia mobilnego faktycznie otrzymuje to samo, co użytkownik komputera stacjonarnego: te same skrypty, te same style, te same obrazy. Zwiększa to czas ładowania i renderowania strony, którego nie każdy użytkownik może tolerować. Wydajność może również ucierpieć, co negatywnie wpływa na poziom naładowania baterii i reakcję interfejsu witryny.

Mobilna wersja strony

Tworzenie mobilnej wersji witryny zależy od używanego systemu, na którym utworzono witrynę (MODX, CodeIgniter, Phalcon itp.). Osobliwością tej metody jest to, że użytkownicy komputerów stacjonarnych i użytkownicy urządzeń mobilnych otrzymują różne wersje witryny (różne układy, skrypty CSS i JavaScript). Napisałem już artykuł o ( tworzenie mobilnej wersji strony na CodeIgniter i dla Rewolucja MODX .

Aplikacja mobilna

Jeśli strona ma stałych użytkowników, warto stworzyć aplikację mobilną. W takim przypadku ilość ruchu między witryną a urządzeniem mobilnym zmniejszy się, ponieważ przesyłana będzie tylko sama treść, a kod do wyświetlania interfejsu będzie już zawarty w aplikacji. Koszt opracowania aplikacji i jej utrzymania to kolejna historia.

Wniosek

Za pomocą tych prostych gestów można znacząco zoptymalizować witryny, kilkakrotnie przyspieszając je o niektóre wskaźniki.