14 трикови за осветлување за да ја забрзате вашата страница

Оваа серија блогови за брзината на страницата беше многу забавна.

Досега научивме дека Амазон би изгубила 1,6 милијарди долари (!) Доколку нивната веб-страница забави.

Исто така, открив што точно се случува зад сцената за да се забави веб-страницата.

Тоа нè доведува до нашиот природен заклучок: како точно можете да ги забрзате работите? Опфаќаме сè, од брзината на серверот до оптимизација и неколку дополнителни бонуси.

Прво, да потсетиме што предизвикува бавна брзина:

Кога ја поставувате мојата страница овде на Bitcatcha, вашиот прелистувач (Firefox, Safari, Chrome, итн.) Започнува разговор со мојот веб-сервер.

Прелистувач: „Еј веб-сервер! Може ли да ми ги донесете сите делови и парчиња да ги прикажам Bitcatcha.com, ве молам? "

Сервер: "Секако, дозволете ми да ги најдам и да ги испратам".

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

Звучи прилично едноставно, но еве што ќе ги забави работите:

  • Мрзлив сервер кој бара возрасти за да одговорат на барањата.
  • Сервер кој истовремено управува со песни за многу други веб-страници.
  • Многу одлични „парчиња“ на веб-страницата што треба да се најдат и да се испратат до тунелот.
  • Преполн тунел.

Постојат многу работи што можат да тргнат наопаку овде. Па, како да ги забрзаме работите?

осветлување

Дел 1: Направете го вашиот сервер побрз

1. Надградете се на подобар веб-домаќин (т.е. подобар сервер)

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

Повеќето од нас имаат тенденција да купуваат најевтино земјиште што можеме да го најдеме. Но, ова не е нужно мудро решение.

Ефтините веб-страници се домаќини на сервери за изнајмување кои се преполни и мали. Запомнете, сакате вашиот сервер брзо да одговори на барањата и брзо да ја испрати вашата страница во тунелот до вашиот прелистувач.

Погледнете ја нашата најбрза листа на веб хостинг заснована на времето на одговор на серверот.

2. Префрлете се од споделен хостинг на VPS

Евтини веб-домаќини ќе ја постават вашата веб-страница на сервер заедно со тони други веб-страници. Се вика заеднички хостинг и тоа значи дека треба да се борите за ресурси.

Ако веб-страница одеднаш прими голем сообраќај, тоа ќе ве забави додека го зголемува шириниот опсег.

Со префрлување на VPS (виртуелен приватен сервер) или (барем високо квалитетен споделен сервер, како што е SiteGround), веб-домаќинот ќе затвори агол од споделениот сервер токму за вас. Тоа значи дека не треба да се грижите за тоа што другите страници ви ги крадат ресурсите.

3. Поместете го серверот поблиску до вашата публика.

Секој пат кога некој ќе кликне на вашата страница, вашиот сервер мора физички да испраќа информации од планетата на екранот на вашиот компјутер.

Ако серверот е од другата страна на светот, ќе биде потребно многу време. Ако знаете од каде потекнува најголемиот дел од сообраќајот, замолете го вашиот веб-домаќин да ја стави вашата страница на сервер најблизок до вашата главна публика.

4. Користете мрежа за испорака на содржина

Проблемот со приближување на вашиот сервер до одредена публика е дека некој ќе изгуби. Ако го преместите вашиот сервер во Калифорнија, австралиските посетители ќе добијат бавно време на вчитување. Така се и вашите европски посетители.

Мрежа за испорака на содржина или CDN ги става вашите податоци на сервери ширум светот. Значи, кога некој ќе кликне на вашата веб-страница, најблиску до него серверот ги испраќа информациите.

Тоа значи дека вашите посетители стануваат супер брзи каде и да се во светот. (За ваша препорака, јас го користам Cloudflare овде во Bitcatcha.)

5. Овозможете ја поставката „одржувај жива“

Кога вашиот сервер ги испраќа датотеките на вашата страница до тунелот, секоја страна патува одделно. Вашиот лист за стил на CSS, вашето лого, секоја ваша слика итн.

Очигледно, најефективниот начин да го направите ова е да ги испратите сите во истиот голем тунел.

Тука влегува поставката „одржувај го живо“. Кога е активиран, главниот тунел останува вклучен и сè оди надолу по истата врска (тоа е многу брзо).

Но, кога поставката е запрена, мора да се направи нов тунел за секој елемент. (Многу е бавно).

Повеќето веб-домаќини ја чуваат оваа поставка (што е добро), но понекогаш споделените домаќини затвораат врски без предупредување.

Дел 2: Оптимизирање на елементите на веб-страницата

Сега, кога го направивме вашиот сервер што е можно побрз и ефикасен, како сами да ги оптимизираме компонентите на страницата?

