Nie jest tajemnicą: dzisiejsi internauci potrzebują szybkości. Ponieważ połączenia internetowe i komórkowe stają się coraz szybsze, użytkownicy oczekują, że witryny będą się szybko ładować, a zadaniem programisty jest zrobienie wszystkiego, co w jego mocy, aby szybko wyświetlać te strony. Jak więc sprawić, by Twoja witryna działała szybko? Oto, co powinieneś zrobić konkretnie podczas tworzenia za pomocą WordPressa.

Po pierwsze: sprawdź szybkość swojej witryny

Wydajność można podzielić na dwie główne kategorie: front-end i back-end. Uważam, że back-end to wszystko, co dotyczy serwera i sposobu, w jaki dane są wypełniane na stronie (twój kod PHP w twoim motywie to „back-end”). Front-end składa się ze wszystkich zasobów (CSS, JavaScript, obrazów itp.) i znaczników. Wszystko, co czyta i interpretuje przeglądarka internetowa, to „front-end”. Powodem, dla którego robię to rozróżnienie pod względem wydajności, jest to, że dobrze jest wiedzieć, co optymalizujesz i, co ważniejsze, gdzie optymalizować należy najbardziej.

Aby przetestować szybkość swojej witryny, polecam połączenie WebPagetest i Google PageSpeed ​​Insights. WebPagetest daje nam dobre wyobrażenie o rzeczywistym czasie (w sekundach), jaki zajmuje ładowanie się witryny, dając pewne dobre dane, aby wiedzieć, czy to back-end czy front-end powoduje powolne ładowanie witryny. PageSpeed ​​Insights najlepiej sprawdza się, jak Twoja witryna jest renderowana przez przeglądarkę i co możesz poprawić w interfejsie.

Pamiętaj, że ten artykuł koncentruje się na całkowicie dostosowanych witrynach WordPress. Jeśli przeprowadzasz testy szybkości w witrynie przy użyciu obszernego motywu i 19 wtyczek innych firm (wtyczki mogą spowolnić zarówno front, jak i back-end), zacznij od pustej karty i powoli aktywuj wtyczki jedna po drugiej, aby je znaleźć które spowalniają sprawy.

Wydajność front-endu

Jak teraz poprawić dostępność motywu WordPress

Nie ma dnia, żebym nie korzystał z sieci, nawet gdy jestem na wakacjach. Zamierzam zgadywać, że możesz się odnieść. Coraz częściej internet odgrywa ...

Złota zasada wydajności, według szefa Fastly, Steve'a Soudersa, polega na tym, że 80-90% całkowitego czasu ładowania strony składa się z frontonu (zasada 80/20). 10-20% back-endu ma kluczowe znaczenie, ale nawet jeśli korzystasz z najszybszego hosta, jaki można kupić za pieniądze, Twoja witryna nadal nie będzie w pełni wykorzystywać swojego potencjału bez optymalizacji front-endu, aby upewnić się, że użytkownicy to dostrzegą ładuje się szybko. Percepcja jest ważna, jeśli chodzi o optymalizację front-endu. Użytkownik nie będzie dbał o to, ile sekund trwa ładowanie witryny. Jedyne, na czym im naprawdę zależy, to to, jak szybko mogą z nim wejść w interakcję i zobaczyć zawartość lub wykonać działania bez opóźnień. Nie znaczy to, że nie powinieneś się martwić o rzeczywisty czas ładowania (powinieneś), ale postępując zgodnie z poniższymi technikami, możesz upewnić się, że Twoja witryna jest w stanie użytkowym tak szybko, jak to możliwe, a następnie szybko wczytuje całą stronę wszystkie aktywa.

CSS

Najważniejszą rzeczą do zrobienia z CSS przed dostarczeniem go do przeglądarki jest po prostu skompresowanie go i usunięcie nieużywanych selektorów. Zmniejszenie dobrego przepływu pracy podczas opracowywania motywów sprawia, że ​​proces ten jest trywialny, zwłaszcza jeśli używasz preprocesora, takiego jak Sass. Używam Grunta, który jest uruchamiaczem zadań JavaScript, który wykonuje dla Ciebie polecenia podczas programowania. Istnieje wtyczka do Grunta o nazwie grunt-contrib-sass, która po prostu kompiluje wszystkie pliki Sassa w jeden (jeśli używasz częściowych Sass), minimalizuje je i kompresuje. Dodaj do tego wtyczkę grunt-contrib-watch, a uruchomi ona zadanie Sass za każdym razem, gdy zapiszesz plik. Łatwo! Nie trać snu, jeśli nie korzystasz z najnowszej i najlepszej metodologii CSS, ale staraj się przestrzegać jakiegoś standardu podczas tworzenia CSS, aby uniknąć duplikacji i ogromnych rozmiarów plików.

