10 łatwych sposobów na zwiększenie szybkości witryny w 2020 r

Szybkość strony była kiedyś jednym z podstawowych filarów projektowania stron internetowych. Ostatnio niestety zajął miejsce z tyłu ze względu na wyższą przepustowość internetu („więc po co zawracać sobie głowę?”) I przyjęcie nowoczesnych frameworków front-end. Jednak szybkość witryny nadal ma kluczowe znaczenie dla wygody użytkowników i zarabiania, a jej wpływ na Twoją witrynę jest prawdopodobnie znacznie większy, niż Ci się wydaje.

Efekt optymalizacji witryny pod kątem szybkości, jeśli chodzi o zarabianie na reklamach i wygodę użytkownika, jest nie do przecenienia. Aby dowiedzieć się, jak dobrze radzi sobie Twoja witryna pod względem szybkości, możesz użyć narzędzia do audytu Chrome lub użyć narzędzi takich jak GTmetrix lub narzędzie deweloperskie Google.

W tym artykule zajmiemy się trochę kwestiami technicznymi, przeprowadzimy Cię przez dziesięć podstawowych działań, które przyspieszą Twoją witrynę w 2020 roku, co zaowocuje lepszym UX i lepszymi monetyzacjami.

Spraw, aby Twój serwer działał dla Ciebie

Prawidłowe skonfigurowanie serwera może znacznie poprawić szybkość działania. Dwie proste konfiguracje, których potrzebujesz, aby mieć pewność, że masz:

1. Włączona kompresja – upewnij się, że masz włączoną kompresję GZIP dla wszystkich plików tekstowych (HTML, JS, CSS, ETC….).
2. HTTP2 – Jeśli Twój serwer obsługuje protokół HTTP2, upewnij się, że jest włączony.To świetny sposób na poprawę wydajności bez konieczności zmiany czegokolwiek w witrynie.
   Sprawdź tę fajną demonstrację HTTP2 autorstwa Vodien.

Użyj leniwego ładowania

Leniwe ładowanie to proces ładowania treści tylko wtedy, gdy ma ona zostać wyświetlona. Zmniejszy to pobieranie wielu dodatkowych treści, do których użytkownik może nigdy nie dotrzeć, i zwolni przeglądarkę, aby drastycznie poprawić wydajność. Dobrą wiadomością jest to, że istnieje wiele gotowych pakietów, które mogą pomóc w szybkim ładowaniu zawartości. Co więcej, począwszy od Chrome 76 (lipiec 2019 r.), Lazy Loading jest natywnie zintegrowane z HTML. Po prostu dodaj do taguloading=”lazy ” i gotowe.

Zmniejsz swoje pliki

Minifying – Jest to proces usuwania spacji i komentarzy z kodu.Są one niezbędne, aby kod był czytelny dla ludzi, ale komputery ich nie potrzebują. Minifikacja może zmniejszyć rozmiar pliku o ponad 70%. Należy zminimalizować wszystkie pliki HTML, CSS i JS. Tylko upewnij się, że zachowałeś oryginały na wypadek konieczności wprowadzenia zmian. Obecnie każde większe IDE ma wtyczki, które minimalizują Twoje pliki. Jeśli używasz pakietu takiego jak React, minifikacja ma wbudowane wytrząsanie drzewa.

Dzielenie plików — Upewnij się, że Twoje pliki zawierają tylko to, czego potrzebują.Dzielenie plików pomaga zmniejszyć pliki, a projekt jest o wiele łatwiejszy w zarządzaniu.

Zoptymalizuj obrazy

Właściwyrozmiar obrazów – Responsywne projektowanie stron internetowych stało się normą, co prowadzi do wyświetlania obrazów w różnych rozmiarach w zależności od ekranu.Możemy to wykorzystać na naszą korzyść i zachować kilka różnych rozmiarów naszych obrazów. Nie ma potrzeby pobierania dużego pliku, jeśli obraz nie będzie w stanie pokazać wszystkich tych pikseli. Tag obrazu i atrybutsrcsetsprawiają, że jest to bardzo łatwe.

Ten przewodnik przeprowadzi Cię przez kilka najlepszych praktyk i łatwych implementacji responsywnego dostosowywania rozmiaru obrazów.

Formaty nowej generacji – nowe formaty obrazów, które są obecnie obsługiwane w większości przeglądarek, mogą radykalnie zmniejszyć rozmiary plików (nie tylko zdjęć).Na przykład otwarty format Google WebP może zmniejszyć rozmiar pliku od 64% do 92%. W poniższym przypadku używamy plików WebP w 2 różnych rozmiarach i dodajemy zastępczy obraz jpg dla przeglądarek, które nie obsługują webP.

Spriteobrazu – Sprite obrazu to obraz składający się z wielu małych obrazów.Używanie sprite'a graficznego dla wszystkich przycisków\logo zmniejszy liczbę wywołań serwera potrzebnych do załadowania strony. Jeśli używasz protokołu HTTP/1.1, skróci to czas ładowania.

Zaimplementuj politykę pamięci podręcznej po stronie klienta

Czas ładowania strony można znacznie skrócić, prosząc przeglądarkę o zachowanie pobranych już plików. Dotyczy to zarówno plików wewnętrznych, jak i zewnętrznych.

