Aimy Speed ​​Optimization dla Joomla!

1. Wprowadzenie Aimy Speed ​​Optimization to Joomla! wtyczka, która optymalizuje zawartość pod kątem...
2. Instalacja
3. Konfiguracja
4. Włączanie wtyczki
5. Opcje: Wtyczka
6. Opcje: obrazy
7. Opcje: Ustawienia zaawansowane
8. Ograniczenia
9. funkcje
10. Nieobsługiwane rozszerzenia
11. BŁĘDY POD

Wprowadzenie

Aimy Speed ​​Optimization to Joomla! wtyczka, która optymalizuje zawartość pod kątem szybkości strony na kilka sposobów:

Pozwala na zminimalizowanie i osadzenie CSS na swoich stronach i kolejkowanie JavaScript asynchronicznie, dzięki czemu oba nie blokują już renderowania stron. Dodatkowo kod HTML można zminimalizować.

Sposób ładowania obrazów można zoptymalizować: można wybrać po prostu dodanie wymiarów brakującego obrazu lub załadowanie obrazów odroczonych lub leniwych .

Poza tym buforowanie przeglądarki i kompresja mogą być aktywowane i konfigurowane automatycznie (przy użyciu pliku .htaccess Apache).

Te funkcje pomagają przyspieszyć działanie Joomla! strona z szybszym renderowaniem w przeglądarkach użytkownika.

Dzięki Google ™ Page Speed ​​Insights możesz sprawdzić szybkość swojej witryny z różnych perspektyw. Uważamy, że nie jest to przypadek, ale szansa na dostrojenie witryny dla odwiedzających i uzyskanie korzyści SEO .

Wymagania

Aimy Speed ​​Optimization wymaga:

1. Joomla! 3,2 lub więcej
2. PHP 5.3.10 lub nowszy
3. Rozszerzenie PHP DOMDocument (zazwyczaj włączone)
4. Joomla! szablon używający HTML 5

Instalacja

Instalacja rozszerzenia jest zgodna ze wspólną wersją Joomla! procedury.

Jeśli nie znasz tych procedur, wykonaj następujące czynności:

1. Pobierz archiwum ZIP rozszerzenia
2. Zaloguj się do Joomla! backend jako „Super User”
3. Z menu wybierz „ Rozszerzenia ” → „ Zarządzaj ” → „ Zainstaluj ”
4. Kliknij przycisk „ Lub wyszukaj plik ” i wybierz archiwum ZIP

Archiwum rozszerzenia zostanie przesłane i zainstalowane później.

Więcej informacji można znaleźć w Joomla! dokumentacja Instalowanie rozszerzenia .

UWAGA : Wszystkie wtyczki są wyłączone przez Joomla! po zainstalowaniu po raz pierwszy. Aby włączyć Aimy Speed ​​Optimization, kontynuuj i skonfiguruj wtyczkę.

Konfiguracja

Po nowej instalacji kliknij przycisk „ Konfiguruj wtyczkę teraz ” na stronie raportu instalacji.

W dowolnym momencie możesz skonfigurować wtyczkę za pomocą Menedżera wtyczek Joomla !, wybierając z menu „ Rozszerzenia ” → „ Menedżer wtyczek ”. Znajdź wtyczkę i kliknij jej nazwę w kolumnie „ Nazwa wtyczki ” na liście wtyczek.

Włączanie wtyczki

Aby korzystać z funkcjonalności wtyczki, musisz ją najpierw włączyć.

Aby to zrobić, zmień stan wtyczki z „ Wyłączone ” na „ Włączone ” i zastosuj zmiany, klikając przycisk „ Zapisz ” lub „ Zapisz i zamknij ” na pasku narzędzi.

Domyślna konfiguracja Aimy Speed ​​Optimization nie pozostawia żadnej decyzji, jak zoptymalizować szybkość strony na Joomla! do strony internetowej, czyli domyślna konfiguracja nie włącza żadnej z dostępnych optymalizacji.

Opcje: Wtyczka

Funkcjonalność Aimy Speed ​​Optimization może być dostosowana do twoich potrzeb za pomocą następujących opcji konfiguracyjnych, które są zgrupowane w kartach „Plugin” i „Expert Settings”:

