Rozmiar pliku HTML
Rozmiar pliku HTML to rozmiar pliku .html, który jest faktycznie wysyłany. Rozmiar tego pliku nie obejmuje rozmiaru dołączonych obrazów, ponieważ są one linkowane z tego pliku HTML i pobierane podczas otwierania.
Maksymalny rozmiar, który moglibyśmy polecić, to 100KB, ponieważ wszystko powyżej może prowadzić do problemów z dostarczalnością i wyświetlaniem. Na przykład, Gmail przytnie twój HTML przy 102KB. Przycinanie ukrywa koniec twojego e-maila i może zepsuć układ.
Większość e-maili powinna łatwo zmieścić się w 50KB. Jednak czasami złożone ulepszenia progresywne lub duża ilość treści kampanii prowadzą do większego rozmiaru pliku. Jeśli tak się stanie, istnieje kilka sposobów, aby pomóc zmniejszyć rozmiar twojego pliku HTML.
Oczyść swój kod. E-mail ciągle się zmienia i widzimy wiele szablonów z przestarzałym kodem. Szybkie czyszczenie może zaoszczędzić kilka KB.
Nie przesadzaj z kodowaniem. Niektóre szablony, które widzimy, mają dodatkowy kod, który po prostu nie jest potrzebny. Największym winowajcą jest dodawanie dodatkowych elementów tabeli. Większość układów można osiągnąć przy użyciu 5-10 tabel, ale często widzimy kod z 30-40 tabelami. Mniej tabel ma również dodatkową zaletę ułatwiającą czytanie twojego kodu.
Przenieś część kodu z HTML do CSS. Jeszcze nie jest bezpieczne przenoszenie wszystkich stylów do CSS, ale jeśli zrobisz to poprawnie, przeniesienie części stylów inline do stylów osadzonych może pomóc zmniejszyć kod.
Uprość swój projekt. Inną opcją jest wrócić do etapu projektowania. E-maile z jednym kolumną wykorzystują o wiele mniej kodu.
Minifikuj swój kod. Minifikacja kodu usunie zbędne spacje i komentarze. Może to mieć ogromny wpływ, ale bądź ostrożny, ponieważ wielu ESP nakłada maksymalną długość linii, co może wymusić nową linię i zepsuć kod.
Rozmiar zasobów zewnętrznych
Rozmiar zasobów zewnętrznych to rozmiar wszystkich twoich obrazów i zewnętrznych arkuszy stylów. Ponieważ zewnętrzne rozmiary są rzadkie, na razie skoncentrujemy się bardziej na obrazach.
Jeśli używasz obrazów tła i zapytań medialnych, to w niektórych środowiskach jest możliwe, że nie wszystko zostanie pobrane dla każdego użytkownika. Ale pamiętaj, że nawet jeśli zdefiniujesz display:none; dla elementu <img> , nadal zostanie on pobrany. Obecnie nie ma sposobu, aby temu zapobiec.
Maksymalny rozmiar dla większości obrazów to 100KB, ale jeśli masz jeden duży obraz w wysokiej rozdzielczości lub animowany gif, to może to wzrosnąć do 500KB. Jednak bardziej chodzi o całkowity rozmiar, który omówimy w sekcji o pełnym rozmiarze załadowanego e-maila.
Jest wiele zasobów, które mogą pomóc w kompresji rozmiarów obrazów:
ImageOptim – na Macu, lub jako usługa internetowa
Caesium – na Windowsie
CDN – Wiele CDN-ów ma wbudowaną optymalizację obrazów. Niektóre nawet dostosowują kompresję w zależności od dostępnej przepustowości.
Oto kilka innych wskazówek, które polecamy:
Upewnij się, że używasz najbardziej odpowiedniego formatu, .jpg dla zdjęć, .gif dla grafiki i .png, gdy potrzebujesz kanałów alfa
Uprość swój projekt. Ponownie wróć do etapu projektowania, aby używać mniej obrazów, mniejszych obrazów lub prostszych obrazów, które można skompresować do mniejszych rozmiarów.
Całkowity rozmiar załadowanego e-maila
To połączony rozmiar wszystkiego, gdy e-mail jest otwierany i wszystko jest pobierane. Może to się różnić w zależności od środowiska, w którym e-mail jest otwierany.
Głównym problemem tutaj jest czas ładowania e-maila. Prawdopodobnie testujesz swoje e-maile w biurze z bardzo szybkim połączeniem, ale wielu twoich odbiorców może korzystać z urządzeń mobilnych z wolnym połączeniem 3G.
Na dobrym połączeniu całkowity rozmiar e-maila 1 MB załadowałby się w ułamku sekundy i wydawałby się natychmiastowy dla użytkownika. Jednak na połączeniu 3G może to zająć od 2 do 14 sekund, aby załadować pełnego e-maila. A jeśli twoja grupa docelowa prawdopodobnie będzie korzystać z połączenia 2G, to pobranie może zająć kilka minut.
To również potencjalny problem z użytkownikami z restrykcyjnymi planami danych, którzy muszą rozważyć każdy MB, który pobierają. To jest szczególnie ważne w krajach rozwijających się.
Kilka rzeczy, które możesz zrobić, aby pomóc:
Po pierwsze, zwróć uwagę na wszystkie zalecenia, które wspomnieliśmy w odniesieniu do optymalizacji rozmiaru HTML i obrazów
Jeśli masz czas, zawsze warto eksperymentować z kodem i testować, co jest naprawdę potrzebne, a co możesz pominąć. Eksperymentuj z obrazami i spróbuj różnych sposobów ich kompresji. Upewnij się, że twój e-mail wygląda dobrze i ma sens bez obrazów, aby twoi użytkownicy mogli zacząć oglądać twój e-mail, czekając na obrazy.
Połączenie wszystkiego
Jeśli chodzi o rozmiary plików, tak jak w przypadku wielu rzeczy, wszystko sprowadza się do kompromisu. Możesz przeprowadzić testy A/B i stwierdzić, że duże obrazy w wysokiej rozdzielczości wypadają dobrze. Możesz stwierdzić, że dużo szczegółowej treści również wypada dobrze. Możesz również zauważyć, że złożona interaktywność również wypada dobrze. Jednak gdy połączysz wszystkie trzy w jedną kampanię - możesz zauważyć, że wydajność zaczyna być słaba.