Pliki wewnętrzne – Są to pliki wielokrotnego użytku w Twojej witrynie, takie jak arkusze stylów i logo.Zwyczajowo ustawia się datę wygaśnięcia na 1 rok dla plików, które się nie zmieniają, takich jak logo, ogólne CSS i obrazy z unikalnymi identyfikatorami. Jeśli masz pliki, które chcesz zmieniać częściej, możesz ustawić odpowiednią datę wygaśnięcia.

Pakiety zewnętrzne – Na przykład, jeśli Twoja witryna korzysta z pakietu bootstrap, zamiast pobierania pakietu na Twoją witrynę, masz możliwość skorzystania z CDN.Jeśli to zrobisz, nawet przy pierwszej wizycie użytkownika w Twojej witrynie prawdopodobnie nie będzie musiał pobierać pakietu, ponieważ jest to popularny pakiet i być może został już pobrany z innej witryny.

Wykorzystaj buforowanie po stronie serwera

Idea jest taka sama jak w buforowaniu frontendowym, oszczędzając serwerowi pracę nad rzeczami, które już stworzył lub których często używa. Jeśli masz witrynę z treścią, nie chcesz, aby Twoja baza danych była atakowana za każdym razem, gdy użytkownik wchodzi do witryny, ze względu na niską wydajność i koszty bazy danych. Ponieważ wszyscy użytkownicy będą widzieć te same artykuły, możesz je raz zapisać w pamięci podręcznej i udostępniać wersję z pamięci podręcznej, dopóki nie zostaną w niej wprowadzone zmiany.

Wiele różnych pakietów może ci w tym pomóc, w zależności od tego, jak zaprojektowano twój serwer. I oczywiście możesz zaprojektować własne buforowanie, aby dopasować je do swoich konkretnych potrzeb.

Użyj sieci CDN

Sieci dostarczania treści kontaktują się z Twoim serwerem, przechowują odpowiedź w pamięci podręcznej, a następnie udostępniają ją lokalnie użytkownikom. Na pierwszy rzut oka wydają się bardzo drogie. Jednak prawidłowe skonfigurowanie sieci CDN powinno obniżyć koszty udostępniania przy jednoczesnej znacznej poprawie wydajności.

Unikaj przekierowań

Unikaj przekierowań! Przekierowania to pewny sposób na spowolnienie wszystkiego. Czasami są one niezbędne, na przykład podczas przekierowywania użytkowników do korzystania z bezpiecznej wersji Twojej witryny (HTTP VS HTTPS) lub gdy przenosisz treści na swojej stronie, ale chcesz, aby Twoje stare linki SEO nadal prowadziły do ​​treści.

Jeśli zauważysz, że korzystasz z przekierowań, unikaj przekierowań łańcuchowych. Łańcuchowe przekierowanie to przekierowanie, które prowadzi do innego przekierowania. Jeśli musisz przekierować, upewnij się, że przekierowujesz tylko raz!

Ustal priorytety i usuń działania blokujące renderowanie

Renderowanie odnosi się do ładowania, a patrząc na twoją stronę internetową, najwyższym priorytetem dla szybkiego ładowania są części powyżej zakładki. Ponieważ HTML jest czytany od góry do dołu, ważne jest, aby rzeczy, które nie są ważne dla widoku pierwszej strony, były wypychane poza te, które są.

Na przykład, jeśli masz tag JS do celów analitycznych, możesz umieścić go w stopce strony. W ten sposób zapewniasz, że przeglądarka użytkownika najpierw zajmuje się rzeczami, które użytkownik widzi, a inne rzeczy odkłada na później.

Mądrze dobieraj partnerów

W sieci, podobnie jak w życiu, najważniejszy jest dobór odpowiednich partnerów. Możesz usprawnić swoją witrynę i mieć piękną witrynę zaprojektowaną do szybkiego działania. Ale z partnerem reklamowym, który powoduje powolne ładowanie witryny, tworzysz uciążliwe wrażenia użytkownika. Rok temu rozpoczęliśmy współpracę z wydawcą z branży e-sportowej i mieliśmy trudności z zarabianiem na stronie. Po dokładnym zbadaniu witryny znaleźliśmy jednostkę reklamową, która działała tak wolno, że powodowała przekroczenie limitu czasu przez każdego innego partnera reklamowego w witrynie. Po tym, jak witryna usunęła tego partnera reklamowego, ogólny RPM strony wzrósł czterokrotnie!

Ucz się

W tym artykule omówiliśmy tylko kilka szybkich wskazówek. Więc pamiętaj, aby wejść głębiej, aby zwiększyć wydajność. Ponadto nasz ekosystem nieustannie ewoluuje. Jeśli dotarłeś tak daleko, prawdopodobnie wiesz, że zawsze można się czegoś nowego nauczyć.

Polecam zapoznać się z dwoma linkami poniżej. Myślę, że to świetne miejsce na początek.

https://www.udacity.com/course/browser-rendering-optimization–ud860

https://medium.com/swlh/what-the-amp-augmenting-my-own-site-with-accelerated-mobile-pages-amp-52927bab7cb8