Kreacja HTML5 to reklama utworzona przy użyciu języków HTML, CSS i JavaScript. Kreacje HTML5 zapewniają liczne możliwości kompresowania plików. Wiele z podanych niżej wskazówek można zastosować w niecałe 15 minut.
Tematy w tym artykule:
Używanie Google Web Designera
Google Web Designer to aplikacja internetowa służąca do programowania w języku HTML5, która została płynnie zintegrowana ze Studio i z Biblioteką zasobów. Poza tym Google Web Designer udostępnia wbudowane funkcje kompresji obrazu i kodu oraz obsługę czcionek internetowych Google, SVG, animacji CSS i wiele innych możliwości.
Wypróbuj aplikację Google Web Designer
Sprawdzanie rozmiaru pliku
Zanim zmniejszysz rozmiar pliku, sprawdź, jaki jest obecnie, oraz przeczytaj poniższe wskazówki i warunki.
Rozmiar pliku nieprzetworzonego a rozmiar pliku skompresowanego
Aby sprawdzić rozmiar pliku nieprzetworzonego:
- W Studio sprawdź Całkowity rozmiar plików w kroku Zarządzaj plikami procesu tworzenia kreacji w Studio.
- W aplikacji Google Web Designer kliknij kolejno Opublikuj > Opublikuj lokalnie, aby zobaczyć Rozmiar łączny (Nieprzetworzony) w oknie dialogowym publikowania. Możesz także sprawdzić aktualny rozmiar pliku w Weryfikatorze reklam.
Google Web Designer kompresuje kreacje bezpłatnym oprogramowaniem gzip. Jeśli nie korzystasz z aplikacji Google Web Designer, możesz pobrać bezpłatną kopię programu gzip, skompresować pliki na komputerze lokalnym i sprawdzić ich rozmiar.
Podstawowy rozmiar pliku
Przed utworzeniem kreacji należy zapoznać się ze specyfikacjami wydawcy dotyczącymi wyświetlania reklam. Wielu wydawców przyjmuje jednak zalecane przez IAB wartości – ilość początkowo wczytywanych danych kreacji równą 200 KB (po skompresowaniu) i całkowity rozmiar kreacji równy 300 lub 500 KB (w zależności od formatu). Ilość początkowo wczytywanych danych odnosi się do łącznego rozmiaru skompresowanego pliku ze wszystkimi zasobami kreacji przesyłanymi do przeglądarki przed wyświetleniem reklamy. To obejmuje wszystkie pliki – obrazy, HTML, CSS i JavaScript.
Rozmiar pliku komponentu Enabler
Kreacje Studio muszą zawierać komponent Enabler, ale przeglądarki mają w pamięci podręcznej zapisaną jego kopię, bo dla każdej kreacji Studio ładowany jest ten sam skrypt. Wielkość skryptu Enabler wynosi 25 KB (po skompresowaniu) lub 75 KB (nieprzetworzonego).
Więcej szczegółowych informacji znajdziesz we wskazówkach IAB i Studio:
- Wskazówki IAB na temat HTML5 (w formacie PDF, patrz strony 4 i 6; tylko w j. angielskim)
- Wskazówki Studio na temat kreacji
Informacje o interwencjach Chrome w zakresie obciążających reklam
- Jeśli kreacja zawiera wiele obrazów, filmów, animacji lub obiektów 3D, przetestuj ją, postępując zgodnie ze wskazówkami Chrome, aby nie została wyładowana z pamięci.
- Za pomocą wersji demonstracyjnej interwencji Chrome w zakresie obciążających reklam sprawdź, czy kreacja nie zostanie zablokowana.
Kontrola wczytywania i specyfikacje wydawcy
Kontrola wczytywania opóźnia ładowanie dodatkowych zasobów kreacji (np. obrazów i filmów) do chwili zakończenia wczytywania strony wydawcy. To coś innego niż ilość początkowo wczytywanych danych, która odnosi się do łącznego rozmiaru skompresowanego pliku ze wszystkimi zasobami kreacji przesyłanymi do przeglądarki przed wyświetleniem reklamy. Niektórzy wydawcy wymagają stosowania kontroli wczytywania, ale warto z niej korzystać, nawet gdy nie jest wymagana. Dowiedz się, jak skonfigurować kontrolę wczytywania
Zapoznaj się ze specyfikacjami wydawcy dotyczącymi kreacji multimedialnych HTML5. Wydawcy mogą obliczać rozmiar pliku na podstawie skompresowanego formatu gzip lub mogą uwzględniać rozmiar pliku nieprzetworzonego. Specyfikacje poszczególnych wydawców mogą różnić się od specyfikacji IAB w zależności od miejsca docelowego, typu reklamy i innych czynników. Niektórzy wydawcy mogą być skłonni do akceptowania odstępstw od swoich specyfikacji. Musisz też wziąć pod uwagę wszystkie obowiązujące ograniczenia czasu odtwarzania animacji lub filmu.
Zmniejszanie rozmiaru obrazu
Zanim podejmiesz próbę zmniejszenia rozmiaru obrazu, najpierw zastanów się, czy ten obraz jest w ogóle potrzebny. Niektóre elementy graficzne można zastąpić stylami CSS. Poniżej znajdziesz sugestie i zasoby pozwalające ograniczyć liczbę obrazów w kreacji i zoptymalizować te, których potrzebujesz.
Używanie CSS do tworzenia gradientów i kolorów jednolitychObrazy w formatach GIF, JPG i PNG opierają się na pikselach („rastrze”), przez co są większe. Pliki SVG zawierają grafikę punkt-do-punktu („wektorową”), dzięki czemu pozwalają znacznie zmniejszyć rozmiar pliku.
Dowiedz się więcej o SVG
Samouczek SVG W3School
Jak korzystać z plików SVG
Kompresja plików SVG
Czcionki ikon są zwykłymi czcionkami, których możesz używać tak samo jak czcionek standardowych. Często opierają się na wektorach, co pozwala zmniejszyć rozmiar pliku. Jeśli ciągle używasz tych samych ikon, utwórz własne czcionki ikon.
Zasoby dotyczące czcionek ikon
Kreator czcionek ikon Icomoon
Ikony CSS NounProject
Ikony CSS FontAwesome
Arkusz sprite jest pojedynczym obrazem podzielonym na kafelki, który ładuje się tylko raz. CSS umożliwia pokazywanie tylko pojedynczych kafelków całego obrazu. Zastosowanie arkusza sprite zmniejsza liczbę żądań HTTP, a im jest ich mniej, tym szybciej ładuje się kreacja. Nadal jednak musisz znaleźć właściwy sposób kompresji arkusza sprite.
Materiały dotyczące arkuszy sprite
Omówienie arkuszy sprite obrazów CSS W3School
Internetowy generator arkuszy sprite Stitches
Jeśli wymagane są obrazy pikselowe, skompresuj je jak tylko można bez obniżania ich jakości. Prawdopodobnie znasz funkcję Photoshopa „Save For Web”. Istnieją jednak inne narzędzia internetowe, które zapewniają zaawansowaną kompresję.
Tworzenie animacji za pomocą CSS
W przypadku przejść i przekształceń zastanów się nad użyciem animacji CSS3 zamiast JavaScriptu. Przekształcenia CSS do renderowania animacji używają GPU (procesora graficznego) zamiast CPU (procesora centralnego), co poprawia wydajność i pozwala zmniejszyć rozmiar pliku JavaScript.
W przypadku bardziej złożonych animacji (w tym animacji cząsteczek) używaj bibliotek animacji JavaScript GreenSock (GSAP). GreenSock upraszcza bardziej kłopotliwe aspekty animacji CSS, takie jak synchronizowanie wielu animacji w czasie i niezależne animowanie właściwości przekształceń.
Nie używaj bibliotek ani struktur JavaScriptu używających metody setInterval na potrzeby animacji, ani metody setInterval do kodowania ręcznego. Metoda setInterval zużywa dużo zasobów przeglądarki, przez co niekorzystnie wpływa na jej wydajność, oraz wymaga więcej kodu. Jeśli koniecznie potrzebujesz animacji JavaScriptu, użyj metody requestAnimationFrame, która została opracowana specjalnie na potrzeby animacji.
Dowiedz się, jak zoptymalizować działanie animacji
Korzystanie z metody requestAnimationFrame
Porównanie animacji CSS z animacjami JavaScriptu
Przed przysłaniem plików CSS do Studio zminifikuj je za pomocą CSS Minifier.
Zmniejszanie rozmiaru pliku JavaScript
Poniżej znajdziesz kilka wskazówek dotyczących zmniejszania rozmiaru pliku JavaScript:
Nie używaj biblioteki jQueryZ kreacją nie musisz przesyłać bibliotek JavaScript. Zastąp odniesienia do wspólnych bibliotek JavaScript hostowanymi adresami URL Studio. Te biblioteki są hostowane w tej samej domenie co wyświetlana reklama.
Współdziałanie Studio z IAB sprawia, że wiele kreacji korzysta z tych zasobów i zapisuje je w pamięci podręcznej. Dzięki temu nie muszą się one wstępnie ładować wraz z reklamą.
Aby zaoszczędzić czas i ograniczyć długość wymaganego kodu, możesz wskazać konkretne przeglądarki i urządzenia, na które ma być kierowana kampania. Nie musisz wtedy dodawać kodu odnoszącego się do nieobsługiwanych przeglądarek i urządzeń. Pozwoli Ci to także zaoszczędzić czas podczas testowania.
Zasoby dotyczące obsługi przeglądarekObsługa przeglądarek i urządzeń w Studio
Can I use: aktualne informacje o obsłudze właściwości JS i CSS w przeglądarkach
Łączenie i kompresja plików JavaScript
Jeśli masz wiele plików JavaScript, połącz je w jeden. Użyj narzędzi usuwających komentarze i dodatkowe spacje z JavaScriptu.
- Zachowaj wersje nieskompresowane na potrzeby przyszłych aktualizacji.
- Studio wymaga, aby pliki JavaScript miały rozszerzenie
.js, a nie.min.js. - Jeśli zminifikujesz pliki JavaScript, nie będzie można łatwo dodać funkcji śledzenia. Najpierw dodaj funkcje śledzenia, a potem zminifikuj plik JavaScript.
Optymalizacja czcionek
Jeśli używasz innych czcionek niż standardowe czcionki internetowe, skorzystaj z Google Fonts – dużej biblioteki bezpłatnych czcionek. Aby zmniejszyć rozmiar pliku, wysyłaj żądania tylko potrzebnych znaków, a nie całego kroju pisma.
Pamiętaj też, że w pamięci podręcznej przeglądarki zapisywane są tylko bezwzględne adresy URL. Chociaż dla konkretnej kreacji adres http://fonts.googleapis.com/css?family=Philosopher&text=Hello może zapewniać najmniejszy rozmiar, nadal będzie widoczny jako osobne żądanie z adresu http://fonts.googleapis.com/css?family=Philosopher&subset=latin, który może być już zapisany w historii przeglądarki. Korzystaj z zapisywania w pamięci podręcznej, gdy tylko jest to możliwe, aby przyspieszyć ładowanie kreacji.
Dowiedz się więcej o czcionkach internetowych
Optymalizowanie żądań czcionek za pomocą Google Web Fonts
Tworzenie podzbiorów czcionek na potrzeby programu Typekit i własnych czcionek internetowych