Gdy arkusz stylów jest gotowy, najłatwiejszym (i zdecydowanie standardowym) sposobem jego załadowania jest po prostu odwołanie się do niego w <head> ;. W ten sposób przeglądarka ładuje i analizuje go przed załadowaniem reszty DOM. Istnieje jednak nowa technika, w której style „krytyczne” są wbudowane w <head> , a następnie pełny arkusz stylów jest ładowany asynchronicznie za pomocą JavaScript. Naprawdę używam tej techniki tylko wtedy, gdy absolutnie próbuję załadować witrynę (lub postrzegać ją do załadowania) w ciągu sekundy, ale wspaniale jest spojrzeć i sprawdzić, czy pasuje do twojego przepływu pracy. Filament Group ma obszerny artykuł na temat stosowania tej techniki.

JavaScript

Zrozumienie, w jaki sposób WordPress korzysta z MySQL

Ogólnie rzecz biorąc, WordPress można podzielić na dwa segmenty: logikę i szablony, które generują wygląd witryny WordPress, bazę danych MySQL, która przechowuje całą zawartość i uprawnienia, które...

Złota zasada optymalizacji JavaScript jest prosta: udostępniaj jak najmniej plików JavaScript, minimalizuj i łącz. Wtyczki WordPress innych firm mogą być szkodliwe, ponieważ nadużywają dokumentu za pomocą niezminimalizowanych blokujących plików JavaScript, dlatego ważne jest, aby być ostrożnym przy wyborze wtyczek. Idealnie byłoby połączyć WSZYSTKIE pliki JavaScript w jeden, a następnie zminimalizować z niego do cholery. W sytuacjach, gdy nie jest możliwe połączenie wszystkich plików w jeden, istnieją atrybuty HTML zwane „async” i „defer”, których można użyć do asynchronicznego ładowania plików JavaScript lub po załadowaniu reszty strony.

Obecnie najczęściej odwoływanie się do JavaScriptu znajduje się na dole dokumentu, tuż przed tagiem zamykającym. Istnieją jednak bardziej zaawansowane techniki ładowania JavaScript. Ponownie, Filament Group przeprowadziło mnóstwo badań na ten temat i ma kilka projektów open source, z których możesz skorzystać, jeśli chcesz uzyskać superszybki czas ładowania strony (nawiasem mówiąc, nie jestem w żaden sposób powiązany z Filament Group; Po prostu uważam, że ich rzeczy są niesamowite). Wydaje się, że najlepszym podejściem jest dynamiczne ładowanie skryptów poprzez wstawienie małej funkcji w <head> ; który następnie dołącza tagi skryptu bez blokowania reszty strony. Aby uzyskać więcej informacji, zapoznaj się ze skryptem loadJS.

Obrazy

Obrazy są często największymi plikami na stronie, odpowiedzialnymi za największe opóźnienie w czasie ładowania strony. Zaletą obrazów jest jednak to, że w przeciwieństwie do CSS i JavaScript, większość przeglądarek ładuje je asynchronicznie. To przynajmniej pomaga w postrzeganiu wydajności strony, ale nadal chcesz mieć pewność, że A) wyświetlasz jak najmniej obrazów, a B) te obrazy są maksymalnie skompresowane.

Narzędzia do kompresji są niezbędne, aby wycisnąć z obrazów jak najwięcej nadmiaru. ImageOptim to świetna aplikacja dla komputerów Mac, która robi to dobrze, wraz z OptiPNG i jpegtran do użytku z programami do uruchamiania zadań, takimi jak Grunt.

Czcionki

Czcionki internetowe są obecnie bardzo popularne. Korzystam z Google Web Fonts w prawie każdym projekcie, ale do niedawna nie zdawałem sobie sprawy z tego, jaki spadek wydajności osiągnąłem, po prostu odwołując się do nich w <head> . Uderz w wydajność jest niewielki, ale jest to artykuł o tworzeniu szybkich witryn, więc wszystko się liczy! Aby uzyskać najlepszą wydajność przy użyciu czcionek internetowych, zalecam korzystanie z modułu ładującego czcionki internetowe, opracowanego wspólnie przez Google i Typekit. Jest to skrypt typu open source, który zarówno zarządza ładowaniem czcionek od stron trzecich, takich jak Google Web Fonts, jak i umożliwia ich ładowanie asynchroniczne (jesteś już zmęczony tym słowem?).

Zgodnie z oczekiwaniami, potrzebna jest pewna konfiguracja, aby zintegrować Web Font Loader z Twoim projektem, więc sprawdź projekt na GitHub, aby uzyskać szczegółowe informacje na temat jego konfiguracji.