Как да направите зареждането на изображенията по-бързо на вашия WordPress сайт

04.06.2020
WordPress 'Как да направите зареждането на изображенията по-бързо на вашия WordPress сайт
0 9 мин.

Така че искате изображенията ви да се зареждат по-бързо?


Е, няма да съм много добре. Нека се потопим в хубавите неща!

Има три начина да накарате изображенията да се зареждат по-бързо в WordPress:

  • Resize
  • Компресиране
  • Мързелив товар

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

Тази първа техника е изключително проста, но често пренебрегвана от начинаещите WordPress.

Как да оптимизирате изображения в WordPress

Преоразмерете вашите изображения

Абсолютният най-прост начин да накарате вашите изображения да се зареждат по-бързо е да ги промените. Нека обясня.

Какво е преоразмеряване?

Когато казвам „преоразмеряване“, искам да променя размерите на изображението и в този случай искате да намалите размерите на прекалено големи изображения.

Например, блогърите понякога правят снимки на своите телефони или цифров фотоапарат и ги качват в своите блогове. Нередактираните копия на снимките могат да бъдат с широчина до 5000px. Сега помислете за това …

Ширината на секцията за публикации на вашия сайт вероятно не е по-широка от 800px. Текстът, който четете в момента, обхваща само 700 пиксела в цялата страница, така че си представете да добавите изображение, което е с ширина 5000 пиксела тук. Би било много по-голям, отколкото трябва да бъде и въпреки че ще бъде намален мащабът, за да пасне на страницата, зареденият файл с изображения все още е масов и изключително разточителен. И това е защото …

Изображенията с по-големи размери имат и по-големи размери на файла.

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

Да се ​​върнем към моя пример и да приемем, че изображението е широко и високо 5000 пиксела. Ако го намалите от 5000px до само 700px, изображението всъщност ще използва 99% по-малко пиксели. С други думи, размерът на файла ще намалее с около 99%. Ако изображението беше 5mb, то щеше да достигне само 50kb и ще се зареди с 99% по-бързо на вашия сайт.

Преоразмеряване на изображенията

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

Има няколко начина да преоразмерите изображенията си, за да се поберат идеално на сайта.

Ръчно преоразмерете вашите изображения

Преди да качите ново изображение на вашия сайт, оразмерете го ръчно с помощта на вградените инструменти за редактиране на изображения на вашия компютър.

Ако имате изключително голямо изображение като в моя пример, това веднага ще има голяма промяна. След като изображението е преоразмерено, можете да го качите във вашата медийна библиотека.

Дори ако ще използвате изображението в лайтбокс или плъзгач, обикновено няма причина то да бъде по-широко от 2000 пиксела. Ако изображението ще бъде в област на съдържание или публикация на страница, вероятно можете да се справите добре с изображението с ширина 800px.

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

Използвайте по-малки размери

Когато качите изображение в медийната си библиотека, WordPress създава до 3 допълнителни версии: миниатюра, среден и голям.

Ако посетите страницата си за настройки на медиите, ще видите, че можете да изберете тези размери тук:

Настройки на WordPress Media

Въпреки че можете да променяте настройките, големият размер по подразбиране е 1024px, което е достатъчно голямо, за да се използва за публикации, без да е твърде разточително. Можете да използвате този размер за всички изображения, които включвате в публикациите си.

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

Преоразмеряване на изображението в WordPress

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

Това каза, че това може да бъде ужасно досадно, ако имате десетки публикации с десетки изображения. Наличен е още по-бърз и по-ефективен метод.

Автоматизирано оразмеряване с плъгин

Вместо сами да преоразмерявате изображенията, можете да оставите плъгин да го прави автоматично вместо вас. Когато става въпрос за автоматизирано преоразмеряване на изображението, нищо не бива Optimole плъгин.

Optimole Image Optimizer

Не работи така, както очаквате.

Вместо да редактира изображенията във вашата медийна библиотека, Optimole запазва собствените си копия на вашите изображения и ги обслужва от високоефективен CDN. По този начин вашите оригинали никога не се променят по никакъв начин.

Освен това не е нужно да давате на Optimole единичен размер, който да използвате за вашите изображения. По-скоро той получава размера на екрана на посетителя и генерира оптимална версия на всяко изображение в движение. Това означава, че някой на мобилно устройство може да зареди 400px версия на изображение, докато друг посетител на лаптоп получи 700px версия на същото изображение.

Този метод на оразмеряване е много по-лесен за изпълнение и по-ефективен за мобилни устройства, което е особено важно, тъй като мобилните посетители често са по-бавни връзки.

Ако искате да научите как да използвате Optimole, можете да следите пълния ми видеоклип:

