Уверихте ли се, че вашият сайт е удобен за мобилни устройства?
Знаете ли, че Google въведе нова политика, наречена Mobile-First?
Все повече и повече уеб потребители се отдалечават от настолните компютри и вместо това сърфират и пазаруват, използвайки своите мобилни устройства.
Отзивчивият уеб дизайн направи възможно създаването на сайтове, които работят във всички платформи на равномерно ниво. Но дори и тогава отзивчивият дизайн е само част от стратегиите за UX оптимизация за мобилни устройства.
Ако искате истинска оптимизация на производителността, ще трябва да обмислите и други алтернативи.
Ето защо има толкова силен акцент върху изграждането на вашия сайт като a първо мобилно изживяване. Казано с прости думи, мобилното първо означава, че вашият дизайн и съдържание са оптимизирани първо за мобилни потребители.
Като се има предвид това, тази публикация не е за проектиране на изцяло нов сайт. Вместо това ще разгледаме някои фундаментални принципи на дизайна, ориентиран към мобилните устройства. И отделете известно време, като се съсредоточите върху техническите подробности за оптимизиране на потребителското изживяване за вашите мобилни потребители.
Съдържание
#1: Проектиране с мисъл за мобилни устройства
Мрежата е изградена до голяма степен на принципа на обслужване на настолни потребители. Истинската мрежа, истинският напредък в технологиите се показват най-добре на красив дисплей на цял екран. Но смартфоните и другите мобилни устройства са нещо и е време да започнем да се адаптираме към концепцията за дизайн, който е на първо място за мобилни устройства.
Какви други дизайнерски елементи трябва да внедрите в уеб дизайна си, който е ориентиран към мобилните устройства, освен здравия разум и отзивчив дизайн?
- Приоритизиране. Мобилните екрани са ограничени до наличното пространство на дисплея. Освен това мобилните екрани представят съдържание по вертикален начин, за разлика от много по-широката — хоризонтална — структура за настолни компютри. Това означава, че трябва да проектирате, като използвате приоритизиране. Кои елементи са от първостепенно значение за потребителите да видят? Ако има CTA бутони, колко лесно е да ги видите за мобилния потребител?
- Първо съдържание. Цвят втори. Можете да правите някои интересни неща с мобилен дизайн, но със сигурност не в обхвата на десктоп дизайна. Така че първо дайте път на съдържанието. Направете вашето копие и други части от съдържанието лесно четими и достъпни. Мобилният екран е много по-малко прощаващ към разсейващи визуални елементи.
- Лесна навигация. На мобилно устройство не можете просто да щракнете навсякъде и да се върнете на началната страница. Освен ако, разбира се, не планирате този тип навигация предварително. И вие трябва да. Експериментирайте с приспособления за превъртане до върха, но също и с безпроблемни лепкави заглавки, когато е възможно.
Най-добрият начин да проверите дали правите това правилно е да използвате телефона си (правя го през цялото време!) и да посетите вашия сайт. Направете задълбочен преглед на това как нещата се чувстват и протичат заедно.
Ако седите в кафене или чакате полет на летище, побутнете някого по рамото и учтиво го помолете да провери сайта ви вместо вас. След това седнете удобно и чуйте отзивите им. Повечето пъти ще се изненадате с начина, по който хората възприемат потребителското изживяване на вашия уебсайт.
#2: Оптимизиране на ресурсите; изображения, икони и др.
Колко често се оказва, че използвате визуални елементи в името на личните предпочитания, а не UX? Случва се и ако искате да сте креативни, си струва да разберете как работи медийната оптимизация.
Визуалните елементи като снимки, илюстрации, икони и видеоклипове са най-големите потребители на честотна лента на уеб страниците.
Средният размер на уеб страницата през 2018 г. Изброени по отрасли и различни държави.
Въпреки че няма определен размер на уеб страницата, който всеки трябва да спазва, разумно е, че по-малкият размер на уеб страницата се равнява на по-бързо време за зареждане.
И така, как можете да отрежете някои допълнителни KB или дори MB от вашето визуално съдържание?
- Преоразмерете вашите изображения. Звучи просто, нали? Е, не мога да преброя колко пъти съм преглеждал мобилен сайт, само за да се зареждат изображения с размери 1980 x 1200 във фонов режим. Вместо това трябва да се предоставят снимки в пълен размер като алтернативни връзки, когато е подходящо. Преоразмеряването може да намали до 80% от общия размер на изображението, в зависимост от необходимите ви размери. За мобилни устройства обаче никога няма причина да надхвърляте най-много диапазона от 600-700px.
- Намалете размера на файла с компресия. Компресирането/оптимизирането на изображението е процес на използване на софтуер на трета страна за намаляване на броя на цветовете, присъстващи в изображението. Това може да бъде направено до такава степен, че вашите снимки да не загубят вроденото си качество, но размерът на файла им може да бъде намален драстично. Ако имате нужда от помощ при компресиране на изображения, не търсете повече от нашия изчерпателен набор от инструменти за компресиране на изображения.
- Разгледайте алтернативни файлови формати. Всеки е чувал за файловите формати PNG и JPEG. В края на краищата те са де факто стандартите за изображения в мрежата. Но не за дълго. Най-новите и най-добрите технологии в доставката на цифрови изображения се въртят наоколо WebP и SVG файлови формати. SVG, например, могат автоматично мащабиране до размера на екрананамалявайки броя на ресурсите, необходими за зареждане на конкретни визуални компоненти.
Оптимизирането на потребителското изживяване за мобилни устройства е нещо, което трябва да се внимава. Импулсивното проектиране означава, че не обмисляте дългосрочните ефекти от вашите решения. Докато съзнателният подход ви помага да изграждате от самото начало с мисълта за мобилните потребители.
Проницателен: Придържайки се към концепцията за интуитивен мобилен дизайн, не е необходимо да използвате повторно едни и същи визуални компоненти на вашите мобилни дизайни. Елиминирането на няколко фонови изображения и замяната им с цветни фонове — на мобилни устройства — няма да навреди на потребителското изживяване. Винаги търсете начини да спестите дори и най-малкото количество честотна лента.
#3: Предварително зареждане и мързеливо зареждане
Необходимо ли е да се зареждат всички медийни ресурси на страници, които отнемат значително време за четене? И може ли да помогне за изобразяване на външни страници преди потребителите да ги посетят?
Нека първо да разгледаме програмите за предварително зареждане, известни също като съвети за браузъра.
Предварителните зареждащи устройства са начини една страница да каже на браузъра за потенциални възможности за навигация. Например потребител може да посети страница B от страница A.
С предварителното зареждане потребителят може да визуализира страница B, преди да щракне върху връзката за навигация на страница A.
Имайте предвид, че предварителното зареждане не винаги работи и зависи от браузъра да вземе окончателното решение. Фактори като тип устройство и честотна лента се претеглят индивидуално.
Кои са най-често срещаните видове програми за предварително зареждане?
- Предварително извличане. Този тип предполага, че конкретен URL е най-вероятно да бъде следващият избор за навигация. И ако браузърът изпълни искането, той автоматично ще кешира важни ресурси на страницата, което на свой ред прави следващата страница да се зарежда много по-бързо.
- Предварително изобразяване. Докато горният тип извлича само определени ресурси, предварителното изобразяване ще кешира цялата страница. Цялото изобразено съдържание се съхранява в паметта на устройството на потребителите.
- DNS-предварително извличане. Предварителното извличане на DNS ще разреши посочения DNS и нищо друго. В резултат на това, ако потребител направи конкретен „завой“ на вашия сайт, вие по същество спестявате времето, необходимо за навигация.
- Предварително свързване. Същото като по-горе, но също установява връзки и ръкостискания с TCP и TLS връзки.
Какви са някои примери за код за програми за предварително зареждане?
<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="prefetch" href="folder/script.js" as="script"> <link rel="prerender" href="customURL.com/preview.html">
Тъй като програмите за предварително зареждане използват динамични HTML тагове, можете предварително зареждане на съдържание като Google Fonts или създайте персонализиран скрипт за предварително зареждане на JavaScript активи в WordPress.
Между другото, ако използвате WordPress тогава WP Ракета може да ви помогне с това, за да презаредите сайта си.
След като вече знаете повече за програмите за предварително зареждане, нека поговорим за другата гореща тема: отложеното зареждане.
Какво е мързеливо зареждане?
Всеки път, когато посетите нова уеб страница, независимо дали е публикация в блог или статичен сайт, браузърът извлича цялото съдържание на страницата и след това я обслужва като собствено изживяване при сърфиране. В повечето случаи сте принудени да изтеглите цялата страница, без всъщност да виждате по-далеч от видимата на екрана част от страницата.
Докато при отложено зареждане на браузъра се казва да зареди (изобрази) съдържание, което е само в прозореца за изглед на потребителя. Така че, ако има чувствителни към размера снимки или видеоклипове, добавени към определена страница, тези файлове ще се показват само когато екранът на браузъра ви достигне тази част от сайта.
И ако се притеснявате за потенциални проблеми със SEO, не се притеснявайте. Yoast потвърди това Google изобразява страници, които използват отложено зарежданеи го вижда като просто още един сигнал за подобряване на производителността.
Моята препоръка за използване на библиотека е Layzr.js — просто и ефективно отложено зареждане за вашите изображения! Скриптът е активиран и на началната страница на проекта, така че можете да го видите в реално време. Потребителите на WordPress могат да намерят десетки плъгини с отложено зареждане в публичното хранилище на плъгини.
#4: Уеб кеширане
Уеб кеширането се основава на концепцията за копиране на версия на страница, която след това може да бъде представена на потребителя по всяко време. Страниците се кешират при първото посещение на страницата на даден уебсайт. Когато след това нов потребител се опита да получи достъп до тази страница, вместо да обслужва версията на живо, уеб сървърът ще покаже кешираната версия.
Целта на всеки вид кеширане е да подобри производителността на уебсайта и да намали необходимите бекенд ресурси. В зависимост от вашето решение за кеширане, можете да конфигурирате персонализирани интервали и други събития, базирани на задействания.
Някои от най-популярните имена в уеб кеширането са Varnish, Squid и Memcached. Но бъдете сигурни, че на пазара има много други решения, особено ако сте потребител на WordPress.
Можете също да обмислите да се регистрирате за CDN.
Какво е CDN (мрежа за доставка на съдържание)?
Мрежата за доставка на съдържание използва глобален клъстер от разпределени сървъри, за да осигури невероятно бърза доставка на съдържание. А CDN може бързо да прехвърля всички популярни типове съдържание в мрежата: видео, снимки, JavaScript и т.н. В наши дни по-голямата част от трафика в мрежата преминава през някаква форма на CDN.
Единственото нещо, което трябва да запомните за мрежите за доставка на съдържание е, че те работят най-добре, когато се използват на уебсайт с голямо търсене. Така че, ако обслужвате само няколко хиляди посетители на месец, виждането на забележими подобрения може да се окаже трудно. Независимо от това, CDN е страхотно решение за подобряване на времето за зареждане на вашия уебсайт, намаляване на цената на честотната лента, увеличаване на наличността на съдържание и укрепване на цялостната сигурност.
Ако нямате предишен опит с CDN, препоръчваме да опитате Cloudflare — те предоставят безплатен план завинаги и това е страхотна платформа, с която да започнете да учите. И ако Cloudflare не оправдае очакванията ви, вижте нашата публикация за най-добрите безплатни CDN доставчици на пазара.
#5: AMP (Ускорени мобилни страници)
на Google AMP проект е мобилна оптимизация на стероиди! По същество AMP съкращава вашите страници до най-важното, за да осигури супер бързо изживяване при зареждане, но също така да направи четивността на съдържанието приоритет. Като се има предвид колко важна е скоростта на страницата, можете ли да съберете смелост да кажете „не“ на времето за почти мигновено зареждане?
Добре, всички тези модни думи звучат страхотно, но как работи AMP?
AMP е обикновена HTML страница с определени ограничения за това какъв вид съдържание може да се показва. Това води до много по-бързо време за зареждане и цялостна производителност поради ограничението за изпълнение на скриптове и други подобни.
JavaScript, например, не работи с AMP. Освен ако, разбира се, не използвате AMP JS библиотека, достъпна в GitHub. Използването на JS библиотеката ви позволява да постигнете определени резултати, като избягване на рекламни блокери, но ако искате истинска производителност, тогава необработеният AMP е правилният начин.
Интересни казуси за AMP:
#6: Тествайте преди да се ангажирате
В днешно време няма извинение да нямате отделна сцена за вашия проект. Повечето облачни хостинг платформи предлагат промежутъчни среди по подразбиране, така че се консултирайте с вашия доставчик, за да видите дали имате достъп до такава.
Какво е сценична среда?
Е, най-бързият начин да обясните това е като разгледате текущия си уебсайт на живо.
Този сайт е това, което вие наричате производствен сайт — версия в реално време на целия код, скриптове и съдържание, на които се основава вашият сайт. Сценична среда в този контекст е копие на вашия производствен сайт. Фиктивен сайт, ако щете. И в тази етапна среда вие сте в състояние да правите промени или да добавяте нови функции, без да прекъсвате вашия активен сайт.
Винаги се връщам към публикацията на Ашли Харп, Не губете време – тествайте промените, преди да се ангажирате.
Нейният поглед върху това как се „измамваме“, за да избегнем определени неща, е отличен пример за това как не искаме да поемаме отговорност, когато направим грешка. Независимо от това, публикацията на Ашли също включва връзки към полезни инструменти за настройка на локална среда за сценично представяне.
Тестването не е толкова страшно, колкото звучи. Но със сигурност е страшно, когато случайно изтриете цялата си база данни на производствен сървър!
Заключително изявление
Оптимизирането на уебсайта ви за гладко мобилно изживяване не е чак толкова трудно. Всичко, от което се нуждаете, е малко решителност и доброволно прилагане на описаните методи в тази публикация. Вероятно вече сте запознати с неща като кеширане на съдържание и отложено зареждане, но какво ще кажете за сценичните среди или програмите за предварително зареждане?
Надяваме се, че тази публикация хвърли малко светлина върху текущото състояние на оптимизацията на мобилни уебсайтове.