Wyeliminuj blokowanie renderowania

Ta opcja pozwala zoptymalizować elementy CSS i JavaScript , aby nie blokowały renderowania strony.

CSS jest zminimalizowany i bezpośrednio osadzony w kodzie HTML. Pliki JavaScript i cały kod wbudowany są ładowane i wykonywane asynchronicznie w kolejce, to jest jedna po drugiej, zachowując nienaruszoną sekwencję.

UWAGA : Generowany dynamicznie i poza siedzibą CSS jest obsługiwany w sposób podobny do JavaScript: jest kolejkowany i ładowany po zakończeniu początkowego renderowania witryny. Takie podejście zwykle działa zgodnie z oczekiwaniami w przypadku niecyklicznych czcionek CSS i zapobiega blokowaniu witryny. Jeśli jednak CSS jest niezbędny do renderowania witryny (na przykład Bootstrap z CDN), nie ma sposobu, aby zapobiec blokowaniu. W tym przypadku rozwiązaniem byłoby przechowywanie kodu CSS na swojej przestrzeni internetowej, aby można go było osadzić.

Minify HTML

Jeśli ta opcja jest włączona, kod HTML zostanie usunięty przed dostarczeniem do przeglądarki użytkownika.

Włączenie tego ustawienia jest zalecane tylko wtedy, gdy nie można użyć opcji „ Ustawienia eksperta ” opcji „ Włącz kompresję ”.

Opcje: obrazy

Aimy Speed ​​Optimization oferuje kilka opcji optymalizacji ładowania obrazów w witrynie (elementy <img>). Obsługiwane są zarówno popularne techniki odroczonego ładowania, jak i leniwe ładowanie . Możesz albo wybrać ręcznie, które obrazy mają być zoptymalizowane, albo automatycznie wybrać wszystkie przesłane obrazy.

Akcja

Które działanie należy zastosować do twoich zdjęć?

Żaden

Zachowaj obrazy takie, jakie są.

Dodaj wymiary

Automatycznie dodaj brakujące wymiary obrazu (atrybuty „ szerokość ” i „ wysokość ”).

Ta opcja obsługuje tylko obrazy na miejscu.

Zastąp wszystkie wybrane obrazy przezroczystym symbolem zastępczym. Aby przyspieszyć renderowanie, dodawane są brakujące wymiary oryginalnego obrazu.

Po załadowaniu strony przez przeglądarkę wszystkie symbole zastępcze zostaną zastąpione oryginalnymi obrazami.

Uwaga : Ta opcja działa dla obrazów lokalnych i zewnętrznych. Ale jeśli obraz jest ładowany z zewnętrznej strony internetowej, wymiary nie mogą być ustawiane automatycznie. W takim przypadku zalecamy ręczne dodanie szerokości i wysokości .

Powolne ładowanie

Zastąp wszystkie wybrane obrazy przezroczystym symbolem zastępczym. Aby przyspieszyć renderowanie, dodawane są brakujące wymiary oryginalnego obrazu.

Oryginalne obrazy są następnie automatycznie ładowane, gdy zbliżają się do widoku użytkownika , np. Przez przewijanie.

Uwaga : Ta opcja działa dla obrazów lokalnych i zewnętrznych. Ale jeśli obraz jest ładowany z zewnętrznej strony internetowej, wymiary nie mogą być ustawiane automatycznie. W takim przypadku zalecamy ręczne dodanie szerokości i wysokości .

Zalecamy stosowanie odroczonego ładowania obrazu, ponieważ ma mniej efektów ubocznych niż leniwe ładowanie obrazu, a zatem jest bardziej odporne (patrz Ograniczenia poniżej).

Które obrazy powinny być zoptymalizowane?

Przesłane obrazy

Wszystkie obrazy na miejscu przesłane do katalogu / images / Joomla !, czyli za pomocą com_media („ Treść ” → „ Media ”).

Obrazy z klasą „odroczenie”

Wszystkie obrazy (onsite lub offsite), które mają przypisaną nazwę klasy „ defer ”, tj .:

<img src = "/ images / pagespeed.jpg" alt = "" class = "defer" />

Większość Joomla! edytory umożliwiają łatwe dodawanie klas do obrazów.

