Reklama
Mój H.yperT.ext M.arkup L.Umiejętności anguage (HTML) są z pewnością zardzewiałe, ale może to kwalifikuje mnie do tego artykułu. Powrót w dzień, kiedy Przyjaciele wciąż był w telewizji, a AOL codziennie wysyłał bezpłatne podstawki i mini-frisbee, tworzyłem strony internetowe, aby załadować na modemach telefonicznych. Z biegiem czasu miałem odwagę pomyśleć, że wciąż jest wielu ludzi z połączeniami nie szerokopasmowymi (dial-up) i nadal projektuję strony internetowe w oparciu o to.
W końcu się poddałem projektowanie i rozwój stron internetowych Chcesz nauczyć się projektowania stron internetowych? 7 kanałów YouTube na dobry początekYouTube ma tysiące filmów i kanałów dla początkujących projektantów stron internetowych. Oto niektóre z najlepszych na początek. Czytaj więcej kiedy jakość treści zaczęła przesuwać się na bok według ilości treści. Witryny Flash, wiele obrazów, wyskakujące okienka, pop-undery, suwaki itp. Zaufaj swojej jakości treści i nie potrzebujesz tego puchu. Zaufaj swoim treściom, a Twoja witryna będzie niesamowicie szybka.
Dzięki stronie internetowej udostępnianej w ramach bezpłatnej usługi, szybciej jest Zdecydowanie lepszy. Dlaczego? Ponieważ „bezpłatny” ma tendencję do przyciągania wielu ludzi, a serwer musi wydzielić twoją stronę oraz tysiące stron innych osób, które nie są zoptymalizowane. To jest jak próba przekazania konwoju kłód ciągnących Kenwortha za pomocą świń twojego Jimmy'ego Haulina. Ale jeśli masz małe Porsche, jest to o wiele łatwiejsze do zrobienia.
Oto kilka wskazówek, jak przycinać tłuszcz w określonej kolejności.
1. Używaj tabel oszczędnie
Tabele to catch-22. Na początku wykorzystywano je do projektowania, a także umieszczania treści w formacie tabeli. Ponieważ układy projektowe stały się bardziej złożone, tabele stały się większe i zagnieżdżone głębiej, a to zawsze oznacza spowolnienie czasu ładowania.
dowstępujący S.tyle S.pojawiły się arkusze kalkulacyjne (CSS), które naprawdę pomogły w problemie użycia tabel do rozmieszczenia. Niestety, twórcy przeglądarek nie mogli zawładnąć głowami wokół idei standardów - i nadal nie mogą. To, co wyglądało świetnie w CSS w Firefoksie, wyglądało jak psie śniadanie w IE i prawdopodobnie nawet nie renderowało się w Safari. Nie zaczynaj mnie IE5 na komputerze Mac. Nadal jestem na terapii.
Używaj tylko tabel do układania treści, które muszą znajdować się w format tabelaryczny Tableizer: Generuj tabelę HTML z arkusza kalkulacyjnego Excel Czytaj więcej - jak cennik lub statystyki hokeja. Zmniejsza to liczbę tabel i głębokość zagnieżdżania, co oznacza szybsze czasy ładowania. Nauka CSS Top 5 witryn do nauki CSS Online Czytaj więcej zrobi dużą różnicę, jeśli musisz mieć fantazyjny układ.
2. Użyj HTML, aby utworzyć kolor
Tak, jestem Kanadyjczykiem, więc dla mnie jest w kolorze „u”. Wiem, że HTML jest zorientowany na Amerykę, więc atrybutem jest „kolor”. Naucz się swojego szesnastkowe kody kolorów i używaj ich do ożywiania treści zamiast obrazów.
Spróbuj dodać atrybut koloru do elementów HTML, aby go urozmaicić. Działa to szczególnie dobrze w tabelach lub znaczniku body, takich jak:
Gdybyś był przeglądarką, szybciej załadowałbyś proste 7 znaków #FF00FF czy obraz 10 x 10 pikseli kolorowej fuschii kilka tysięcy razy? To retoryczne pytanie, ty w drugim rzędzie. Opuść rękę.
3. Link do skryptów / arkuszy stylów
Jeśli użyjesz określonego jotavaS.cript (JS) lub CSS wielokrotnie w całej witrynie, pomyśl o utworzeniu własnego pliku i wywołaniu go, zamiast umieszczania go na każdej stronie. Ponieważ przeglądarka ma tendencję do buforowania pliku i wywoływania go w pierwszej kolejności przed sprawdzeniem na serwerze, Twoja przeglądarka ma już gotowy skrypt lub CSS do użycia. To znaczy mniej H.yperT.ext T.ransfer P.wywołania rotocol (HTTP), co oznacza szybsze ładowanie strony.
Jak wywołać zewnętrzny JavaScript:
–>
Dlaczego umieściłem te tagi komentarzy wokół wywołania JavaScript? Ponieważ nie każda przeglądarka jest skonfigurowana do odczytu skryptów. Dodanie tagów komentarzy powoduje, że przeglądarki z wyłączonym skryptem po prostu pomijają go, zamiast dawać denerwujące komunikaty o błędach.
Jak wywołać zewnętrzny arkusz stylów kaskadowych:
To takie proste. Atrybut href to miejsce, w którym ustalasz lokalizację swojego arkusza stylów. Reszta atrybutów mówi przeglądarce, co to jest plik, więc wie, co z nim zrobić.
Niektórzy programiści mogą korzystać z @import metoda wywołania arkusza stylów. W Internet Explorerze to tak, jakbyś miał swój znacznik na dole pliku, powodując załadowanie całej strony, a następnie renderowanie stylów na nim. Niedobrze.
4. Połącz najczęściej używane skrypty w jednym pliku
Wielu programistów internetowych będzie używać tych samych skryptów w kółko. Być może istnieje skrypt zegara i skrypt kalendarza, a może jakiś skrypt efektów specjalnych, którego będą używać na każdej stronie. Zamiast 3 osobnych plików z 3 oddzielnymi wywołaniami HTTP, umieść skrypty w jednym pliku i wywołaj go raz. To zmniejsza liczbę połączeń HTTP o 66% i jest również buforowane. Ty przyśpiesz demona! Przed podniesieniem ręki tak, możesz zrobić to samo z plikami CSS.
5. Nie używaj HTML do zmiany rozmiaru swoich zdjęć
Jeśli chcesz użyć na stronie obrazu o wymiarach 1000 × 1000 pikseli, ale chcesz mieć tylko 250 × 250 pikseli, zmień go w edytorze obrazów. Niektóre osoby „zmniejszają” obraz za pomocą HTML w taki sposób:
Jeśli obraz o rozmiarze 1000 × 1000 pikseli ma rozmiar 2 MB, zmiana jego rozmiaru za pomocą HTML nie zmniejsza rozmiaru pliku! W rzeczywistości ładowanie może potrwać dłużej, ponieważ teraz, aby tak rzec, przeglądarka musi umieścić 10 funtów kupy w 2 funtowej torbie. Niełatwe zadanie.
Mam nadzieję, że te wskazówki pomogą ci. Przekaż mi komentarz w komentarzach, jeśli ich używasz lub masz inne pomysły optymalizacji HTML do udostępnienia.
Mając ponad 20 lat doświadczenia w branży IT, szkoleniach i branżach technicznych, pragnę dzielić się tym, czego się nauczyłem, z kimkolwiek innym, kto chce się uczyć. Staram się wykonywać najlepszą możliwą pracę w najlepszy możliwy sposób i z odrobiną humoru.
