Jak przyspieszyć swoją stronę
Prędkość witryny jest jedną z najważniejszych rzeczy na temat tworzenia treści internetowych i aplikacji internetowych.
Faktem jest, że wielu analityków z Google zauważyło, że ludzie często nie zasiadają w pierwszych 30 sekundach filmu, a tym bardziej w pierwszych 15, więc dobrze byłoby, gdyby zawartość witryny została załadowana jako tak szybko, jak to tylko możliwe, aby ludzie mogli dokonać osądu i zgodzić się na jego użycie lub nie.
Może to być trochę powierzchowne, że ludzie oceniają witryny szybko, ale często tak jest i nie powinniśmy brać tego za pewnik.
Optymalizacja witryny powinna być priorytetem, a często, gdy korzystamy z WordPressa i innych silników, mają dobre wtyczki, które pomagają. Zakładam jednak, że możesz nie używać WordPressa, ponieważ jest ich wiele, a ja dam ci kilka najlepszych sposobów na optymalizację dowolnej strony, niezależnie od tego, gdzie jest hostowana.
Obrazy
Optymalizacja obrazu może być trudnym tematem, ale ma naprawdę wiele aspektów, z których można wybrać. Dostępne są formaty plików, narzędzia optymalizacji obrazu i najlepsze praktyki kodu / CSS, aby upewnić się, że zapisujesz i działasz z obrazami w najlepszy możliwy sposób.
Chcę podać przykład, dlaczego jest to ważne, więc weźmy ostatni przykład. Niedawno stało się oczywiste dla różnych twórców iOS i twórców aplikacji, że aplikacje korzystające z obrazów Retina zajmują 2-4 razy więcej miejsca na telefonie osoby niż ich poprzednie wersje, a to powoduje, że telefony użytkowników po prostu się kończą przestrzeń z prostych pobrań aplikacji.
To nie jest tak istotne dla twórców stron internetowych i projektantów, ale pokazuje, jak ważne jest prawidłowe obsługiwanie obrazów na dowolnej platformie. Oto niektóre z najważniejszych tematów, które należy zapamiętać podczas optymalizacji obrazów w Internecie.
Formaty obrazów
Formatowanie obrazów jest gorącym tematem i wydaje się, że każdy wierzy, że inny format zwiększy prędkość, ale jest na to dość powszechna szkoła myślenia i zawsze możemy użyć tego jako standardu de facto. Pliki JPEG są przeznaczone do zdjęć, obrazy GIF to obrazy o niskiej jakości / obrazy w płaskim kolorze, a pliki PNG do wszystkich pozostałych. Większość projektantów stron internetowych i programistów, o których wiem, woli używać PNG do prawie wszystkiego, chyba że mają przycisk, który ma jeden lub dwa kolory, dzięki czemu uważają, że GIF-y działają świetnie.
Teraz możesz grać z tymi specyfikacjami, ale zawsze pamiętaj, że są to standardy, które pozwolą zaoszczędzić mniejsze i lżejsze w porównaniu do większych i cięższych. Jeśli jednak tworzysz witrynę fotograficzną, ładowanie będzie dość powolne, niezależnie od innych witryn - wypróbuj niektóre z tych metod, aby ogólnie poprawić optymalizację obrazu.
Kod obrazu
Jedną z najgorszych rzeczy, które możemy zrobić dla czasu serwera podczas ładowania obrazów, niech kod zrobi nam rozmiar. Cóż, można to powiedzieć o czymkolwiek w kwestii "pozwalania kodowi zrobić ____ dla nas". Powszechnym powiedzeniem jest: "Jeśli możesz to zrobić, to rób to", i jest to cholernie dobre. Używanie rzeczy takich jak width='50px' height='30px' może naprawdę zrzucić czas ładowania serwera w odniesieniu do tego obrazu, ponieważ serwer analizuje stronę i widzi, że ma do wykonania zadanie, które mógł wykonać twórca. Dlatego upewnij się, że robisz to ze wszystkimi swoimi obrazami.
Narzędzia do optymalizacji obrazu
Narzędzia są zawsze pomocne. Cóż, większość czasu. Czasami są ciężarem i rozproszeniem, ale w tym przypadku wydaje się, że są one często bardzo przydatne. Jeśli znajdziesz świetne narzędzie do optymalizacji obrazu, po pierwsze - połącz je w komentarzach, ponieważ wszyscy jesteśmy na polowaniu, ale kilka moich ulubionych podąża za nimi. kocham ImageOptim na Maca i Zamieszki dla Windowsa. Te dwa narzędzia są bardzo różne, ale wykonują podobne zadanie.
Możesz wstawiać obrazy i rozszyfrowuje sposób i metodę ich optymalizacji, zrób to, a następnie wypluj ostateczny wynik, jednocześnie zachowując format, w którym je wysłałeś. Są naprawdę całkiem mili i jest ich jeszcze więcej. W rzeczywistości istnieje grupa, która przeanalizuje bitmapę obrazu i powie, jaki format jest najlepszy. Możesz łatwo stwierdzić, że są to jedne z najbardziej przydatnych rzeczy w wiaderku narzędzi projektantów stron internetowych innych niż edytor tekstu i program do projektowania, i słusznie.
Optymalizacja serwera oparta na obrazie
Nie jestem ekspertem, jeśli chodzi o konfigurowanie serwerów, ale z pewnością mam wystarczającą wiedzę na małą skalę, aby udzielić tej porady. Nie przechowuj dużych ilości obrazów przechowywanych lokalnie. Oznacza to, że nie zostawiaj bazy danych obrazów przechowywanych na serwerach, z których serwujesz inne pliki witryny. Zwróć uwagę na technologie, takie jak serwery Amazon S3 lub Flickr, i używaj ich do serwowania plików.
Niedawno zaimplementowałem wiadro Amazon S3 do przechowywania naszych plików i było to całkiem łatwe - więc możesz to wypróbować. To świetna metoda. Głównym powodem jest to, że nie chcesz, aby wąskie gardło w bazie danych miało miejsce w instancji, w której obsługujesz wiele ładunków, ponieważ może to być koszmar zdiagnozowany. Dobrą praktyką jest przechowywanie oddzielnych plików na różnych serwerach (pod ogromnym obciążeniem), chyba że jest to zwykła baza danych do przechowywania ciągów ogólnych lub coś podobnego.
Optymalizacja CSS i JavaScript
CSS i JavaScript są bardzo ważnymi językami, jeśli chodzi o projektowanie stron internetowych, a zwłaszcza jeśli chodzi o tworzenie dynamicznych treści. Myślę, że ludzie często zapominają, że mogą zoptymalizować swoją dynamiczną zawartość i zapominają, że mogą zoptymalizować JavaScript i CSS. Nie są to najistotniejsze rzeczy w przypadku mniejszych witryn, ale w przypadku większych witryn jest to naprawdę ważne - zwłaszcza jeśli chodzi o witryny, które opierają się na wielu projektach. Przejdźmy przez kilka "Reguł CSS i JavaScript", które są dość znormalizowane, jeśli chodzi o tworzenie aplikacji internetowych.
Pierwsza zasada CSS i JavaScript
Jeśli możesz to zrobić w CSS, zrób to
Często zdarza się, że zapominamy o tym, że mamy przed sobą niesamowite narzędzia, a ja uważam, że CSS klasyfikuje się jako jeden z najbardziej niesamowitych projektantów stron internetowych. Powiedziałbym też, że projektanci zbyt szybko wskakują do Photoshopa z natury (ale ich zadaniem jest obarczanie ich winą). Pamiętaj jednak, że podczas projektowania masz coś w swojej przeglądarce, które potrafi wykonywać szybkie makiety: CSS3. Skorzystaj z tego! Posiadanie miejsca do robienia szybkich makiet naprawdę pomaga, a odejdzie od zhakowania razem rzeczy w HTML później. Zamiast "" Jestem pewien, że możesz znaleźć sposób na dodanie tej przestrzeni w CSS, więc rób to!
Druga zasada CSS i JavaScript
Minify, minify, minify!
Minifikacja kodu jest prawdopodobnie jedną z najlepszych i najłatwiejszych rzeczy, które możesz zrobić, aby przyspieszyć działanie witryny. Miejcie na uwadze, że mówimy o milisekundach, ale wciąż ma to zauważalny efekt - zwłaszcza jeśli używamy czegoś w rodzaju biblioteki jQuery. Pamiętaj, że jeśli kiedykolwiek dodajesz wtyczki do JavaScript / CSS i masz możliwość pobrania wersji minified (i nie musisz jej edytować), zrób to . Niektóre z moich ulubionych narzędzi do tego są: Minikod kodu dla Maca, Minify dla systemu Windows i JSCompress / CSSCompressor dla tych z Państwa, którzy chcą korzystać z wielu platform przeglądarkowych. Szczęśliwy minifying!
Trzecia zasada CSS i JavaScript
In-line to nie-nie
Złą praktyką jest używanie wbudowanego CSS lub JavaScript, ale szczególnie jeśli chodzi o CSS. Powodem tego są nie tylko problemy ze starszymi wersjami, ale także dlatego, że jeśli zostawiamy CSS w kodzie HTML (zwłaszcza w trybie in-line), będzie on czytał jako taki: HTML / CSS / HTML / CSS / HTML / CSS / HTML / CSS zamiast zwykłego HTML => CSS. Jak można się domyślić, jest to bardzo szkodliwe dla czasów ładowania serwera i często może prowadzić do niekorzystnych skutków dla większości aplikacji internetowych, gdyby projektant odmówił korzystania z niego w osobnym pliku. To z pewnością nie spowodowałoby awarii witryny, ale spowoduje to, że inny pracownik przejdzie i wyda ją - to jest tak ważne. Więc zawsze pamiętaj, aby być tym, który go wyodrębnia, a nie facetem, który pozostawia to, by inni mogli go wydobyć.
Czwarta zasada CSS i JavaScript
Przesuń go w dół
Jeśli musisz umieścić swój JavaScript na stronie z samym HTML i nie mieć możliwości obejścia go, a następnie umieścić go na dole dokumentu HTML . Pomaga to również przyspieszyć czas wczytywania witryny, ponieważ możemy wykonać wszystkie te funkcje i inne pakiety JavaScript po załadowaniu strony. Inną rzeczą jest to, że zmniejsza to prawdopodobieństwo, że błąd zgniecie wydajność całej witryny, ponieważ gdy pojawi się błąd z JavaScriptem, często będzie on jadł pamięć jak nie jutro. Dlatego dobrą praktyką jest upewnienie się, że strona nie robi tego i ostrzec przed nadchodzącymi zdarzeniami, w których może - nikt z nas nie chce, aby ludzie odwiedzali naszą stronę, a potem mieli awarie przeglądarek.
Piąta zasada CSS i JavaScript
Optymalizacja DOM
Zmniejsz DOM, jeśli możesz. Weźmy na przykład przykład, że używasz dużo jQuery, która wskazuje na różne elementy DOM lub czyta przez DOM, aby coś znaleźć - może spowolnić twoją witrynę w dół. Jest takie małe powiedzenie, które zawsze kochałem i pasuje tutaj: "Jeśli robisz rzeczy, ponieważ jest to jedyny sposób, w jaki wiesz, jak to zrobić, to prawdopodobnie są lepsze sposoby, aby to zrobić." Możesz również powiedzieć: "Jeśli robisz rzeczy, ponieważ jest to jedyny sposób, w jaki wiesz, jak to robisz, to robisz to źle, " ale ta wersja jest nieco ostrzejsza.
Zbadaj i znajdź te rzeczy w takim przypadku. Jeśli pracujesz z div w HTML tylko dlatego, że potrzebujesz go dla jednej małej rzeczy i jest to jedyny sposób, w jaki wiesz, jak to zrobić, to może nie być najlepszy sposób. Teraz oczywiście rozumiem, że używanie tagów div, ponieważ potrzebujesz ich dla swojego CSS, jest całkowicie zrozumiałe, ale być może możesz usunąć kilka i znaleźć szerszy sposób radzenia sobie z tym problemem.
Niedawno zrobiłem to sam, ponieważ obecnie przechodzę projekt Ruby on Rails. Wcześniej w tygodniu zagnieżdżałem około 5 elementów div w sobie nawzajem w HAML wszystkich rzeczy, po prostu robiąc coś, co chciałem (pudełko w pudełku w pudełku wewnątrz czegoś innego w tym przypadku). Po prostu na to patrzyłem, wiedziałem, że to bzdura, ale nie znałem lepszego sposobu na zrobienie tego, więc złomowałem to wszystko, aby ponownie zrobić. Konieczność powtórzenia tego sprawiła, że było to znacznie trudniejsze, ale zmusiło mnie to do nauczenia się nowego sposobu radzenia sobie z tym problemem. I w końcu wiele się z tego nauczyłem i poleciłbym to każdemu w przyszłości. Śmiało i weź jedną z tych bryłek wiedzy dla siebie! Są to z pewnością nisko wiszące owoce.
Ogólne optymalizacje
Są to bardziej ogólne tematy, które naprawdę nie pasują nigdzie indziej, ale wciąż zasługuję na uwagę. W rzeczywistości niektóre z nich mogą być najważniejszymi czynnikami, które można zrobić, aby przyspieszyć działanie aplikacji lub witryny internetowej.
Ukośniki na linkach
Jest to zauważalnie ważne. Kiedy użytkownik otwiera łącze bez ukośnika na samym końcu strony internetowej, serwer dosłownie musi dowiedzieć się, jaki rodzaj pliku lub strony znajduje się pod tym adresem. Serwer będzie wówczas zawierać wspomniany ukośnik, ale jeśli dodasz go samemu, zredukujesz milisekundy czasu ładowania. Te milisekundy wszystko sumują się, obiecuję. Często zdarza się, że projektanci, którzy nie myślą o tym, myślą, że ich niezoptymalizowany kod nie obciąży niczego, ale ostatecznie. Jeśli zaoszczędzisz kwadraty przez 10 lat, z pewnością będziesz miał dużo pieniędzy, a ta sama koncepcja ma zastosowanie tutaj - tylko na mniejszą lub większą skalę, w zależności od ruchu Twojej witryny.
Favicons
Przeglądarki zawsze pobierają plik favicon.ico na poziomie katalogu głównego serwera, więc równie dobrze możesz go dołączyć. Nawet jeśli jest to coś tymczasowego, zawsze dobrze jest mieć. Jeśli tego nie zrobisz, przeglądarka sama dostarczy "wewnętrzną 404" i po prostu zapamięta to 404 w sekcji favicon.ico przeglądarki, a wszyscy wiemy, że redukuje czas ładowania 404.
Zmniejsz rozmiar pliku cookie
To nie dotyczy nas wszystkich, ale jeśli tworzysz aplikacje internetowe, to zmniejszenie rozmiaru plików cookie jest bardzo ważne. Na przykład w tym, co znam - aplikacjach Ruby on Rails - możesz używać ciasteczek (lub innych metod) do uwierzytelniania od sesji do sesji i często ludzie wolą używać innych metod, ponieważ mogą zmniejszyć czas ładowania użytkownika .
Teraz plik cookie oznacza, że buforuje on pliki na komputerze, więc możesz pomyśleć, że zwiększy to czas ładowania, ale zazwyczaj wszystko, co jest dla nich dobre, to uwierzytelnianie sesji użytkownika lub śledzenie Cię w Internecie (jak Google i Facebook zostali oskarżeni o ). Jeśli jednak musisz pracować z plikami cookie, upewnij się, że ich rozmiar jest niski, a Ty korzystasz z nich z lepszą oceną. Jeśli musisz, ustaw krótszy czas ważności, aby zmniejszyć czas ładowania.
Pamięć podręczna
To ogromny temat i nie jestem ekspertem. Buforowanie jest jednak dość prostą koncepcją. Przechowuje pliki (zazwyczaj kod HTML / CSS) z witryn często odwiedzanych na komputerze, dzięki czemu nie trzeba ich ładować przy każdej wizycie.
Jest to naprawdę niesamowicie przydatna technologia, która jest wykorzystywana przez wiele aplikacji internetowych od kilku ostatnich lat. Istnieje szereg rozwiązań bazodanowych do buforowania i prawdopodobnie najbardziej godne uwagi jest Memcached . To, co to robi, polega na przechowywaniu kopii plików baz danych w przeglądarce, gdy korzystasz z aplikacji internetowej. Na przykład, jeśli często odwiedzasz różne profile, możesz przechowywać zdjęcia profilów na komputerze, a piękno Memcached pojawi się w kolejnej fazie. W twoim kodzie możesz wywołać (zanim wyciągniesz z DB) z serwerów Memcached i sprawdzić, czy możesz wyciągnąć buforowaną wersję pliku (ów). A jeśli nie, to oczywiście ściągnie plik z bazy danych, a jeśli nie jest już w pamięci podręcznej, doda go, by następnym razem zaoszczędzić czas. Jest to piękny przykład buforowania na dużą skalę i pomógł tonom i tonom firm przyspieszyć serwery i bazy danych w ciągu ostatnich 2 i więcej lat.
I to wszystko podsumuje. Oczywiście nie są to wszystkie sposoby na przyspieszenie swojej witryny, ale powinna ona przyspieszyć twoją ciekawość i sprawić, że będziesz szukał wszystkich wspaniałych rzeczy, które będą.