Zalecamy ręczne wybieranie obrazów poprzez dodanie do nich klasy „odroczenie” . Wybór ręczny na pewno wymaga czasu, ale w naszym doświadczeniu prowadzi do najlepszych wyników.

Określ, czy pomijasz pierwsze obrazy z powyższego wyboru.

Wrap in Link?

Zarówno odroczone ładowanie, jak i leniwe ładowanie korzystają z dobrze znanego atrybutu „ data-src ”, który jest używany przez Google ™.

Ta opcja pozwala jednak zawinąć każdy obraz zaznaczenia w odsyłacz HTML (element <a>), który wskazuje oryginalny obraz, chyba że nie jest już używany w linku. W ten sposób możesz sprawić, że wyszukiwarki łatwiej znajdą Twoje zdjęcia.

Zalecamy włączenie tej opcji tylko w przypadku problemów z wyszukiwarkami, które nie odbierają odroczonych lub leniwych załadowanych obrazów.

Opcje: Ustawienia zaawansowane

Ustawienia eksperta umożliwiają zmianę pliku .htaccess bezpośrednio z Joomla! backend. Wymagają one, aby Twoja witryna była obsługiwana przez serwer WWW Apache, a plik .htaccess jest już obecny w katalogu głównym Joomla! instalacja (tj. dostarczana z Joomla!).

Nie zmieniaj ręcznie linii znaczników wstawionych przez tę wtyczkę - są one wymagane w celu zaktualizowania konfiguracji zgodnie z ustawieniami.

OSTRZEŻENIE : Przed włączeniem opcji eksperta upewnij się, że serwer WWW jest skonfigurowany tak, aby zezwalał na zastąpienia określone wraz z ustawieniami, które mają być używane. Zazwyczaj te dyrektywy są dostępne i dozwolone. Jeśli jednak masz wątpliwości, poproś swojego webhostera, aby się upewnić!

Włącz buforowanie przeglądarki

Jeśli ta opcja jest włączona, moduł mod_expires Apache jest aktywowany i skonfigurowany do wysyłania instrukcji buforowania do przeglądarek użytkownika w następujący sposób:

Zasoby niestatyczne

(nie buforowane)

HTML , XML , JSON

(buforowane przez okres do jednego roku)

PNG , GIF , JPEG , ICO

JavaScript , CSS

EOT , WOFF , TTF , SVG

Wymagane zastąpienie Apache : indeksy

Podpowiedź: Jeśli możesz ustawić niestandardowy indeks katalogów w pliku .htaccess, możesz bezpiecznie włączyć tę opcję, ponieważ oba wymagają tego samego nadpisania Apache, aby były dozwolone.

Jeśli jest włączona, mod_deflate Apache jest skonfigurowany do kompresji zawartości następujących typów:

HTML , XML , JSON , JavaScript , CSS , SVG

Wymagane zastąpienie Apache : FileInfo

Podpowiedź: Jeśli używasz SEF i pomyślnie włączyłeś mod_rewrite w globalnej konfiguracji Joomla !, możesz również bezpiecznie włączyć tę opcję, ponieważ obydwa wymagają tego samego nadpisania Apache.

Jeśli którekolwiek z tych ustawień zostanie zmienione, plik .htaccess zostanie odpowiednio zaktualizowany po zapisaniu konfiguracji.

WSKAZÓWKA : Jeśli wtyczka jest odinstalowana , linie wstawione przez Aimy Speed ​​Optimization zostaną automatycznie usunięte. Jeśli wcześniej włączyłeś opcje, a następnie dezaktywowałeś rozszerzenie, linie nadal będą w pliku .htaccess. Wyłącz te opcje i zapisz to ustawienie przed dezaktywacją wtyczki.

Ograniczenia

Prosimy o dokładne zapoznanie się z ograniczeniami, aby wiedzieć, które funkcje Aimy Speed ​​Optimization będą dostępne na Twojej stronie i które rozszerzenia są obecnie nieobsługiwane:

funkcje

Internet Explorer 8 nie zinterpretuje żadnych zapytań o media w osadzonym kodzie CSS, nawet jeśli używana jest pomocnicza biblioteka, taka jak respond.js .

