Как да оптимизираме уебсайта си за мобилни потребители?

Уверете ли се, че вашият сайт е удобен за мобилни устройства?


Знаете ли, че Google въведе нова политика, наречена Mobile-First? Все повече и повече потребителите в мрежата се отдалечават от настолните компютри, и вместо това, разглеждайте и пазарувайте, като използвате мобилните си устройства.

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

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

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

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

# 1: Проектиране с мобилен ум

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

Различни от здравия разум, дизайн, какви други дизайнерски елементи трябва да внедрите във вашия мобилен дизайн?

  • приоритизиране. Мобилните екрани са ограничени до наличното пространство за показване. Също така, мобилните екрани представят съдържание по вертикален начин, противоположно на много по-широка – хоризонтална – структура за настолни компютри. Това означава, че трябва да проектирате, като използвате приоритизиране. Кои елементи са от изключително значение за потребителите? Ако има CTA бутони, колко лесно е да ги видите за мобилния потребител?
  • Съдържание първо. Цвят втори. Можете да направите няколко интересни неща с мобилен дизайн, но със сигурност не в обхвата на дизайна на десктопа. Така че първо дайте място на съдържанието. Направете своите копия и други части от съдържанието лесно четими и достъпни. Мобилният екран е много по-малко прощаващ на разсейващи визуални елементи.
  • Лесна навигация. На мобилно устройство не можете просто да кликнете навсякъде и да се върнете обратно към началната страница. Освен ако, разбира се, не планирате този вид навигация преди време. И вие трябва да. Експериментирайте с джаджи „Scroll-to-top“, но и с безпроблемни лепкави заглавки, когато е възможно.

Най-добрият начин да проверите дали правите това право е да използвате собствения си телефон (аз го правя непрекъснато!) И да посетите вашия сайт. Направете задълбочен преглед на това как се чувстват и протичат нещата заедно.

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

# 2: Оптимизация на ресурсите; изображения, икони и т.н..

Колко често се оказвате, че използвате визуализации в името на личните предпочитания, а не UX? Това се случва и ако ще станете творчески, ще ви се струва да разберете как работи оптимизацията на медиите.

Визуални елементи като снимки, илюстрации, икони и видеоклипове са най-големите потребители на честотна лента на уеб страниците.

Средно време за зареждане на страницата за 2018 г. Как сравнява вашият Блог за скорост на MachMetricsСредният размер на уеб страниците през 2018 г. Списък на индустрии и различни страни.

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

И така, как можете да отрежете някои допълнителни KB или дори MB от вашето визуално съдържание?

  • Преоразмерете вашите изображения. Звучи просто, нали? Е, не мога да разчитам колко пъти съм преглеждал мобилен сайт, само за да се заредят изображения във формат 1980 x 1200. Вместо това снимките в пълен размер трябва да се предоставят като алтернативни връзки, когато е подходящо. Оразмеряването може да избръсне до 80% от общия размер на изображението, в зависимост от необходимите ви размери. За мобилните устройства обаче никога няма причина да надхвърляте диапазона от 600-700px най-много.
  • Намаляване на размера на файла с компресия. Компресирането / оптимизирането на изображението е процесът на използване на софтуер на трети страни за намаляване на броя на цветовете, присъстващи на изображението. Това може да се направи до степен, че снимките ви не загубят вроденото си качество, но могат да намалят драстично размера на файловете си. Ако се нуждаете от помощ за компресиране на изображения, не потърсете по-далеч от обширната ни обзор на инструменти за компресиране на изображения.
  • Разгледайте алтернативни файлови формати. Всички са чували за PNG и JPEG файлови формати. В крайна сметка те са фактическите стандарти за изображение в мрежата. Но, не за дълго. Най-новата и най-добра технология в доставката на цифрови изображения се върти наоколо WebP и SVG файлови формати. SVG, например, може автоматично мащаб до размер на екрана, намаляване на броя на ресурсите, необходими за зареждане на конкретни визуални компоненти.

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

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

# 3: Предварително зареждане и мързеливо зареждане

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

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

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

С предварително зареждане, потребителят може да направи страница B преди да щракне върху навигационната връзка на страница A.

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

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

Кои са най-често срещаните типове презареждане?

  • Prefetch. Този тип предполага, че най-вероятно конкретен URL адрес е следващият избор за навигация. И ако браузърът предостави заявката, той автоматично ще кешира важни ресурси на страницата, което от своя страна прави зареждането на следващата страница много по-бързо.
  • Предварително изобразяване. Докато горният тип извлича само определени ресурси, prerender ще кешира цялата страница. Цялото предоставено съдържание се съхранява в паметта на устройството на потребителите.
  • DNS-предв. Предварителното извличане на DNS ще разреши зададения DNS и нищо друго. В резултат на това, ако потребителят направи конкретен „завой“ на вашия сайт, вие по същество се обръсвате от времето, необходимо за навигация.
  • предварително свързване. Същото като по-горе, но също така установява връзки и ръкостискане с TCP и TLS връзки.

Какви са някои примери за код за предварително зареждащи устройства?

