W naszych materiałach przykładamy dużą wagę do prezentacji informacji, staramy się uzupełniać teksty zdjęciami, wykresami, ilustracjami i infografikami. Z jednej strony poprawia to postrzeganie naszych artykułów przez czytelników, z drugiej strony powoduje obciążenie systemu pamięci masowej i szybkość ładowania materiałów. Jeśli rozwiązanie pierwszego problemu jest czysto techniczne i skutecznie sobie z nim poradzimy, zaczęliśmy myśleć o kwestii optymalizacji obrazu stosunkowo niedawno.
Jeśli kilka lat temu nasza główna publiczność pojawiła się na stronie z komputerów osobistych, to na wykresach dla ostatniego kwartału smartfony są ściśle dopasowane do komputerów stacjonarnych.
Jednak szybkość mobilnego dostępu do Internetu jest wciąż dwa razy niższa niż w przypadku stałego połączenia, a to w idealnych warunkach. Często, z dala od dużych miast, kończą się nie tylko 4G, ale zamiast 3G, smartfon pokazuje tylko ikonę „E” - oznacza to, że maksymalna prędkość dla standardu EDGE wynosi nie więcej niż 474 kbps. Załadowanie niezoptymalizowanego obrazu o wielkości 500 kB zajmie co najmniej 10 sekund, a jeśli w artykule jest około dziesięciu, nie każdy czytelnik będzie czekał na otwarcie żądanego materiału.
Wniosek - potrzebne jest narzędzie optymalizacyjne, które pozwala „w locie” kompresować grafikę, przyspieszać wyświetlanie artykułu czytelnikowi i czynić witrynę bardziej „przyjazną” dla wyszukiwarek.
Twórcy usługi zaproponowali rozwiązanie naszego problemu. OptiPic .
OptiPic to usługa automatycznej optymalizacji i kompresji obrazów. Autorzy startupów twierdzą, że optymalizują obrazy zgodnie z zaleceniami Google PageSpeed Insights, przyspieszając w ten sposób dostęp do witryny, zwiększając współczynnik konwersji i czynniki behawioralne.
Usługa PageSpeed Insights - Jest to zasadniczo test, który pozwala zidentyfikować błędy w technicznej optymalizacji strony i daje zalecenia, jak wyeliminować te błędy. Pomimo nazwy Google PageSpeed Insights nie oblicza szybkości ładowania strony, ale tylko identyfikuje czynniki, które mogą mieć wpływ na szybkość pobierania. Wśród nich: optymalizacja kodu strony internetowej (html, css, skrypt java), czas odpowiedzi serwera, ustawienia buforowania i optymalizacja obrazu. Usługa OptiPic obiecuje pomoc w ostatnim aspekcie.
Ilość obrazów jest często głównym czynnikiem wpływającym na szybkość pobierania całej strony, zwłaszcza jeśli nie zwracasz wystarczającej uwagi na optymalizację rozmiaru obrazów. Podobnie Google uważa, że PageSpeed Insights: jego optymalizacja optymalizacji całej strony zależy w dużej mierze od oceny optymalizacji obrazów. Możesz zastosować wszystkie inne techniki optymalizacji, ale uzyskaj wynik 50 punktów na 100, tylko dlatego, że usługa uważa, że optymalizacja obrazów na stronie jest daleka od ideału. A jeśli mówimy o kilku zdjęciach, zadanie optymalizacji nie wygląda na tak skomplikowane: rozmiar i rozmiar obrazów można zmniejszyć ręcznie za pomocą edytorów online i offline. Ale kiedy musimy umieścić na stronie kilkaset obrazów lub zoptymalizować obrazy dla całej historii witryny, zadanie przestaje być banalne. W końcu, jeśli publikacja obrazów odbywa się regularnie i jest rutynowa, chciałbym ją zautomatyzować. A OptiPic proponuje to w kilku prostych krokach, a mianowicie:
- Rejestracja,
- Instalowanie modułu na stronie,
- Dostosowanie i optymalizacja uruchamiania.
Przechodzimy przez prostą procedurę rejestracji nowego konta, podłączamy do niego naszą stronę i otrzymujemy ofertę instalacji modułu OptiPic. Moduł można pobrać automatycznie, określając ustawienia dostępu do serwera FTP / SFTP lub możesz pobrać i zainstalować go ręcznie. Pobierz moduł i zainstaluj go na stronie, zgodnie z zaleceniami.
Moduł to zestaw trzech plików php: główny plik ze skryptem, plik konfiguracyjny (dostęp do usługi OptiPic) oraz strona html z reklamą usługi. Główny plik zawiera skrypt, którego funkcjonalność polega na indeksowaniu plików obrazów w witrynie, wysyłaniu obrazów do chmury OptiPic w celu optymalizacji i zapisywania zoptymalizowanych obrazów i ich oryginałów na serwerze. Tak, warto zauważyć, że OptiPic nie jest CDN, wszystkie obrazy pozostają na serwerze po optymalizacji. W chmurze OptiPic obrazy są pobierane tylko w celu optymalizacji, a następnie pobierane wraz z oryginałami z powrotem do witryny.
Po załadowaniu modułu do serwisu konieczne jest dostosowanie indeksowania i optymalizacji obrazów na koncie osobistym na stronie OptiPic. Ustawienia są dość proste i większość opcji można pozostawić jako domyślne. Wprowadziliśmy zmiany tylko w opcji „Tylko indeks”, wskazując ścieżkę do folderu, w którym umieściliśmy obrazy do optymalizacji testu.
Podczas rejestracji OptiPic wydaje darmowy limit 10 megabajtów, aby użytkownicy mogli przetestować usługę. Otrzymaliśmy większą kwotę, a dzięki OptiPic udało nam się uzyskać 1,22 GB zdjęć.
Po zakończeniu ustawień rozpoczynamy indeksowanie iw ciągu kilku minut otrzymujemy wynik: w podanym folderze skrypt znalazł 10038 obrazów o łącznej objętości 1,22 GB. Przed uruchomieniem optymalizacji obrazu przetestowaliśmy niektóre nasze strony za pomocą Google PageSpeed Insights i uzyskaliśmy następujące wyniki:
Strona:
https://www.computerra.ru/
Telefon komórkowy: 70/100
Komputery stacjonarne: 38/100
Optymalizacja:
Strona:
https://www.computerra.ru/category/gadgets/
Telefon komórkowy: 67/100
Desktop: 46/100
Optymalizacja:
Strona:
https://www.computerra.ru/229153/zritelnaya-kora-i-prochie-mozgi-dlya-avtopilota/
Telefon komórkowy: 76/100
Komputery stacjonarne: 61/100
Optymalizacja:
Na każdej stronie PageSpeed Insights wymagano zoptymalizowania obrazów i przewidywania, że istniejące zdjęcia można skrócić do 10% ich początkowego rozmiaru.
Rozpoczynamy optymalizację i angażujemy się w inne sprawy. Według prognoz, więcej niż jeden gigabajtowy obraz będzie przetwarzany przez kilka godzin. I tak się stało: cały proces trwał prawie 9 godzin i zakończył się dopiero późną nocą.
Nawiasem mówiąc, proces indeksowania i optymalizacji obrazu nie jest wymagany za każdym razem, aby uwzględnić oddzielną akcję. Możesz je włączyć raz, a przejdą w tle, gdy pojawią się nowe obrazy w indeksie, aż do zakończenia limitu płatnego ruchu.
Pod koniec procesu zoptymalizowane obrazy pojawiły się w naszym folderze. Oryginały zdjęć pozostały tam, tylko zmieniły rozszerzenie na optipic-orig. Optymalizację zdjęć można anulować, zastępując nowe zdjęcia ich oryginałami, w tym celu na koncie osobistym znajduje się funkcja „Zwróć oryginały”. Jeśli oryginały nie muszą być przechowywane, można je usunąć.
Na koncie osobistym wyniki optymalizacji są prezentowane w formie statystyk ogólnie, a dla każdego obrazu osobno.
OptiPic twierdzi, że wszystkie 10 038 obrazów o całkowitej skuteczności kompresji 51,60% okazało się skompresowane. Foldery „Waga” ze zdjęciami na dysku potwierdzają te informacje.
Przejdźmy do testowania stron za pomocą Google PageSpeed Insights.
Strona:
https://www.computerra.ru/
Telefon komórkowy: 71/100
Desktop: 81/100
Strona:
https://www.computerra.ru/category/gadgets/
Mobile: 82/100
Desktop: 88/100
Strona:
https://www.computerra.ru/229153/zritelnaya-kora-i-prochie-mozgi-dlya-avtopilota/
Telefon komórkowy: 76/100
Desktop: 80/100
Zgodnie z wynikami testu większość zdjęć została uznana przez Google za zoptymalizowaną, a tylko kilka zdjęć sugerowało „optymalizację”. Pod wynikami testu znajduje się link, gdzie można pobrać przykładowe pliki, które Google PageSpeed Insights uważa za najlepsze. Pobraliśmy i obejrzeliśmy oferowane zdjęcia, a wszystkie były niezadowalającej jakości. Nie używamy takich zdjęć na stronie. Czasami jednak konieczne jest wybranie między jakością zdjęć a ich głośnością. Podejście OptiPic w tym aspekcie uznano za optymalne.
Warto również zauważyć, że w ustawieniach indeksowania i kompresji obrazów na koncie na stronie OptiPic dostępna jest opcja „Jakość obrazu”. Dzięki temu prostemu ustawieniu możesz wybrać balans jakości / kompresji, który uważasz za optymalny.
Nie eksperymentowaliśmy z tym ustawieniem, pozostawiając go w wartości „domyślnej”. Ponadto wyniki testów wraz ze wzrostem ogólnego wyniku optymalizacji do 100% całkowicie nas zadowoliły. W tym momencie zakończyliśmy testowanie usługi Optipic i wyciągnęliśmy wnioski na temat jej skuteczności i zakresu.
Ta usługa może być przydatna dla właścicieli witryn, którzy stale pracują ze zdjęciami i nie chcą wydawać dużej ilości zasobów na tę pracę (na przykład programiści piszący skrypty optymalizacyjne lub utrzymujący osobnego menedżera treści). Mogą to być fotografowie zamieszczający swoje portfolio online; sklepy internetowe z dużą bazą kart produktów; blogerzy fotograficzni i inni. Z pomocą OptiPic można nie tylko zmniejszyć objętość obrazów, ale także ich rozmiary: wszystkie ustawienia są dostępne na koncie osobistym i są bardzo proste. Wystarczy ustawić wszystko raz, a następnie proces indeksowania i optymalizacji obrazów będzie trwale prowadzony w tle, aż do zakończenia limitu płatnego ruchu. W tym przypadku poziom automatyzacji usług całkowicie wyeliminuje zadanie optymalizacji grafiki.
