Ultimate Guide to Web Optimization (Porady i najlepsze praktyki)

Optymalizacja sieci jest istotną częścią tworzenia i utrzymywania stron internetowych, ale także czymś często pomijanym przez webmasterów. Pomyśl tylko o pieniądzach, które możesz zaoszczędzić, i o tym, jak może potencjalnie pomóc zwiększyć czytelnictwo i ruch, gdy są właściwie wykonane.

Jeśli do tej pory nie dokonałeś optymalizacji swojej witryny (lub bloga) lub po prostu zastanawiasz się, jak może to przyspieszyć Twoją witrynę, spójrz na tę listę porad dotyczących optymalizacji, które przygotowaliśmy razem.

Podzieliliśmy rzeczy na 3 oddzielne sekcje, aby poprawić czytelność - odpowiednio optymalizacja po stronie serwera, optymalizacja zasobów (który obejmuje komponenty internetowe, takie jak CSS, Javascript, obrazy itp.) i Platforma, gdzie się skupimy Optymalizacja WordPress. W ostatniej sekcji wrzucamy kilka linków, które uznaliśmy za przydatne. Pełna lista po skoku.

Optymalizacja: po stronie serwera

1. Wybierz przyzwoity host internetowy

   Twoje konto hostingowe nie ma bezpośredniego związku z optymalizacjami, które zamierzasz wykonać, ale doszliśmy do wniosku, że wybranie odpowiedniego konta hostingowego jest tak ważne, że zdecydowaliśmy się najpierw zwrócić na nie uwagę. Konto hostingowe to podstawa Twojej witryny / bloga, w której ważne są bezpieczeństwo, dostępność (cPanel, FTP, SSH), stabilność serwera, ceny i obsługa klientów. Musisz się upewnić, że jesteś w dobrych rękach.

   Zalecana lektura: Jak wybrać hosta internetowego przez wikiHow to świetny artykuł, który zawiera kroki i wskazówki, które powinieneś wiedzieć przed zakupem dowolnego konta hostingowego.

2. Oddziel zasoby hosta

   Kiedy wspominamy o zasobach, mieliśmy na myśli komponenty internetowe takie jak obrazy i skrypty statyczne które nie wymagają przetwarzania po stronie serwera. Obejmują one dowolną grafikę internetową, obrazy, Javascript, Cascading Style Sheets (CSS) itp. Hosting zasobów oddzielnie nie jest koniecznością, ale widzieliśmy ogromny wynik pod względem stabilności serwera dzięki tej implementacji, gdy blog miał skok ruchu.

   Rekomendowane lektury: Maksymalizacja równoległych plików do pobrania na pasie ruchu.

3. Kompresja za pomocą GZip

   Krótko mówiąc, zawartość przechodzi od strony serwera do strony klienta (vicet versa) za każdym razem, gdy wysyłane jest żądanie HTTP. Kompresowanie treści do wysłania znacznie skraca czas potrzebny na przetworzenie każdego żądania.

   GZip jest jednym z najlepszych sposobów na zrobienie tego i jest różny w zależności od typu używanych serwerów. Na przykład, Apache 1.3 używa mod_zip, Apache 2.x używa mod_deflate i oto jak to zrobić Nginx. Oto kilka naprawdę dobrych artykułów, dzięki którym poznasz kompresje po stronie serwera:

   • Przyspiesz stronę internetową, włączając kompresję plików Apache
   • Kompresuj dane wyjściowe za pomocą mod_gzip i Apache
   • Jak zoptymalizować witrynę za pomocą kompresji GZIP
   • Kompresja po stronie serwera dla ASP

4. Minimalizuj przekierowania

   Webmasterzy przez cały czas przekierowują URL (czy to przekierowania przez Javascript czy META). Czasami celem jest wskazanie użytkownikom ze starej strony na nową lub jedynie poprowadzenie użytkowników do właściwej strony. Każde przekierowanie tworzy dodatkowe żądanie HTTP i RTT (round-trip-time). Im więcej przekierowań masz, tym wolniejszy użytkownik przejdzie do strony docelowej.

   Rekomendowane lektury: Unikaj przekierowań przez Google Code daje dobry przegląd w tej sprawie. W artykule zaleca się także kilka praktycznych sposobów zminimalizowania przekierowania w celu zwiększenia prędkości obsługi.

