Прилагайте тези 6 техники за подобряване на скоростта на зареждане на мобилния ви сайт

Съдържание:

Anonim

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

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

  • 25% по-висока видимост на рекламата,
  • 35% по-нисък процент на отпадане и
  • 70% по-дълги потребителски сесии.

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

$config[code] not found

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

Според Google,
  • 1 от 2 души очакват да се зареди страница в рамките на по-малко от 2 секунди.
  • 53% от посещенията е по-вероятно да бъдат изоставени, ако страницата отнеме повече от 3 секунди за зареждане на мобилно устройство.
  • 46% от хората са проявили недоволство от очакването за зареждане на страници, докато сърфират в мрежата на мобилно устройство.

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

Как да увеличим скоростта на мобилния сайт

Измерване и минимизиране на времето за отговор на сървъра

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

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

Обикновено има 3 основни метода, които участват в повишаването на времето за отговор на вашия сървър:

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

Използвайте CSS за зареждане на изображения

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

Вариант на тази техника се използва от Amazon за условно зареждане на специфични за устройството изображения.

Минимизирайте броя на пренасочванията, за да увеличите скоростта на мобилната си страница

Пренасочванията не са нищо друго освен инструкции, които могат автоматично да приемат посетителите на сайта от една страница на друга.

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

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

Намалете JS и CSS файловете

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

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

“Minification” елиминира излишъка, без да засяга показването на страница. Широка гама от инструменти на Google може да ви помогне да премахнете такива съкращения, включително подобни на:

  • CSSNano (за CSS)
  • UglifyJS (за JS)

Вместо изображения, използвайте CSS3

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

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

Използвайте вградени SVG вместо JPEG

Подобно на URI за данни, SVG (скалируема векторна графика) могат да бъдат вградени в страницата, за да се намали броят на HTTP заявките.

Тези файлове могат да бъдат създадени в редактор на векторни графики, като Inkscape, Adobe Illustrator и др. След като бъде създаден, можете да го отворите в текстов редактор и да го пуснете в кода си.

Забележка: За да вградите SVG в стиловия си лист, трябва първо да го конвертирате в URI на данни и след това да преминете към следващата стъпка.

Така че повече или по-малко обобщава нещата. Надявам се, че сте имали добро и просветляващо четене.

Снимка чрез Shutterstock

1