6. Намалете го времето на враќање (RTT)

Во моментов, вашиот прелистувач треба да ја бара секоја ставка од серверот, едно по едно. Вашето лого, потоа секоја од сликите, потоа листот за стил на CSS.

Времето потребно за да го добиете е кружен пат.

Колку повеќе кружни патувања треба да направите, толку повеќе време е потребно за вчитување на целата веб-страница. Тоа е исто како да го спакувате вашиот автомобил со кутии и да ги преместите во нова куќа.

Колку повеќе кутии имате, толку повеќе кружни патувања треба да направите. Решението? Намалете ја количината кутии што ќе ги земете.

Намалете го бројот на ставки што вашиот сервер треба да ги испрати до тунелот. Помалку слики, помалку код, помалку додатоци.

7. Овозможете компресија на вашата веб-страница

За жал, не е само бројот на кутии. Колку се тешки. Ако сите ваши елементи се големи и тешки, тоа ќе заземе многу простор во вашиот тунел. Тие исто така ќе се движат побавно. Тоа е како да градите камиони. Секоја полна со тешки кутии.

За среќа, можете да ја компресирате вашата веб-страница и сè што е на неа. Користење на алатка како Gzip. (Тоа го препознаваат 90% од прелистувачите. - Речиси сите се, освен неколку странци кои сè уште користат Интернет експлорер 4.)

Најчудните делови на вашата страница се слики, HTML, CSS и Javascript. Со нивно компресирање, можете да ја намалите просечната "тежина" на вашата страница за време на преносот.

Просечната големина на веб-страница е 2 MB, но таа расте секоја година.

8. Оптимизирајте ги вашите слики

Сликите се обично најтешкиот дел од која било веб-страница. Јас сум најголемиот, најдебелиот, најбавниот натоварувач.

Започнете со сечење на точната големина што ви треба. Не поставувајте огромни слики или зголемувајте ги во HTML. Само вчитајте ги во вистинската големина.

Исто така, компресирајте слики пред да ги поставите. Ако користите WordPress, приклучоци како WP Smush може да ја намалат големината на сликата за 80%!

9.… Или направете духови

Сприт е единствена слика што содржи многу мали слики. Одлично е за споделување копчиња или други елементи на сликата.

Сега, вашата веб-страница треба да направи единствено барање, наместо десет. Потоа можете да користите CSS за да изберете каде ќе бидат прикажани делови од сликата.

10. Исечете го вашиот код

HTML е густ и тежок. Исто така е неверојатно повторувачки. CSS е малку поефикасен, но многу од нив се излишни.

Време е да поминете низ вашиот код со фин чешел за заби и да се ослободите од сите непотребни парчиња.

Ако користите образец од WordPress, Tumblr итн., Тогаш веројатно има многу кодови што не ги користите. Овие обрасци се конфигурирани да ви даваат многу опции за функционалност. Но, на повеќето од нас не им треба сето тоа.

11. Деинсталирајте непотребни приклучоци (WordPress)

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

Секој додаток е различно барање на сервер. Тоа е уште еден важен пакет што го блокира вашиот брз тунел.

Ако не го користите, исклучете го.

12. Намалете ги пренасочувањата

За секое пренасочување, вашите пакети одат двапати погоре и надолу низ тунелот. Освен ако не ви треба, не користете пренасочувања на вашата веб-страница.

Дел 3: Бонус додатоци

13. Намалете ги прегледите на DNS

Сè уште нема дел од процесот за кој не сме разговарале. Тоа се случува уште од самиот почеток.

Пред прелистувачот да започне разговор со серверот, тој мора да ја пронајде локацијата на серверот (Пронаоѓање на неговата IP адреса). Тоа е исто како да го барате бројот на серверот во именикот. Потребно е малку време. (Обично 20-120 милисекунди).

Потребно е уште подолго ако има повеќе имиња на домени поврзани со вашата веб-страница. Вообичаени примери вклучуваат: blog.yourwebsite.com или дополнителни домени за слики, стилски листови и флеш објекти.

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

14. Кеширање на прелистувачот

Замислете колку брзо би биле работите ако вашиот прелистувач може да чува копија од сите датотеки на страницата. На овој начин, нема да мора да контактирате со серверот секој пат. Може само да ги вчита од меморијата.

Ова е тоа што е кешот. Тоа значи дека вашиот прелистувач "се сеќава" на веб-страницата. Кога ќе го вчитате по втор пат, тоа е многу брзо.

Phew! Ова беше подолг пост од вообичаеното, но мислам дека вредеше.

Сега знаете сè што треба да знаете за брзото трепкање на вашата веб-страница. Овие трикови можат да ви заштедат секунди од брзината на вчитување.

Тоа значи среќни посетители. И тоа значи поголема продажба.