У нашых матэрыялах мы надаём вялікую ўвагу прадстаўленні інфармацыі, стараемся дапаўняць тэксты фатаграфіямі, графікамі, ілюстрацыямі і інфаграфіку. З аднаго боку, гэта паляпшае ўспрыманне нашых артыкулаў чытачамі, з другога - стварае нагрузку на сістэму захоўвання і хуткасць загрузкі матэрыялаў. Калі рашэнне першай праблемы чыста тэхнічнае і мы з ёй паспяхова спраўляемся, то пра пытанне аптымізацыі малюнкаў мы задумаліся параўнальна нядаўна.
Калі яшчэ некалькі гадоў таму асноўная наша аўдыторыя прыходзіла на сайт з персанальных кампутараў, то ў графіках за апошні квартал смартфоны ўшчыльную падбіраюцца дэсктопам.
А вось хуткасць мабільнага доступу ў сетку інтэрнэт усё яшчэ ў два разы ніжэй фіксаванага падключэння, і гэта пры ідэальных умовах. Часцяком, удалечыні ад буйных гарадоў заканчваецца не толькі 4G, але і замест 3G смартфон паказвае толькі значок «E» - гэта азначае максімальную для стандарту EDGE хуткасць не больш за 474 кбіт / с. На загрузку неоптимизированной карцінкі памерам 500 кбайт спатрэбіцца не менш за 10 секунд, а калі іх у артыкуле з дзясятак, то не кожны чытач дачакаецца адкрыцця запытанага матэрыялу.
Выснова - неабходны інструмент аптымізацыі, які дазваляе «налёту» сціскаць графіку, паскараць адлюстраванне артыкула чытачу і рабіць сайт больш «прыязным» для пошукавых сістэм.
Вырашыць нашу праблему прапанавалі стваральнікі сэрвісу OptiPic .
OptiPic - сэрвіс для аўтаматычнай аптымізацыі і сціску малюнкаў. Аўтары стартапа заяўляюць, што аптымізуюць выявы згодна з рэкамендацыямі Google PageSpeed Insights, дзякуючы чаму паскараецца доступ да сайта, павышаецца канверсія і паводніцкія фактары.
Сэрвіс PageSpeed Insights - гэта па сутнасці тэст, які дазваляе выявіць памылкі ў тэхнічнай аптымізацыі старонкі і які дае рэкамендацыі, як гэтыя памылкі ліквідаваць. Не гледзячы на назву, Google PageSpeed Insights не разлічвае хуткасць загрузкі старонкі, а толькі выяўляе фактары, якія могуць на хуткасць загрузкі паўплываць. Сярод іх: аптымізацыя кода вэб-старонкі (html, css, java script), час адказу сервера, налады кэшавання і аптымізацыя выяваў. Дапамагчы з апошнім аспектам як раз і абяцае сэрвіс OptiPic.
Аб'ём малюнкаў часцей за ўсё з'яўляецца галоўным фактарам у хуткасці загрузкі ўсёй старонкі, асабліва, калі не надаваць належнай увагі аптымізацыі памеру малюнкаў. Гэтак жа лічыць і Google PageSpeed Insights: яго ацэнка аптымізацыі ўсёй старонкі моцна залежыць ад ацэнкі аптымізацыі малюнкаў. Можна прымяніць ўсе астатнія прыёмы аптымізацыі, але атрымаць ацэнку 50 балаў з 100, толькі таму, што сэрвіс лічыць, што аптымізацыя малюнкаў на старонцы далёкая ад ідэалу. І, калі гаворка ідзе пра некалькі малюнках, то задача па аптымізацыі не выглядае такой складанай: памеры і аб'ём малюнкаў можна паменшыць з дапамогай онлайн і афлайн рэдактараў ўручную. Але калі нам трэба выкласці на сайт некалькі сотняў малюнкаў, або аптымізаваць карцінкі за ўсю гісторыю існавання сайта, задача перастае быць трывіяльнай. У рэшце рэшт, калі публікацыя малюнкаў адбываецца рэгулярна і з'яўляецца руцінай, то яе хацелася б аўтаматызаваць. І OptiPic прапануе гэта зрабіць у некалькі простых крокаў, а менавіта:
- рэгістрацыя,
- Ўстаноўка модуля на сайт,
- Налада і запуск аптымізацыі.
Праходзім простую працэдуру рэгістрацыі новага акаўнта, падлучальны да яго свой сайт і атрымліваем прапанова ўсталяваць модуль OptiPic. Модуль можна загрузіць аўтаматычна, паказаўшы налады доступу да свайго FTP / SFTP-серверу, а можна спампаваць і ўсталяваць уручную. Качаем модуль і ўсталёўваны яго на сайт, згодна з рэкамендацыямі.
Модуль ўяўляе сабой набор з трох php-файлаў: асноўны файл са скрыптам, файл канфігурацыі (доступу да сэрвісу OptiPic) і html-старонка з рэкламай сэрвісу. У асноўным файле ўтрымліваецца скрыпт, функцыянальнасць якога заключаецца ў індэксацыі файлаў малюнкаў на вашым сайце, адпраўцы малюнкаў у воблака OptiPic для аптымізацыі і захаванні аптымізаваных малюнкаў і іх арыгіналаў на вашым серверы. Так, варта адзначыць, што OptiPic - гэта не CDN, ўсе выявы пасля аптымізацыі застаюцца на вашым серверы. У воблака OptiPic малюнка загружаюцца толькі для аптымізацыі, а потым разам з арыгіналамі спампоўваюцца назад на ваш сайт.
Пасля загрузкі модуля на сайт неабходна вырабіць налады індэксацыі і аптымізацыі малюнкаў у асабістым кабінеце на сайце OptiPic. Налады досыць простыя і большасць опцый можна пакінуць у варыянтах па змаўчанні. Мы ўнеслі змены толькі ў опцыю «Індэксаваць толькі», паказаўшы шлях да тэчцы, у якую змясцілі выявы для тэставай аптымізацыі.
Пры рэгістрацыі OptiPic выдае бясплатную квоту 10 мегабайт як раз для таго, каб карыстальнікі мелі магчымасць пратэставаць сэрвіс. Нам жа выдзелілі квоту пабольш, і мы змаглі прагнаць праз OptiPic 1,22 ГБ малюнкаў.
Пасля завяршэння налад запускаем індэксацыю і праз некалькі хвілін атрымліваем вынік: у названай намі тэчцы скрыпт знайшоў 10038 малюнкаў агульным аб'ёмам 1,22 ГБ. Перад запускам аптымізацыі малюнкаў мы пратэставалі некаторыя нашы старонкі з дапамогай Google PageSpeed Insights і атрымалі наступныя вынікі:
старонка:
https://www.computerra.ru/
Мабільныя: 70/100
Дэсктопы: 38/100
аптымізацыя:
старонка:
https://www.computerra.ru/category/gadgets/
Мабільныя: 67/100
Дэсктопы: 46/100
аптымізацыя:
старонка:
https://www.computerra.ru/229153/zritelnaya-kora-i-prochie-mozgi-dlya-avtopilota/
Мабільныя: 76/100
Дэсктопы: 61/100
аптымізацыя:
На кожнай старонцы PageSpeed Insights патрабаваў аптымізаваць выявы і прадказваў, што існуючыя карцінкі можна ўціснуць да 10% ад іх пачатковага аб'ёму.
Запускаем аптымізацыю і ідзем займацца іншымі справамі. Па прагнозах гігабайт з лішнім малюнкаў будзе апрацоўвацца некалькі гадзін. Так і атрымалася: увесь працэс заняў без малога 9 гадзін і цалкам завяршыўся толькі позняй ноччу.
Дарэчы, працэсы індэксацыі і аптымізацыі малюнкаў не патрабуецца кожны раз ўключаць асобным дзеяннем. Можна аднойчы іх уключыць, і яны будуць праходзіць у фоне па меры з'яўлення новых малюнкаў у індэксе да таго часу, пакуль не скончыцца аплачаная квота трафіку.
Па заканчэнні працэсу ў нашай тэчцы з'явіліся аптымізаваныя выявы. Арыгіналы малюнкаў засталіся там жа, толькі памянялі пашырэнне на optipic-orig. Аптымізацыю малюнкаў можна адмяніць, замяніўшы новыя карцінкі на іх арыгіналы, для гэтага ў асабістым кабінеце прадугледжана функцыя «Вярнуць арыгіналы». Калі ж арыгіналы захоўваць не патрабуецца, іх можна выдаліць.
У асабістым кабінеце вынікі аптымізацыі прадстаўлены ў выглядзе статыстыкі ўвогуле і па кожным малюнку паасобку.
OptiPic заяўляе, што сціснутымі апынуліся ўсе 10038 малюнкаў з агульнай эфектыўнасцю сціску 51,60%. «Вага» папкі з малюнкамі на дыску гэтую інфармацыю пацвярджае.
Пяройдзем да тэставання старонак з дапамогай Google PageSpeed Insights.
старонка:
https://www.computerra.ru/
Мабільныя: 71/100
Дэсктопы: 81/100
старонка:
https://www.computerra.ru/category/gadgets/
Мабільныя: 82/100
Дэсктопы: 88/100
старонка:
https://www.computerra.ru/229153/zritelnaya-kora-i-prochie-mozgi-dlya-avtopilota/
Мабільныя: 76/100
Дэсктопы: 80/100
Па выніках тэсту большасць малюнкаў сэрвіс Google палічыў аптымізаванымі і толькі некалькі малюнкаў прапанаваў «дооптимизировать». Пад вынікамі тэсту ёсць спасылка, па якой можна спампаваць прыклады файлаў, якія Google PageSpeed Insights лічыць аптымальнымі. Мы запампавалі і паглядзелі прапанаваныя карцінкі, і ўсе яны былі нездавальняючай якасці. Такія карцінкі мы не сталі б выкарыстоўваць на сайце. Усё-ткі часам трэба выбіраць паміж якасцю малюнкаў і іх аб'ёмам. Падыход OptiPic у гэтым аспекце мы палічылі аптымальным.
Варта гэтак жа адзначыць, што ў наладах індэксацыі і сціску малюнкаў у асабістым кабінеце на сайце OptiPic ёсць опцыя «Якасць захоўваецца адлюстравання". З дапамогай гэтай няхітрай налады можна выбраць баланс якасць / сціск, які вы лічыце аптымальным.
Мы не сталі эксперыментаваць з гэтай наладай, пакінуўшы яе ў значэнні «па змаўчанні». Тым больш, што вынікі тэставання з ростам агульнай ацэнкі аптымізацыі да 100% нас цалкам задаволілі. На гэтым мы скончылі тэставанне сэрвісу Optipic і зрабілі высноў пра яго эфектыўнасці і сферы прымянення.
Дадзены сэрвіс можа быць карысны уладальнікам сайтаў, якія пастаянна працуюць з малюнкамі і не жадаюць марнаваць на гэтую працу вялікая колькасць рэсурсаў (напрыклад, праграмістаў для напісання скрыптоў аптымізацыі, або трымаць асобнага кантэнт-мэнэджэра). Гэта могуць быць фатографы, якія размяшчаюць у сеткі сваё партфоліо; онлайн-крамы з вялікай базай картак тавараў; блогеры, які публікуе фотарэпартажы і іншыя. З дапамогай OptiPic можна не толькі памяншаць аб'ём малюнкаў, але і іх памеры: усе налады прысутнічаюць у асабістым кабінеце і вельмі простыя. Дастаткова адзін раз усё наладзіць, а потым працэс індэксацыі і аптымізацыі малюнкаў будзе праходзіць перманентна ў фоне пакуль не скончыцца аплачаная квота трафіку. У такім выпадку ўзровень аўтаматызацыі сэрвісу дазволіць цалкам пазбавіцца ад задачы аптымізацыі графікі.