Тъй като предварително зареждащите устройства използват динамични HTML маркери, вие сте в състояние да предварително зареждане на съдържание като Google Fonts или създайте персонализиран скрипт за предварително зареждане на JavaScript активи в WordPress.

BTW, ако използвате WordPress тогава WP ракета може да ви помогне с това за презареждане на вашия сайт.

Сега, когато знаете повече за предварително зареждащите устройства, нека поговорим за другата гореща тема: мързеливо зареждане.

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

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

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

И ако се притеснявате от потенциални проблеми с SEO, не бъдете. Йоаст потвърди това Google прави страници, които използват мързеливо зареждане, и го вижда като просто още един сигнал за подобряване на производителността.

Layzr js

Моята препоръка за библиотека да се използва е Layzr.js – просто и ефективно мързеливо зареждане на вашите изображения! Скриптът се активира и на началната страница на проекта, така че да можете да го видите в реално време. Потребителите на WordPress могат да намерят десетки мързеливи плъгини в репо за публичните плъгини.

# 4: Уеб кеширане

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

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

уеб кеширане

Някои от най-популярните имена в уеб кеширането са Varnish, Squid и Memcached. Но бъдете сигурни, че на пазара има много други решения, особено ако сте потребител на WordPress.

Можете също да обмислите да се регистрирате за CDN.

Какво е CDN (мрежа за доставка на съдържание)?

Мрежата за доставка на съдържание използва глобален клъстер от разпределени сървъри, за да осигури невероятно бърза доставка на съдържание. А CDN може бързо да прехвърля всички популярни типове съдържание в мрежата: видео, снимка, JavaScript и т.н. В наши дни по-голямата част от трафика на мрежата преминава през някаква форма на CDN.

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

Ако нямате предишен опит с CDN, препоръчваме да изпробвате Cloudflare – те предоставят безплатен план завинаги и това е чудесна платформа, с която да започнем да учим. И ако Cloudflare не отговаря на вашите очаквания, вижте нашата публикация за най-добрите безплатни доставчици на CDN на пазара.

# 5: AMP (Ускорени мобилни страници)

на Google AMP проект е мобилна оптимизация на стероиди! По същество AMP премахва страниците ви, за да предостави най-важното, за да осигури супер бързо преживяване при зареждане, но и да направи четливостта на съдържанието приоритет. Като се има предвид колко важна е скоростта на страницата, можете ли да съберете смелостта да кажете „не“ за моментално зареждане?

Google AMP (Ускорени мобилни страници)

Добре, всички тези модни думи звучат чудесно, но как всъщност работи AMP?

AMP е HTML страница с голи кокалчета с определени ограничения за това какъв вид съдържание може да се показва. Това води до много по-бързи времена на зареждане и цялостна производителност поради ограничение за изпълнение на скриптове и подобни.

JavaScript, например, не работи с AMP. Освен ако, разбира се, не използвате AMP JS библиотека на разположение на GitHub. Използването на JS библиотеката ви позволява да постигнете определени резултати, като избягване на рекламни блокери, но ако искате истинска ефективност, тогава суровият AMP е пътят.

AMP по пример

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

Научете AMP по пример

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

Интересни казуси за AMP:

  1. Terra стимулира мобилното зрителско управление с AMP
  2. Times of India съобщава с 1.5X повече приходи от приходи
  3. Fastcommerce управлява реализациите за клиенти, като изгражда AMP първо

# 6: Тествайте преди извършване

В този ден и възраст няма извинение да нямате отделна сцена за среда за вашия проект. Повечето облачни хостинг платформи по подразбиране предлагат сценични среди, така че проверете при вашия доставчик, за да видите дали имате достъп до такава.

тестване преди извършване

Каква е поетапната среда?

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

Този сайт е това, което наричате производствен сайт – версия в реално време на целия код, скриптове и съдържание, на които се основава вашият сайт. Постановочната среда в този контекст е копие на вашия производствен сайт. Манекен сайт, ако щете. И в тази инсценираща среда можете да правите промени или да добавяте нови функции, без да нарушавате сайта си на живо.

Винаги се сещам за публикацията на Ашли Харп, Не губете време – Тествайте промените преди да извършите.

Нейното възприемане на това как се „измамваме“, за да избягваме определени неща, е отличен пример за това как не искаме да поемаме отговорност, когато правим грешка. Въпреки това публикацията на Ашли включва също връзки към полезни инструменти за създаване на локална сцена.

Тестването не е толкова страшно, колкото звучи. Но е сигурно, че по дяволите е страшно, когато случайно изтриете цялата си база данни на производствен сървър!

Заключително изявление

Оптимизирането на уебсайта Ви за безпроблемно мобилно изживяване не е толкова трудно. Всичко, от което се нуждаете, е малко решителност и с желание приложите очертаните методи в този пост. Вероятно е, че вече сте запознати с неща като кеширане на съдържание и мързеливо зареждане, но какво да кажете за стационарни среди или предварително зареждащи устройства?

Да се ​​надяваме, че тази публикация хвърли известна светлина върху текущото състояние на оптимизация на мобилни уебсайтове. Чувствайте се свободни да оставите коментар или да препоръчате допълнителни решения.

ЕТИКЕТИ:

  • SEO

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map