Idealny dom: 7 najlepszych praktyk optymalizacji strony głównej

1. 1. Optymalizacja serwera
2. 2. Optymalizacja plików JS, CSS
3. 3. Czcionki internetowe
4. 4. Buforowanie plików
5. 5. CDN
6. 6. AMP
7. 7. Optymalizacja treści

Chęć wypełnienia głównej strony informacjami do maksimum jest w pełni uzasadniona. Ale wynik może być tablicą treści, która załaduje 10-15 sekund. Jak to zoptymalizować? Rozumiemy ten artykuł.

1. Optymalizacja serwera

Zwiększ zasoby hostingowe. Jeśli masz możliwość zwiększenia zasobów - witamy! Ponadto brak zasobów hostingowych jest obecnie najczęstszą przyczyną spowolnienia „małych” witryn (wizytówki online, sklepu internetowego itp.).

Zoptymalizuj wydajność bazy danych. Uproszczone zadanie witryny polega na gromadzeniu danych, przechowywaniu ich w bazie danych i wyświetlaniu w odpowiednim czasie na prawej stronie. Dlatego logiczne jest, że większość czasu spędza się na zapytaniach do bazy danych i oczekiwaniu na niezbędne informacje. Jeśli baza danych jest słabo skonstruowana, wypełniona nieistotnymi danymi, popełniane są błędy w pisaniu zapytań, to szybkość uzyskiwania informacji może być znacznie zmniejszona.

Optymalizację bazy danych najlepiej pozostawić doświadczonemu programistowi - aby osiągnąć maksymalne wyniki bez utraty ważnych informacji.

Możesz to naprawić za pomocą:

• Zoptymalizuj strukturę bazy danych. „Rozprzestrzenianie” wszystkich informacji w ich „miejscach” - uprości to wyszukiwanie i odpowiednio przyspieszy pozyskiwanie informacji.
• Optymalizacja zapytań. Odpowiednio napisane prośby o informacje „pomogą” zasobowi internetowemu w celu szybkiego znalezienia niezbędnych danych w bazie danych.

Ursus Wehrli „Sztuka sprzątania”

Użyj buforowania serwera . To naprawdę potężny, wszechstronny sposób. Po prostu umieść wynik obliczeń w pamięci podręcznej i nie zapomnij okresowo aktualizować. W ten sposób zmniejszysz obciążenie serwera i przyspieszysz ładowanie strony.

2. Optymalizacja plików JS, CSS

Łączenie wielu plików CSS w tym samym czasie jest bardzo „czasochłonne”, aby przeglądarka załadowała stronę. Racjonalnym rozwiązaniem jest połączenie kilku plików CSS w jeden. Powinien być połączony na początku strony. Te same reguły działają dla plików JS, tylko połączenie jest tworzone na dole strony. Pliki, które zmniejszyliśmy, minimalizują. W tym celu odpowiednie specjalne programy narzędziowe, a także usługi online.

Pliki stylów (CSS) odpowiadają za wygląd (czcionka, kolor, położenie) elementów na stronie. Pliki skryptów (JS) implementują efekty dynamiczne (karty, listy rozwijane, animacje itp.).

Minimalny rozmiar pliku jest obowiązkowym wymogiem dla głównej strony witryny. Dlatego zalecamy ładowanie tylko kodu programu odpowiedniego dla głównego.

Im więcej efektów wizualnych i animacji koncentruje się na stronie, tym dłużej się ładuje. Głównym zadaniem jest znalezienie idealnej równowagi.

3. Czcionki internetowe

Zastosowanie nowoczesnych formatów WOFF2 i WOFF pozwala zmniejszyć ruch czcionek internetowych i szybko je uzyskać. Aby uzyskać optymalną optymalizację, używaj tylko tych zestawów znaków, które są używane w witrynie.

Osiągnięcie równowagi między estetyką a wydajnością strony jest możliwe dzięki właściwościom wyświetlania czcionek CSS. Możesz więc kontrolować reakcję przeglądarki - poczekaj na czcionkę lub narysuj zapasową, na przykład. Szybkie wyświetlanie czcionek internetowych jest również ułatwione przez ich wstępny link rel = "preload".

Nie należy używać więcej niż jednej lub dwóch czcionek na jednej stronie. Pogrubienie i kursywa wystarczą, aby wyróżnić niezbędną treść.

4. Buforowanie plików

W przypadku rzadko aktualizowanych elementów na stronie radzimy skonfigurować buforowanie - aby były wywoływane z pamięci podręcznej przeglądarki, a nie z serwera. Wykorzystanie wcześniej pobranych elementów podczas ponownego odwiedzania witryny zmniejszy częstotliwość żądań http do serwera. A to z kolei pozytywnie wpłynie na szybkość ładowania strony.

Pliki buforowane (obrazy, filmy, czcionki itp.) Są przechowywane na komputerze użytkownika i natychmiast wyświetlane w przeglądarce.

5. CDN

CDN (Content Delivery Network) - duża liczba serwerów internetowych na całym świecie, które reprezentują infrastrukturę sieciową. Korzystanie z CDN przyczynia się do wysokiej jakości i szybkiej transmisji danych. Sieć umożliwia przesyłanie bibliotek CSS i JS do witryny, a jednocześnie zmniejsza obciążenie serwera.

Korzystanie z CDN jest szczególnie istotne, jeśli witryna jest odwiedzana przez użytkowników z różnych krajów. Pliki zostaną pobrane z lokalnych serwerów, co znacznie przyspieszy ładowanie strony.

6. AMP

AMP - Accelerated Mobile Pages - wspólny rozwój Google, światowej sławy firm IT, właścicieli witryn i programistów. Technologia open source ma na celu zmniejszenie „wagi” witryny i natychmiastowe jej pobranie. Dzięki szybkiemu ładowaniu i adaptacji na urządzenia mobilne strony z AMR są umieszczone ponad innymi na liście zapytań.

AMR jest idealny, jeśli zamierzasz zoptymalizować wydajność wersji mobilnej, sekcje ograniczonej funkcjonalności, blogi, magazyny internetowe, zasoby informacyjne.

7. Optymalizacja treści

Im więcej multimediów i złożonej grafiki - tym bardziej problematyczne jest ładowanie strony przez przeglądarkę. Aby zoptymalizować zawartość, należy wybrać optymalny format pliku. W przypadku obrazów najpopularniejsze formaty to:

• JPEG jest dobry dla zdjęć, wielokolorowych, szczegółowych zdjęć
• PNG - dla wysokiej jakości obrazów z przezroczystością
• SVG - do animowanej i interaktywnej grafiki wektorowej.

Aby zmniejszyć rozmiar plików graficznych, opracowano specjalne narzędzia, które rozwiązują problem bez utraty jakości. Najważniejsze jest, aby nie przesadzić z ustawieniami kompresji.

Jeśli chcesz dodać film, śmiało! Pamiętaj tylko, że „zjada” dużo zasobów. Aby zmniejszyć obciążenie serwera, zalecamy korzystanie z popularnych usług Vimeo lub Youtube.

Sprawdź siebie! Aby sprawdzić, czy Twoja witryna wymaga optymalizacji, możesz użyć wygodnego narzędzia Google PageSpeed ​​Insights. Wystarczy wpisać adres strony - a zobaczysz obszary problemowe wersji na komputery stacjonarne i mobilne, a także wskazówki od Google, aby je wyeliminować.

Przykład udanej optymalizacji strony głównej tomahawk.in.ua

Profesjonalna optymalizacja strony głównej zapewni użytkownikom komfort, a tym samym dobre wrażenie interakcji z projektem online. A jednak - poprawi widoczność wyszukiwania witryny według słów kluczowych.

Zatrzymaj hamowanie na starcie. Zoptymalizuj!