5. Zmniejsz wyszukiwanie DNS

   Według Wieśniak! Blog sieci programistów, potrzeba około 20–120 milisekund, aby DNS (Domain Name System) rozpoznał adres IP dla danej nazwy hosta lub nazwy domeny, a przeglądarka nie może nic zrobić, dopóki proces nie zostanie prawidłowo zakończony.

   Autor Steve Souders zasugerował, że podział tych komponentów na co najmniej dwie, ale nie więcej niż cztery nazwy hostów, zmniejsza liczbę zapytań DNS i umożliwia równoległe pobieranie o wysokim stopniu. Czytaj więcej na artykule.

Optymalizacja: zasoby (CSS, Javascript, obrazy)

1. Połącz wiele skryptów Javascript w jeden

   Ludzie w rakaz.nl udostępnia, w jaki sposób można łączyć wiele skryptów JavaScript, takich jak:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   Do jednego pliku, zmieniając adres URL na:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   manipulując .htaccess i używając PHP. Kliknij tutaj przeczytać więcej.

2. Kompresuj Javascript i CSS

   Minify to aplikacja PHP5, która może łączyć wiele plików CSS i Javascript, kompresować ich zawartość (tj. usuwanie niepotrzebnych białych znaków / komentarzy) i udostępniać wyniki za pomocą kodowania HTTP (gzip / deflate) i nagłówków, które umożliwiają optymalne buforowanie po stronie klienta.

   

   Kompresuj je online!Istnieją również niektóre usługi internetowe, które pozwalają ręcznie kompresować swoje Javascript i pliki CSS online. Oto kilka, które poznamy:

   • compressor.ebiene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • WyczyśćCSS (CSS)
   • Optymalizator CSS (CSS)

3. Dostosuj wygaśnięcie nagłówka / buforowanie

   Kredyt: httpwatch

   Używając dostosowanego nagłówka Wygaśnięcia, składników internetowych takich jak obrazy, pliki statyczne, CSS, JavaScript pominięto niepotrzebne żądanie HTTP, gdy ten sam użytkownik przeładuje stronę po raz drugi. Zmniejsza potrzebną przepustowość i zdecydowanie pomaga szybciej obsługiwać stronę.

   Zalecane odczyty:

   • Wieśniak! Blog sieci deweloperów - dodaj nagłówek wygasania
   • Jak dodać dobre wygasa nagłówki do obrazów w Apache 1.3
   • Buforowanie HTTP
   • Samouczek buforujący dla autorów internetowych i webmasterów

4. Odciążenie zasobów

   Przez odciążenie rozumiemy oddzielenie skryptów JavaScript, obrazów, CSS i plików statycznych od głównego serwera, na którym znajduje się strona, i umieszczenie ich na innym serwerze lub poleganie na innych usługach internetowych. Widzieliśmy tutaj znaczącą poprawę Hongkiat poprzez odłączenie zasobów do innych dostępnych serwisów internetowych, pozostawiając serwer głównie do przetwarzania PHP. Oto kilka sugestii usług online do rozładunku:

   • Obrazy: Flickr, Smugmug, Płatne hostingi *
   • Javascript: Biblioteka Google Ajax, Google App Engine, Płatne hostingi *
   • Formularz internetowys: WuFoo, FormStack
   • RSS: Google Feedburner
   • Ankieta i ankiety: SurveyMonkey, PollDaddy

   * Płatne hostowania - Płatne usługi zawsze mają lepszą niezawodność i stabilność. Jeśli Twoja witryna stale żąda zasobów, musisz upewnić się, że są w dobrych rękach. Polecamy Amazon S3 i Cloud Front.