Dynamicznie generowany i poza siedzibą kod CSS nie może być osadzony (np. CSS off-site webfont).

Asynchroniczne ładowanie JavaScript w kolejce bez blokowania renderowania strony zostało dokładnie przetestowane i wiadomo, że działa również z innymi strukturami JavaScript, ale tylko jQuery i jQuery UI są obecnie oficjalnie obsługiwane.

Zasoby Require.js są przechowywane tak, jak są, ponieważ są zazwyczaj ładowane asynchronicznie samodzielnie i działają zgodnie z oczekiwaniami dzięki Aimy Speed ​​Optimization.

Kod JavaScript Google Analytics Experiments (używany do testowania A / B) i Facebook Pixel Events jest przechowywany bez zmian i nie będzie w kolejce.

Obrazy

: Odroczone ładowanie i Leniwe ładowanie

Obie opcje wymagają włączenia obsługi JavaScript w przeglądarce użytkownika. Wszystkie popularne przeglądarki i dobrze znane wyszukiwarki obsługują JavaScript i domyślnie go włączają.

: Leniwe ładowanie

Leniwie załadowane obrazy mogą być dostępne tylko w wersji drukowanej lub w widoku Czytnika, jeśli zostały już załadowane, to znaczy, jeśli były kiedyś w widoku czytelnika.

: Wrap in Link

Automatyczne zawijanie wszystkich odroczonych lub leniwych załadowanych obrazów w łączu może przerwać niektóre galerie zdjęć lub pokazy slajdów, które same przyjmują założenia dotyczące struktury obrazów i ich pojemników.

Buforowanie przeglądarki i kompresja są realizowane poprzez konfigurację pliku .htaccess. To działa tylko dla serwerów WWW Apache .

Nieobsługiwane rozszerzenia

Następujące rozszerzenia są obecnie znane jako niekompatybilne z Aimy Speed ​​Optimization i nie są obsługiwane:

Strona Cache

(wtyczka systemowa)

Alternatywnie: ustaw „Konserwację konserwatywną” lub „Buforowanie progresywne” w „Globalnej konfiguracji” Joomla! („ System ” → „ Ustawienia pamięci podręcznej ”).

(plugin captcha)

Wtyczka nie działa, jeśli aktywna jest opcja „ Wyeliminuj blokowanie renderowania ”.

Alternatywnie: użyj innej wtyczki captcha Aimy Captcha-Less Form Guard .

J51 - Florencja

(szablon)

Szablon nie działa zgodnie z oczekiwaniami, jeśli aktywna jest opcja „ Wyeliminuj blokowanie renderowania ”.

(moduł)

Szablon nie działa zgodnie z oczekiwaniami, jeśli aktywna jest opcja „ Wyeliminuj blokowanie renderowania ”.

Nazwa i logo Joomla! ® są znakami towarowymi Open Source Matters, Inc. w Stanach Zjednoczonych i innych krajach.

Google i logo Google są zastrzeżonymi znakami towarowymi Google Inc.

Wymienione twarde i programowe oraz firmy mogą być znakami towarowymi ich właścicieli. Użycie terminu w niniejszej instrukcji nie powinno być traktowane jako wpływające na ważność jakiegokolwiek znaku towarowego lub znaku usługowego. Brakująca adnotacja znaku towarowego nie może prowadzić do założenia, że ​​nie zastrzeżono żadnego znaku towarowego, a zatem można go swobodnie używać.

Aimy Speed ​​Optimization obejmuje następujące biblioteki Open Source:

HTML5-PHP

opracowany przez Matta Butchera, Matta Farinę i Asmira Mustafica.

MinifyCSS i MinifyHTML

opracowany przez Netzum Sorglos Software GmbH.

JShrink

opracowany przez Roberta Hafnera.

$ script.js JavaScript loader i menedżer zależności

opracowany przez Dustina Diaza.

[be] Lazy.js JavaScript leniwy program ładujący

opracowany przez Bjørn Klinggaard.

BŁĘDY POD

Hej! Powyższy dokument zawiera pewne błędy kodowania, które wyjaśniono poniżej:

Wokół linii 539:

Znak spoza ASCII widoczny przed = kodowanie w „Bjørn”. Zakładając UTF-8