Prędkość to użyteczność.
Mówiąc to dokładniej, szybkość witryny jest główną częścią użyteczności. Najbardziej intuicyjny interfejs stworzony przez umysł ludzki nie zrobi ci nic dobrego, jeśli użytkownik zostanie zepchnięty przez czas ładowania.
to jest to! Artykuł jest gotowy ... Ok, więc jest w nim o wiele więcej, ale to pierwsze zdanie to około połowa tego, co powinieneś wiedzieć. Musimy szybko tworzyć nasze strony internetowe.
Mógłbym używać wielu wyrażeń superlatywnych, takich jak "płonący szybko", "bardzo szybko", lub nawet "szybszy od pędzącego pocisku", ale byłyby one niewystarczające. Łatwiej jest powiedzieć, że nie ma czegoś takiego jak "zbyt szybko".
Musimy poświęcić chwilę, aby porozmawiać o tym, o jaką szybkość chodzi. Krótko mówiąc, cała szybkość. Dokładniej mówiąc, trzy rodzaje prędkości:
To byłby czas, aby wszystkie informacje zostały pobrane na urządzenia użytkowników. Wpływa na to przede wszystkim szybkość połączenia internetowego i faktyczny rozmiar plików.
Nie można wiele zdziałać w związku z połączeniem, ale można wiele zrobić na temat rozmiaru pliku.
Po pobraniu plików muszą one zostać przetworzone i renderowane przez przeglądarkę. Na całe to przetwarzanie i renderowanie ma wpływ to, jak dobrze został napisany kod i wszystko inne dzieje się na telefonie, tablecie lub laptopie / komputerze użytkownika.
Jedyne, co możesz kontrolować, to twój własny kod, ale to robi dużą różnicę.
A ponadto jest czynnik psychologiczny. Szybkie strony internetowe mogą wyglądać i czuć się tak, jakby były wolne. Powolne strony internetowe mogą sprawiać wrażenie odrobinę szybciej dzięki sądowemu zastosowaniu niektórych sztuczek.
W tej części chodzi przede wszystkim o poznanie użytkownika i poinformowanie ich o tym, co dzieje się podczas interakcji z witryną lub aplikacją.
Musisz zwracać uwagę na wszystkie trzy aspekty szybkości witryny, aby Twoja strona czuła się tak, jakby była szybka. Im większa jest strona, tym więcej można zoptymalizować.
Zacznijmy więc.
Wiele razy, szczególnie w tych mniejszych, eksperymentalnych projektach, które tak bardzo kocham, spędzam więcej czasu nad CSS niż jakakolwiek inna część kodu. Często jest też więcej napisanych CSS niż HTML lub JavaScript. Oznacza to, że wskaźnik CSS może wpływać na rozmiar pliku.
Wtedy oczywiście chodzi o to, jak szybko Twoja witryna będzie działać na komputerze, laptopie, tablecie lub telefonie użytkownika. Znaczna część faktycznej "pracy" lub renderowania strony internetowej jest wykonywana przez oprogramowanie, z niewielką pomocą Twojego GPU.
Może załadować się szybko, ale przewijaj powoli. Sposób, w jaki napisany jest CSS, ma bezpośredni wpływ na to, jak szybko konkretne urządzenie może wyświetlić stronę internetową po pobraniu plików.
Podczas optymalizacji strony internetowej, aby działała szybciej, CSS jest zwykle dobrym miejscem do rozpoczęcia.
CSS, który znajduje się w twoim arkuszu stylów i niczego nie robi, sprawia, że twoje pliki są niepotrzebnie większe. Okay, więc ten może wydawać się nierozważnym; ale nadal dzieje się to z najlepszymi z nas.
Wyciągasz trochę treści i zapominasz usunąć stary CSS. Zmieniasz klasę lub ID elementu kontenera i zapominasz usunąć stary CSS. Piszesz trochę kodu CSS, zdajesz sobie sprawę, że jest lepszy sposób i zapominasz ... że to rozumiesz.
Do miksu wrzuć wielu programistów front-end, a otrzymasz przepis na nieporęczny, nieobsługiwany arkusz stylów lub ich kolekcję, jeśli nie jesteś ostrożny. Nieużywany kod spowalnia ładowanie strony z racji swojego istnienia jako danych. Spowalnia rozwój, ponieważ może mylić ludzi czytających arkusz stylów.
Może to również oznaczać wolniejsze czasy renderowania, ponieważ jest to po prostu więcej CSSów do przeglądania przeglądarki, podczas gdy pasuje ona do wszystkich CSS do odpowiednich elementów HTML.
Niezależnie od tego, czy przeglądasz i usuwasz wszystkie stare CSS ręcznie, użyj automatycznych narzędzi, aby znaleźć nieużywane selektory CSS, lub po prostu usuwaj rzeczy losowo, aż coś się zepsuje (nie rób tego), musisz wyjąć stary kod.
Mówiąc o tym, jak przeglądarka pasuje do CSS z odpowiednim HTML, czas spojrzeć na selektory CSS. Wiele już napisano o tym, które selektory renderują najszybciej, które z nich są wolne, czy powinieneś w ogóle zajmować się powolnymi, i tak dalej.
Problem polega na tym, że wiele z tych informacji jest starych. W 2000 roku Dave Hyatt (programista pracujący w Safari i aktywny członek grupy roboczej CSS W3C) napisał:
Smutna prawda o selektorach CSS3 polega na tym, że naprawdę nie powinno się ich używać, jeśli zależy Ci na wydajności strony.
Jeśli przyjrzysz się dokument ten cytat pochodzi, zobaczysz, że mówił o selektorach takich jak : first-child i inne pseudo-selektory. I miał rację.
Nadal jest; ale w ciągu ostatnich piętnastu lat komputery nieco się rozwinęły. W dzisiejszych czasach, dodatkowy wysiłek wymagany od komputera, aby uczynić, że CSS nie powinien być zauważalny przez nikogo poza tymi, którzy używają najtańszych tanich urządzeń mobilnych.
Jest to problem sam w sobie, tak naprawdę, będzie zależeć od projektu pod ręką, docelowej demografii i tak dalej. Mówiąc najprościej, wykorzystaj swoją najlepszą ocenę i być może nie przesadzaj z pseudo-selektorami.
W przeciwnym razie, jeśli Twoje strony nie osiągną długości książki, używane selektory powinny mieć bardzo mały wpływ na wydajność witryny. Mimo to spójrz na dokument powiązany powyżej i dowiedz się, co robi najszybsze, a co nie. Nadal możesz znaleźć informacje przydatne.
Możesz także zobaczyć Ten artykuł z CSS-Tricks na nieco bardziej aktualne podejście do tematu.
Oczywiście istnieją również właściwości CSS, które wymagają więcej czasu niż inne. Klasyczne właściwości, takie jak szerokość, wysokość i kolor, nadal są najszybsze. Te, które zwykle trwają nieco dłużej (i mogą różnić się w zależności od przeglądarki, przeglądarki), mają właściwości CSS3, takie jak box-shadow.
Proces dodawania cienia do elementu jest złożony, jeśli chodzi o renderowanie stron internetowych. Co ciekawe, to, o czym wspomniałem Skały HTML5 , wymagana moc obliczeniowa może się znacznie różnić w zależności od konkretnych wymiarów cienia.
Ten artykuł wskazuje, że to samo dotyczy innych właściwości, takich jak promień obramowania i transformacja.
Ponownie, mają one niewielki wpływ na renderowanie strony na przeciętnym komputerze stacjonarnym lub laptopie. Urządzenia mobilne mogą jednak stać się większym hitem, czego konsekwencją może być doświadczenie. Każdy nienawidzi przewrotnego przewijania.
Mimo to należy to porównać z kosztami korzystania z obrazów w celu uzyskania takich samych efektów. Czy ktokolwiek pamięta, co robiliśmy, żeby kiedyś zaokrąglić rogi?
Po prostu nie przesadzaj, a twoje style powinny być wystarczająco szybkie.
Teraz dostaniemy się na inne terytorium. Animacje CSS mogą być niesamowicie szybkie lub spowolnić przeglądarkę do tego stopnia, że urządzenia do gier mają problemy z utrzymaniem.
Dzieje się tak częściowo dlatego, że nie wszystkie animacje są renderowane jednakowo. Niektóre z ciężkich dźwigów są wykonywane przez sprzęt, podczas gdy inne rodzaje animacji muszą być całkowicie renderowane przez funkcje przeglądarki. Jest to szczególnie kosztowne na urządzeniach mobilnych.
W kolejny artykuł na stronach HTML5 Rocks najszybciej zmieniają się właściwości CSS: pozycja , skala , obrót i krycie.
Zapoznaj się z artykułem, aby uzyskać pełniejszy przegląd tego, co można animować przy zachowaniu niskiego kosztu.
Oto, gdzie mogę ci zaoferować najbardziej praktyczne porady, które ja, autor, mogę ci dać. Używaj preprocesorów CSS, takich jak LESS, SASS i Stylus. Oczywiście, jeśli użyjesz ich niewłaściwie, możesz wygenerować większe arkusze stylów, niż zamierzałeś; ale potencjalne korzyści są tego warte.
Na przykład, jeśli chcesz zmniejszyć liczbę żądań HTTP wysłanych do serwera (zawsze dobry pomysł), dołącz wszystkie resetowania, frameworki do jednego pliku LESS / SASS. Kiedy się skompiluje, wszystko będzie w jednym arkuszu stylów. Ponadto większość preprocesorów oferuje opcję wyprowadzania wszystkich CSS w postaci zminimalizowanej.
W ten sposób możesz użyć tylu różnych plików, ile potrzebujesz do celów organizacji kodu, bez nadmiernego wpływu na rozmiar pliku.
JavaScript może być naprawdę wolny. Aby być bardziej szczegółowym, JavaScript może mieć znacznie bardziej bezpośredni wpływ na "przetwarzanie" części równania prędkości niż CSS. Gorzej, JS może stać się wykładniczo cięższy pod względem wielkości pliku, aby osiągnąć pozornie banalne rzeczy.
To podwójna bzdura z bolesną powolnością, a nasi użytkownicy często są ofiarami, zwłaszcza w przeglądarkach mobilnych. Nie jest to jednak wina języka. Jak wkręcony nasz JS dostaje się często w bezpośredniej proporcji do naszej ignorancji programowania w ogóle.
Nie jestem programistą. Często korzystałem z bibliotek, takich jak jQuery, lub pojedynczych samodzielnych wtyczek JS, aby wszystko było gotowe. Im więcej potrzebuję, tym więcej wtyczek potrzebuję, aby wszystko działało. Te wtyczki i frameworki mają dodatkowe opcje i funkcje, z których nigdy nie korzystam.
Tam jest kradzież pasma.
Ponadto wtyczki mogą nie działać dobrze razem. Mogliby spowolnić siebie nawzajem, albo ktoś mógłby powstrzymać drugiego od pracy.
Tu jest zmarnowana moc przetwarzania.
Jeśli naprawdę chcesz przyspieszyć swoją witrynę, w milisekundach (lub całych sekundach, w niektórych przypadkach) odłóż to, co musisz zrobić:
Podobnie jak w CSS, najlepiej przechowywać JS w zewnętrznych plikach i połączyć z kodem HTML. Możesz nie myśleć, że to taka wielka sprawa, jeśli nie masz zbyt wiele kodu JS i dodaje on żądanie HTTP, ale oto, co jest: zewnętrzne pliki CSS i JS są buforowane przez przeglądarkę.
Kiedy ponownie zażądamy tej samej strony lub innych stron w Twojej witrynie, które korzystają z tego samego żądania CSS lub JS, te buforowane pliki zewnętrzne zostaną użyte zamiast pobierać ponownie. To szybsze ładowanie witryny i nieco szybsze przetwarzanie. Warto dodatkowe wezwanie do serwera co jakiś czas.
Zasadniczo teoria wygląda następująco: przeglądarka renderuje wszystko, co jest na początku kodu źródłowego strony. Dlatego rzeczy takie jak tag idą w górę.
Jednak pliki JavaScript mogą spowolnić wszystko, zatrzymując przeglądarkę przed renderowaniem kodu HTML, dopóki nie zostaną załadowane. Ponieważ większość powszechnie używanych efektów i wtyczek JS musi działać dopiero po wyświetleniu reszty strony na ekranie, jest to mniej niż idealne.
Zwiększ wygodę użytkownika i skróć postrzegany czas ładowania, łącząc się z tymi zewnętrznymi plikami na dole strony, tuż przed tagiem.
Do czasu interakcji użytkownika z czymkolwiek, co wymaga JS, powinien być gotowy do pracy.
Jeśli projektujesz pełnowartościową aplikację, możesz i może zignorować tę sekcję. Dobra, elastyczna i lekka struktura może dać programistom ogromną przewagę. W przypadku małych i średnich stron internetowych, w tym framework JavaScript może być przesadą. Na tych stronach JS będzie głównie używany w zapleczu CMS do administrowania treścią. Na frontonie możesz mieć suwak obrazu lub układ muru lub dwa. Jeśli naprawdę masz ochotę, możesz automatycznie uzupełnić pasek wyszukiwania.
Większość treści nie musi być wyobrażana i animowana w ten sposób. JavaScript powinien, w miarę możliwości, być zarezerwowany dla poprawy wygody użytkownika. Opieranie się na tym po prostu ładowanie strony może spowodować powolną i powolną witrynę, zwłaszcza na urządzeniach mobilnych.
W pewnym sensie wszystkie frameworki kodu są takie same, niezależnie od tego, czy są to JavaScript, PHP, Python, HTML czy CSS: każda funkcja to garść kodu. Wybierając framework lub wtyczkę do pracy, zadaj sobie pytanie, czy zamierzasz korzystać z każdej oferowanej funkcji, czy nawet z większości z nich.
Jeśli nie, to czy framework jest modułowy? Czy potrafisz wybrać i wybrać tylko te części, których rzeczywiście potrzebujesz? Jeśli tak, i uważasz, że kompromis w rozmiarze pliku jest tego wart, to na wszelki wypadek! W przeciwnym razie najlepszą praktyką jest zobaczenie, co możesz wziąć więcej, niż możesz w to włożyć.
Nie na stałe! Pomyśl o tym w ten sposób, czy istnieje jakaś treść lub funkcjonalność w Twojej witrynie ukryta przez JS? Czy ludzie mogą uzyskać do niego dostęp bez włączonego JS w swoich przeglądarkach?
Jeśli tak, to świetnie. Jeśli jednak ludzie nie zobaczą ważnych informacji, skontaktują się z Tobą lub poprawnie poruszą się bez JavaScript, oznacza to, że masz problem. Oczywiście, możesz polegać na większości osób, które wciąż mają włączone, ale zawsze masz te przypadki krańcowe.
Jak to się ma do szybkości witryny? Wyobraź sobie, jak wolno się przegląda, jeśli część Twojej witryny nagle przestaje działać.
Nie poważnie, jeśli nie jesteś programistą i masz budżet na jeden, idź go, nawet na małe, proste prace. W dłuższej perspektywie taniej jest zatrudnić kogoś doświadczonego, aby zrobić to dobrze, raz.
Jeśli wszystko pójdzie nie tak (i mówimy tutaj o komputerach, więc coś pójdzie nie tak), dowiedzą się, co poszło źle. Będą mieli doświadczenie w znajdowaniu tego rodzaju problemów i ich rozwiązywaniu. Jeśli nic więcej, będą lepsze w prowadzeniu tych tematów.
Co najważniejsze, będą wiedzieli, jak zrobić to, co należy zrobić przy mniejszej ilości kodu. Mniej kodu (zwykle) działa szybciej i (zawsze) pobiera się szybciej. To najprostsza rada, jaką mogę dać.
(Jeśli jesteś programistą lub się uczysz, przygotowałem listę tutoriali, która będzie na dole tego artykułu. W zestawie znajdują się przewodniki dla początkujących dotyczące pisania skryptów JavaScript, które działają szybko).
Kiedy wyprowadzasz wideo poza równanie, największą rzeczą na jakiejkolwiek stronie opartej na treści są obrazy. Obrazy są zwykle duże, nieporęczne i powolne jak diabli, gdy nie są zoptymalizowane.
Teraz, gdy coraz więcej ekranów siatkówki zmusza nas do używania większych obrazów, jeśli chcemy, aby wszystko dobrze wyglądało na każdym urządzeniu, problem nie będzie łatwiejszy do rozwiązania. Co gorsza, jest to kwestia, o której łatwo zapomnieć, dopóki nie wydasz więcej niż planujesz na przepustowość.
Kiedy każdy bajt się liczy, nie możemy zapomnieć.
Dobra wiadomość jest taka, że w żadnym razie nie jest to nowy problem. Czemu to jest dobre? Oznacza to, że istnieje mnóstwo potencjalnych rozwiązań do wyboru i możesz użyć więcej niż jednego z nich na raz. W rzeczywistości to na ogół dobry pomysł.
Dopóki dostawcy usług internetowych i firmy hostingowe nie zaczną oferować nam nieograniczonej bezpłatnej przepustowości (nie wstrzymujmy się), oto kilka rzeczy, które możesz zrobić:
Mówiąc najprościej, zrób to, o ile możesz, wizualnie, za pomocą CSS i JavaScript, zanim przejdziesz do obrazów. Kod zawsze będzie tańszy niż obrazy, więc trzymaj się go tak bardzo, jak możesz. Pomimo mocy obliczeniowej zużywanej przez cienie, gradienty i podobne rozwiązania oparte na CSS, rozważ kompromisy.
Należy również pamiętać, że obrazy SVG liczą się w tym przypadku jako "kod", ponieważ to wszystko one są: kod XML, który jest renderowany jako obraz. Dlatego powinny być używane, gdy potrzebujesz czegoś związanego z wektorem.
Teraz, wracając do wspomnianych ekranów siatkówki, co z nimi zrobimy? Jak oszczędzamy na przepustowości?
Tutaj zwracamy się do elementu i właściwości zestawu obrazów . Są stosunkowo nowe i nie są w pełni obsługiwane, ale umożliwiają przeglądarce wybór odpowiedniego rozmiaru obrazu dla używanego urządzenia.
Więc nie oszczędza to żadnej przepustowości dla kogoś, kto ogląda twoją stronę w iMacu, nie jest to tak wielka sprawa, ponieważ najprawdopodobniej ma łącze szerokopasmowe. W międzyczasie ktoś na telefonie otrzymuje mniejszą wersję tego samego obrazu, co uniemożliwia im zbyt długie czekanie.
Wiele problemów z obrazem zostaje naprawionych, gdy dowiesz się, jakiego formatu obrazu użyć w danej sytuacji. Mogę porozmawiać o konkretnych formatach obrazu, o tym, jak działa kompresja itd., Ale naprawdę musisz tylko pamiętać o kilku rzeczach:
To naprawdę wszystko. Jeśli to zrobisz i będziesz grał z ustawieniami optymalizacji podczas zapisywania obrazów, możesz często uzyskać całkiem przyzwoitą jakość przy stosunkowo niewielkich rozmiarach plików.
Istnieje jednak nowy format zwany WebP, który jest obsługiwany automatycznie przez Chrome i Operę. Google roszczenia że pliki WebP są o 26% mniejsze niż pliki PNG i o 25-34% mniejsze w zależności od kilku czynników.
To dobra wiadomość, z wyjątkiem dwóch rzeczy: Firefox i IE. Teraz, jeśli nie masz nic przeciwko używaniu fallbacks i dodatkowego skryptu, możesz teraz użyć formatu WebP. Wystarczy pobrać WebPJS i jesteś dobry, by iść.
WebPJS używa JavaScript i trochę Flasha ( wzdycha ... ale to tylko dla IE), aby działało, ale działa. Możesz to rozważyć, jeśli chcesz szybko obsłużyć wiele dużych obrazów, a wadą jest to, że nie będzie działać bez JS.
Istnieją dwa rodzaje kompresji, których można używać na obrazach. Najpierw mamy kompresję stratną . Ta funkcja jest używana w formatach stratnych, takich jak JPEG. Umożliwia kompresowanie dowolnego obrazu o tyle, ile chcesz, ze świadomością, że jakość będzie się pogarszać, a co gorsza. Rzeczy zostaną podzielone na piksele i stracą definicję.
Kompresja bezstratna jest używana w formatach takich jak PNG i może w pewnym stopniu zmniejszyć ich rozmiar. Ma jednak swoje ograniczenia. Zawsze pojawia się punkt, w którym niemożliwe jest zmniejszenie obrazu bez utraty jakości.
Jeśli masz Photoshopa lub podobnie zaawansowany edytor obrazów, najlepiej jest użyć ich do skompresowania obrazów, abyś mógł zobaczyć, jak będą wyglądać wydruki po zakończeniu.
(Z mojego doświadczenia wynika, że narzędzia automatyczne, szczególnie narzędzia online, mogą nieco kompresować rzeczy, ale będę wymieniać najlepsze narzędzia do kompresji, które znalazłem w sekcji linków poniżej).
Jeśli używasz CMS takiego jak WordPress, automatycznie zmieni rozmiar zdjęć, które są zbyt duże. Łatwo też znaleźć wtyczki, które automatycznie je skompresują.
Pamiętaj, że zalecam tylko automatyczną kompresję w przypadkach, gdy wiesz, że zamierzasz przesyłać partie i wiele obrazów o podobnej jakości do tego samego celu. Przykładem może być blog ze zdjęciami.
Jeśli prowadzisz witrynę, w której użytkownicy przesyłają własne obrazy, a także ... automatyczne zmienianie rozmiaru i kompresja są koniecznością i dlatego każda sieć społecznościowa to robi.
Oto kilka porad, które nie pasowały do żadnej z powyższych trzech kategorii.
"Zminimalizowanie" kodu oznacza, że wszystkie dodatkowe spacje i podziały wierszy zostają usunięte. Może to znacznie zmniejszyć rozmiar pliku.
Może to zabrzmieć jak dużo pracy, ale istnieją narzędzia do automatycznego minimalizowania CSS i JS i utrzymywania oddzielonych plików dla plików źródłowych z oczywistych powodów.
Jak wcześniej wspomniano, różne preprocesory CSS mogą wyprowadzać cały twój kod w postaci zminimalizowanej.
Pod warunkiem, że serwer jest skonfigurowany poprawnie, cały kod może zostać przesłany do przeglądarki w skompresowanym formacie. Pliki tekstowe kompresują się bardzo dobrze, zmniejszając znacznie rozmiar wysyłanych plików.
Teraz twój serwer musi zająć chwilę lub dwie, aby skompresować pliki, które wysyła, a przeglądarka użytkownika musi je rozpakować, ale zazwyczaj jest to warte kompromisu w zakresie przepustowości.
Pełne wyjaśnienie, jak to działa, patrz Jak zoptymalizować witrynę za pomocą kompresji GZIP .
Buforowanie przeglądarki dzieje się automatycznie w pewnym stopniu dzięki nowoczesnym przeglądarkom. Przeglądarka przechodzi do witryny i tymczasowo przechowuje obrazy i inne informacje, które tam znajdzie.
W ten sposób, jeśli ten sam użytkownik powróci w danym okresie czasu, przeglądarka nie musi ponownie prosić o te same obrazy. Po prostu ładuje te, które już posiada, i prosi o nowe obrazy, których może nie mieć.
Jest jednak coś, co możesz zrobić, aby powiedzieć przeglądarkom, co mają przechowywać w pamięci podręcznej i jak długo, jak widać w ten przewodnik .
A potem jest buforowanie serwera. Buforowanie serwerów w zasadzie zajmuje twoją witrynę i umieszcza niejako "kopię" między twoimi użytkownikami a twoim faktycznym serwerem. Dlaczego miałbyś się przejmować?
Jest to szczególnie przydatne dla osób, które używają systemów zarządzania treścią na dużą skalę. Zapewnienie użytkownikom dostępu do tymczasowej kopii witryny zamiast rzeczywistej rzeczy zmniejsza liczbę połączeń z bazą danych. Informacje są wyświetlane i ładowane szybciej, ponieważ nie muszą być ponownie przetwarzane za każdym razem.
W zależności od konfiguracji, buforowanie serwerów może również ogólnie obniżyć koszty łącza. Zasadniczo im większa witryna, tym większy powód, dla którego należy zaglądać do pamięci podręcznej.
A teraz sekcja, na którą wszyscy czekaliście: lista linków! Mamy głównie tutoriale i przewodniki, a także kilka narzędzi do kompresji obrazu.
Wieśniak! może nie być tak wielka jak kiedyś, ale ich sieć programistów ma wiele dobrych rzeczy. Obejmuje to ich Sprawdzone metody na przyspieszenie Twojej witryny , która obejmuje niektóre z podstawowych rzeczy, które możesz zrobić. Niektóre z nich dotyczą tego samego podłoża, co ten artykuł, ale jest jeszcze więcej.
We wstępie wspomniałem o postrzeganej prędkości strony, zwanej również postrzeganą wydajnością. Jeśli chcesz przeczytać więcej na ten temat, sprawdź Przewodnik dla początkujących do postrzegania wydajności: 4 sposoby, aby Twoja strona mobilna czuć się jak natywna aplikacja .
Effeckt.css to zestaw animacji opartych na CSS, zaprojektowanych do szybkiego renderowania, niezależnie od platformy użytkownika.
To to przewodnik, który zapewnia, że Twój CSS zostanie pobrany i przetworzony tak szybko, jak to możliwe, przez przeglądarkę.
Kiedy dopiero zaczynasz, nauka poprawnego kodowania może być równie dużym przyspieszeniem prędkości, jak dowolnymi sztuczkami, których możesz się nauczyć. Zły kod kosztuje więcej pod względem czasu przetwarzania, więc naucz się robić rzeczy we właściwy sposób.
Tutaj jest podstawowy przewodnik skupia się bardziej na pisaniu JavaScriptu, który działa szybko.
Tak jak mówi tytuł, to to wszystkie porady skierowane konkretnie na JavaScript V8.
A czasami, prawdopodobnie skończysz używając jQuery. Jeśli masz zamiar to zrobić, przynajmniej powinieneś wiedzieć, jak pisać selektory jQuery, które nie spowalniają. I tu jest miejsce Sitepoint Cię okrył .
Przeczytaj to więcej informacji o formatach obrazu w Internecie. Informacje są nieco stare, ale nadal ważne i dobrze wiedzieć.
To to bardziej techniczny przewodnik po optymalizacji obrazu udostępniany przez sieć Google Developer Network.
Compressor.io jest jednym z bardziej imponujących narzędzi, które osobiście napotkałem. Jest to aplikacja online, więc musisz przesłać pliki, które chcesz skompresować, ale może to zdziałać dla JPG. Oferuje zarówno opcje kompresji stratnej, jak i bezstratnej, z których każda ma całkiem niesamowite wyniki, a także umożliwia przetwarzanie wsadowe.
Trimage Specjalizuje się w bezstratnej kompresji, ale można ją zainstalować na swoim komputerze, w systemie Windows, Mac lub Linux. Ponieważ instaluje się na komputerze (i tak, jest wyposażony w różne opcje wiersza poleceń, a także GUI), może być łatwo uruchomiony automatycznie w ramach przepływu pracy.
Jak zawsze, trzeba się jeszcze wiele nauczyć. Uzbrojone w dostarczone przez nas informacje i zasoby, z którymi się połączymy, będziesz na dobrej drodze do tworzenia witryn i aplikacji, które nie drażnią piekła użytkowników.
I to jest pierwszy krok w kierunku ich imponowania.