5. Obsługa obrazów internetowych

   Obrazy są ważną częścią Twojej witryny. Jeśli jednak nie zostaną odpowiednio zoptymalizowane, mogą stać się obciążeniem i skończyć z wykorzystaniem nieprzewidywalnie dużej liczby pasm dziennie. Oto kilka najlepsze praktyki optymalizacji zdjęć:

   • Optymalizuj obrazy PNGLudzie w Smashing Magazine opisują kilka sprytnych technik, które mogą pomóc zoptymalizować obrazy PNG.
   • Optymalizacja dla Internetu - Rzeczy, o których musisz wiedzieć (formaty) Dowiedz się więcej o plikach JPEG, GIF, PNG i sposobie zapisywania obrazów w Internecie.
   • Nie skaluj obrazówZawsze ćwicz po włożeniu szerokość i wysokość dla każdego zdjęcia. Nie zmniejszaj też obrazu tylko dlatego, że potrzebujesz mniejszej wersji w Internecie. Na przykład: Nie zmuszaj do skalowania obrazu o wymiarach 200 × 200 pikseli do 50 × 50 px dla swojej witryny, zmieniając szerokość i wysokość. Zamiast tego uzyskaj 50 × 50 pikseli.

   Optymalizacja za pomocą usług internetowych i narzędzi. Dobra wiadomość jest taka, że ​​nie musisz być ekspertem w Photoshopie, aby zoptymalizować swoje zdjęcia. Istnieje wiele usług internetowych i narzędzi, które pomogą Ci wykonać zadanie.

   • Smush.itPrawdopodobnie jedno z najbardziej wydajnych narzędzi online do optymalizacji obrazów. Do tego jest nawet wtyczka WordPress!
   • Stripper JPEG i PNGNarzędzie Windows do usuwania / czyszczenia / usuwania niepotrzebnych metadanych (śmieci) z plików JPG / JPEG / JFIF i PNG.
   • Optymalizator obrazu onlinePozwala łatwo zoptymalizować swoje gify, animowane gify, jpg i pngs, dzięki czemu ładują się tak szybko, jak to możliwe w witrynie, przez Dynamic Drive
   • SuperGIFBez wysiłku zmniejszaj wszystkie swoje obrazy i animacje GIF.
   • Oto więcej.

6. Obsługa CSS

   Nowoczesne strony internetowe wykorzystują CSS jako podstawę stylu, a także wygląd i styl. Nie tylko CSS daje dużą elastyczność zmian, ale jest także mniejszy pod względem potrzebnych kodów. Jeśli jednak są źle zakodowane, może to być odwrotny skutek. Oto kilka list kontrolnych, a raczej poradników, które zapewniają, że Twój CSS jest odpowiednio zoptymalizowany:

   • Utrzymywanie dzieci elementów w linii z potomstwemJak utrzymać znaczniki w czystości przy użyciu selektorów CSS.
   • Zachowaj krótki CSSKiedy dają ten sam styl, kody są lepsze im są one krótsze. Tutaj jest Skrócony przewodnik CSS prawdopodobnie będziesz potrzebować.
   • Użyj Sprite CSSTechnika Sprite CSS redukuje żądanie HTTP za każdym razem, gdy strona jest ładowana, łącząc kilka (lub wszystkie) obrazy razem w jednym pliku obrazu i kontrolując jego wyjście za pomocą CSS pozycja tła atrybut. Oto kilka przydatnych przewodników i technik tworzenia spritów CSS:
     • Generator Sprite online CSS
     • Najlepszy generator spritów w trybie online i offline
   • Używanie każdej deklaracji tylko razSzukając optymalizacji plików CSS, jednym z najpotężniejszych środków, które można zastosować, jest użycie każdej deklaracji tylko raz.
   • Zmniejsz ilość plików CSSPowód jest prosty, im więcej plików CSS masz, tym więcej żądań HTTP będzie musiało wykonać, gdy strona internetowa jest żądana. Na przykład zamiast wielu plików CSS, takich jak:

     Możesz połączyć je w jeden CSS:

   Zalecane odczyty:

   • Przydatne narzędzia do sprawdzania, czyszczenia i optymalizacji pliku CSSNiektóre z przydatnych narzędzi, których możesz użyć do optymalizacji kodu CSS, nawet jeśli nie masz kompletnej wiedzy na temat kodowania CSS.
   • 7 zasad czystego i zoptymalizowanego kodu CSSOptymalizacja to nie tylko minimalizacja rozmiaru pliku - to także bycie zorganizowanym, nieskomplikowanym i wydajnym.
   • Najlepsze praktyki optymalizacji CSSUważaj ten artykuł bardziej za ćwiczenie akademickie niż porady dotyczące optymalizacji w prawdziwym życiu.