Първо препоръчах да преоразмерите, защото независимо дали го правите ръчно или го автоматизирате с плъгин, това е просто и може да предложи огромни печалби.

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

Сгъстете вашите изображения

Компресирането е начин за намаляване на размера на файла на изображение без промяна на неговите размери.

Налични са два вида компресия на изображение.

Първият тип компресия на изображение се нарича „без загуба“ компресия.

Компресия без загуба

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

Тъй като тези данни обикновено са доста ограничени, оптимизацията без загуби може само да намали размера на изображението ви с 1–5%, но всъщност няма причина да не го използвате, тъй като няма влияние върху качеството на изображението.

Истинските печалби идват от оптимизацията на загубите.

Компресия на загуба

Както може да очаквате, компресирането на загуби оптимизира самото изображение и води до влошаване на качеството. Но ето нещо …

Алгоритмите за компресиране са толкова добри в наши дни, че често можете да намалите размера на файла на изображението с 50-70% без видима разлика. Освен ако не сте професионален фотограф и не се нуждаете от изображенията ви да са перфектно чисти на 4k монитори, дори няма да забележите загубата на качество.

Как да компресирате вашите изображения

Можете ръчно да компресирате изображенията си с инструмент като TinyPNG преди да ги качите или да използвате плъгин за автоматизиране на нещата.

ShortPixel е чудесен плъгин за оптимизиране на изображенията на вашия сайт. Може да ги оптимизира веднага, когато ги качите и групово да оптимизирате всички изображения, които вече са във вашата медийна библиотека.

shortpixel

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

Можете да намерите още няколко приставки за оптимизиране на изображения тук.

С размерите и размерите на вашите изображения сайтът ви ще се зарежда много по-бързо, но има една последна оптимизация за изображения, които можете да направите.

Изпълнете мързеливо зареждане

Мързеливо зареждане е наистина интелигентен начин за допълнителна оптимизация на вашите изображения.

Да речем, че имате публикация в блога с 12 изображения в нея. Когато някой посети вашия сайт, не всички тези изображения ще бъдат видими веднага на екрана му. Ще трябва да превъртат надолу, за да се покажат повечето от тях. Така че защо заредете всички 12 веднага?

При мързеливо зареждане се зареждат само изображенията, които се появяват на екрана. Вместо да се зареждат 12 изображения, може би се зареждат само 2-3. След това, когато посетителят превърта надолу страницата, останалите изображения се зареждат, когато влязат в екрана. Това означава, че първоначалното зареждане е много по-бързо и тъй като повечето посетители няма да превъртат цялата страница надолу, много изображения никога не се зареждат, което ви спестява ценни ресурси на сървъра.

Това видео има визуализация, което го обяснява по-добре, ако искате по-ясна картина как работи мързеливо зареждане:

Сега, когато сте продадени на концепцията, ето как можете да приложите мързеливо зареждане на сайта си.

Как да използвате мързеливо зареждане

Още веднъж тази техника за оптимизиране на производителността лесно се добавя към WordPress с плъгин.

Ако търсите безплатна опция, изпробвайте Optimole или a3 Мързеливо натоварване.

С Optimole, мързеливото зареждане се включва автоматично и плъгинът a3 се конфигурира лесно.

Освен това, ако нямате нищо против да платите, тогава проверете WP ракета. Има високоефективни кеширане и различни други инструменти за скорост.

За да включите мързеливо зареждане с WP Rocket, всичко, което трябва да направите, е да обърнете този превключвател:

WP Rocket Media

Не може да е по-лесно!

Насладете се на по-бързото си зареждане на изображения

За да обобщим това, което току-що научихте …

Големите изображения, качени на вашия сайт, са изключително бавни. Само едно от тези изображения може да доведе до спиране на вашия сайт.

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

На следващо място, алгоритмите за компресиране на изображението изминаха дълъг път и в наши дни можете да намалите размера на файла на изображение с 50-70%, без да влияете на качеството по забележим начин. Това не е мозък. Използвайте ShortPixel или Optimole, за да компресирате всяко изображение на вашия сайт.

И накрая, мързеливото зареждане е чудесен начин за селективно зареждане на изображения. Можете да използвате Optimole, a3 Lazy Load или WP Rocket за незабавно прилагане на мързеливо зареждане на вашия сайт.

Ако не сте използвали някоя от тези техники, вашият сайт ще се зарежда драстично по-бързо, след като бъде приложен. Ще те издуха.

Имате ли въпроси относно концепциите и техниките в тази публикация? Имате ли още един съвет за споделяне? Публикувай в секцията за коментари по-долу!

може също да ти хареса,

Как да коригираме бавен WordPress сайт и администраторски панел (постоянно)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector