С този запис започвам поредица от публикации за WPO за да видим как можем да подобрим резултата си Google PageSpeed ​​Insights в WordPress.

google

The WPO (Оптимизиране на уеб ефективността) са набор от техники или мерки на всяко ниво, за да подобряване на производителността и скоростта на зареждане на нашия уебсайт. Ето защо ще подобрим потребителското изживяване (UX) и SEO, тъй като скоростта на зареждане е ключов фактор, който търсещите машини вземат предвид.

Има много инструменти, които могат да измерват скоростта на вашия уебсайт. В тази поредица от 7 статии, за които ще говорим Google PageSpeed ​​Insights и как да се реши в WordPress някои от ключовите му точки.

За това ще използваме пример. Създадох основен html, който използвах като тест, съдържащ или зареждащ:

  • 2 шрифта от Google Fonts
  • Bootstrap, FontAwesome, персонализирана таблица със стилове
  • jQuery
  • Едно изображение върху тялото и едно на страничната лента
  • Много основен заглавие и тяло с 5 абзаца от lorem ipsum

Поставих се в най-лошия случай:

  • Зареждам CSS и JS, без да минимизирам
  • jquery-3.1.1.js и bootstrap.js са в главата
  • Съдържанието на изображението има размери 6016x3384px и тежи 25.3MB
  • Изображението на страничната лента има размери 2048x769px и тежи 1MB
  • В .htaccess няма нищо

При тази панорама резултатът в PageSpeed ​​е следният

От този сценарий започваме да виждаме как да подобрим резултата си в PageSpeed ​​Insights.

Оптимизирайте изображенията

От само себе си се разбира колко важен е този момент за подобряване на времето за зареждане. Просто е, колкото повече тежи изображението ни, толкова по-бавно ще се зарежда мрежата, вече няма мистерия.

Проблемът ще се влоши при по-неоптимизираните изображения, които имаме на нашия уебсайт. Това е съобщението, което тестът на Google връща:

Оптимизирайте изображенията
Правилното форматиране и компресиране на изображения може да спести голям брой байтове данни.
Оптимизирайте тези изображения, за да намалите размера им с 996,2 KB (99% намаление).
• Като компресирате или модифицирате размера на https://mydomain.com/img/vialactea2.jpg можете да спестите 996,2 KB (99% по-малко).

Google PageSpeed ​​Insights

25-мегабайтовото изображение е толкова тежко, че дори не го анализирате. Можем да оптимизираме изображението по два начина: размер и качество.

Оптимизирайте изображението по размер

Когато говорим за оптимизиране на изображение по размер, имаме предвид, че трябва да мислим за реалното пространство, което то ще заема на нашия уебсайт. Много е изкушаващо да изтеглите най-висококачественото изображение от нашата рефлекс камера и да го качите директно на нашата страница, но това ще убие нашата производителност.

В примера използваме изображение за съдържанието с ширина 6016 пиксела, когато контейнерът е само 848px. Същото се случва и с нас в страничната лента, изображението е 2048 пиксела, а ширината на страничната лента е 263px.

Използваме много по-големи изображения, отколкото наистина ни трябват. Ако преди да ги качим в мрежата, ги редактираме с редактор на изображения и ги мащабираме до размера на нашия дизайн, ще получим значително подобрение в размера:

  • Изображение 1 от 6016x3384px и 25.3MB до 848x477px и 432KB
  • Изображение 2 от 2048x769px и 1MB при 263x99px и 46KB

Оптимизирайте изображението качествено

След като стане ясно, че размерът има значение, следващото нещо е да оптимизираме изображението по отношение на качеството. Google PageSpeed ​​ни препоръчва:

  • PNG файловете почти винаги превъзхождат GIF файловете, въпреки че са само частично съвместими с някои по-стари версии на браузъра. Днес това вече не е проблем, освен ако нямате компютър с Windows 98 и Internet Explorer 6, което би било време за пенсиониране.
  • Използвайте GIF файлове за много малки или прости графики (например по-малки от 10 x 10 пиксела или с цветна палитра под 3 цвята) и за изображения, които съдържат анимации.
  • Използвайте JPG файлове за всички изображения в стил фото.
  • Не използвайте BMP или TIFF файлове.

Използване на инструменти като Photoshop ние можем да оптимизираме качеството на нашите изображения с опцията Запазете за мрежата. Тази опция оптимизира компресията и премахва метаданните и коментарите, че изображението може да се наложи да намали теглото си. За нашия пример изображенията ще бъдат:

  • Изображение 1 от 432KB да се 86.4KB
  • Изображение 2 от 46KB да се 8.67KB

Също така можем да използваме плъгини, които ни помагат в тази задача за компресиране, като WP Smush, EWWW Image Optimizer или Imagify. Можем да ги конфигурираме така, че автоматично при качване на изображение в мултимедийната библиотека да се оптимизира автоматично.

Толкова много WP Smush, Какво EWWW Image Optimizer и как Представете си Те имат безплатна версия, ограничена, но в много случаи това може да е достатъчно.

Те също имат платена версия, в случай че вашите нужди или обемът на качване на изображения е много голям (за повече информация се консултирайте с характеристиките на всяка версия на официалната страница на всеки плъгин).

Направих сравнение на 3-те приставки, използвайки безплатната им версия и взех за справка това изображение на мечката и ягодовото дърво, като взех предвид, че изходното изображение е JPG с максимално качество (направено с фотошоп), на няколко пропорции 1024x768px и с тегло 817KB.

Резултатът е както следва:

Размер на приставката
WP Smush154KB
EWWW Image Optimizer154KB
Представете си Нормално154KB
Представете си Агресивен133KB
Imagify Ultra104KB

Както се вижда, във всеки от случаите намалението е забележително. В безплатната версия на WP Smush Y. EWWW Image Optimizer използва се компресия без загуби, тоест компресия без загуби. Сякаш избирате опцията Normal в Представете си. Този плъгин също ви дава възможност да компресирате изображения, използвайки компресия със загуби, ако изберете опцията Агресивен, и нашия най-силен метод за компресия, използващ алгоритъм със загуби, ако изберете опцията Ultra.

Филтърът PageSpeed ​​обаче е много труден и дори в някои случаи можем да получим предупреждение, че има изображения, които могат да бъдат допълнително оптимизирани. Трик, който не знаят много хора: можете да преминете теста PageSpeed ​​и в края ще намерите връзка, където можете да изтеглите оптимизираното изображение, JavaScript и CSS ресурси на тази страница

Изображенията са може би елементите, които могат да окажат най-голямо влияние върху теглото и времето за зареждане на мрежата. Оптимизирането им е нещо фундаментално и за щастие е лесно да се постигне, като се вземе предвид видяното в тази публикация.

Намалихме основното изображение от 25.3MB на 86.4KB, тоест намалихме теглото му!294 пъти!

Намерихте ли тази информация за полезна?

Ако този пост е решил проблем за вас, купете ми кафе или бира. С този малък жест ме насърчавате да продължа да пиша.

Може да се интересувате и от вас

С тази публикация започвам поредица от статии за Git. Целта е да се създаде лесно и изчерпателно ръководство за изучаване на Git по прост начин ...

Вероятно по някакъв повод поради невнимание или забрава, или може би заради бързането, не сте установили виден образ в публикация. Какво ако…

В предишни публикации видяхме част от това, което можем да направим с WP-CLI. Една от най-големите му добродетели е възможността да създавате свои собствени команди за изпълнение ...

1. Инсталация и първи стъпки2. Инсталиране на WordPress и първи стъпки и конфигурации 3. Работа с публикации Работа с потребители 5. Работа с базата данни 6. Търсене ...