Optymalizacja dla WordPress

Od czasu do czasu monitorujemy, porównujemy i analizujemy wydajność naszego bloga WordPress. Jeśli witryna działa powoli, musimy wiedzieć dlaczego. Oto kilka podstawowych zmian, które zrobiliśmy i doszliśmy do wniosku, że znacznie zwiększą szybkość twojego bloga WordPress.

1. Cache Your Worpress Blog

   WP-Cache to niezwykle wydajny system buforowania stron WordPress, dzięki któremu Twoja witryna jest znacznie szybsza i szybsza. Polecamy również WP Super Cache który ulepsza poprzednią wspomnianą wtyczkę i wykonuje świetną robotę.

2. Dezaktywuj i usuń nieużywane wtyczki

   Gdy zauważysz, że Twój blog ładuje się naprawdę wolno, sprawdź, czy masz dużo zainstalowanych wtyczek. Mogą być winowajcą.

3. Usuń niepotrzebne tagi PHP

   Jeśli spojrzysz na kody źródłowe swojego motywu, znajdziesz wiele tagów takich jak te:

   Można je prawie zastąpić treścią tekstową, która nie powoduje obciążenia serwera. Sprawdzić Michael Martinjest 13 tagów do usunięcia z WordPress Blosol

Zalecane odczyty:

• 3 najłatwiejsze sposoby przyspieszenia WordPressaJohn Pozadzides dzieli się tym, jak jego blog płynnie przechodzi przez skok ruchu Digg.
• 13 Świetne wskazówki i porady dotyczące szybkości WordPress dla wydajności MAX Oto kilka rzeczy, które warto wypróbować, jeśli okaże się, że witryna WordPress nie działa tak dobrze, jak może być z powodu dużego ruchu lub ukrytych problemów, o których nie wiesz.
• 40 porad dotyczących optymalizacji WordPressWskazówki dotyczące optymalizacji na slajdach. 40 wskazówek w 40 minut.

Nie mniej ważny…

Oto kilka przydatnych usług internetowych i narzędzi, które dają szerszą perspektywę i lepszą analizę, aby pomóc w optymalizacji sieci.

• Wieśniak! YSlow

  YSlow analizuje strony internetowe i sugeruje sposoby poprawy ich wydajności w oparciu o zestaw reguł dla wysokowydajnych stron internetowych. To daje dobry pomysł, co należy zrobić, aby strona ładowała się szybciej.

  (Wymagany Firebug)

  

• PageSpeed

  Podobny do Wieśniak! YSlow, Google Szybkość strony to dodatek Firebug o otwartym kodzie źródłowym, służący do oceny wydajności witryny i ich ulepszania. (Wymagany Firebug)

  

• Narzędzia do pingowania

  Narzędzia do pingowania w pełni załaduj swoją witrynę, w tym wszystkie obiekty (obrazy, CSS, JavaScripts, RSS, Flash i ramki / iframes) i wyświetla ogólne statystyki dotyczące załadowanej strony, takie jak łączna liczba obiektów, całkowity czas ładowania i rozmiar, w tym wszystkie przedmioty.

  

Zalecane odczyty:Oto więcej wskazówek i narzędzi, które warto sprawdzić.

• Google Web Optimizer
• 15 Narzędzia ułatwiające tworzenie szybszych stron internetowych
• 15+ wskazówek, aby przyspieszyć swoją stronę i zoptymalizować kod!