Создание быстрых сайтов — скорость загрузки как основной критерий

Создание быстрых сайтов — скорость загрузки как основной критерий

Созда­ние быст­рых сай­тов — опти­ми­за­ция ско­ро­сти загруз­ки сай­та. Опти­ми­за­ция ско­ро­сти загруз­ки сай­та сего­дня явля­ет­ся основ­ным кри­те­ри­ем при созда­нии быст­рых сай­тов. Про­из­во­ди­тель­ность веб-сай­тов — не толь­ко о том, как заста­вить стра­ни­цы сай­та гру­зить­ся быст­рее. Необ­хо­ди­мо так­же доне­сти важ­ность эффек­тив­ной рабо­ты веб-ресур­сов до раз­ра­бот­чи­ков и дру­гих участ­ни­ков про­ек­та. Про­из­во­ди­тель­ность — такая же часть функ­ци­о­наль­но­сти, как и всё осталь­ное, поэто­му ее реа­ли­за­цию нель­зя откла­ды­вать на «когда-нибудь».

Сего­дня появ­ля­ют­ся всё новые и новые инстру­мен­ты для кон­тро­ля про­из­во­ди­тель­но­сти: одни нуж­но запус­кать отдель­но, дру­гие же встра­и­ва­ют­ся в кон­вей­ер раз­ра­бот­ки и раз­вер­ты­ва­ния. Один из них — Lighthouse от Гуг­ла: он отоб­ра­жа­ет дан­ные о пока­за­те­лях PWA (про­грес­сив­ные веб-при­ло­же­ния), SEO и т. п.

Создание быстрых современных сайтов в Киеве

В сети есть мно­же­ство прак­ти­че­ских иссле­до­ва­ний о том, как опти­ми­за­ция про­из­во­ди­тель­но­сти улуч­ша­ет клю­че­вые пока­за­те­ли. Мно­же­ство прак­ти­че­ских иссле­до­ва­ний, в кото­рых повы­ше­ние про­из­во­ди­тель­но­сти при­ве­ло к улуч­ше­нию клю­че­вых пока­за­те­лей.

Под­ве­дем итог: не бой­тесь при­зна­вать (в том чис­ле пуб­лич­но), что ваш сайт рабо­та­ет мед­лен­но. Обя­за­тель­но най­дут­ся жела­ю­щие над этим пора­бо­тать, а ваша откры­тость пока­жет, что вы стре­ми­тесь совер­шен­ство­вать­ся. Созда­ние быст­рых сай­тов.

Для выяв­ле­ния про­блем с про­из­во­ди­тель­но­стью есть мно­же­ство инстру­мен­тов, напри­мер: WebPagetest, Pagespeed Insights, Audits в инстру­мен­тах раз­ра­бот­чи­ка Chrome и др. С их помо­щью удоб­но полу­чать опе­ра­тив­ные отче­ты о ско­ро­сти рабо­ты сай­та.

WebPagetest — очень полез­ный инстру­мент для созда­ния отче­тов о про­из­во­ди­тель­но­сти.

Но луч­ше, конеч­но, авто­ма­ти­зи­ро­вать созда­ние отче­тов, не пола­га­ясь на запуск про­ве­рок раз­ра­бот­чи­ка­ми вруч­ную.

Мож­но, конеч­но, исполь­зо­вать инстру­мен­ты обще­го назна­че­ния — вро­де Google Analytics с настра­и­ва­е­мы­ми собы­ти­я­ми, — одна­ко я сове­тую обра­тить вни­ма­ние на спе­ци­аль­но раз­ра­бо­тан­ные реше­ния: напри­мер, Calibre, SpeedCurve или SiteSpeed.

Мони­то­ринг про­из­во­ди­тель­но­сти дол­жен быть неза­мет­ным и при­вле­кать вни­ма­ние, толь­ко когда необ­хо­ди­мо при­нять меры.

Нуж­ные инстру­мен­ты в боль­шин­стве сво­ем рас­про­стра­ня­ют­ся плат­но — по под­пис­ке. Реше­ния с откры­тым исход­ным кодом (напри­мер, SiteSpeed) необ­хо­ди­мо раз­ме­щать на соб­ствен­ном обо­ру­до­ва­нии, поэто­му учи­ты­вай­те необ­хо­ди­мое для их настрой­ки вре­мя. Очень важ­но хоро­шень­ко поду­мать о том, как вы буде­те пред­ла­гать доба­вить эти инстру­мен­ты.

Умень­ше­ние вре­ме­ни загруз­ки слож­ных веб-при­ло­же­ний часто тре­бу­ет улуч­ше­ний в несколь­ких раз­ных обла­стях, и тща­тель­ные заме­ры могут помочь вам понять, что вы на вер­ном пути. Что сле­ду­ет взять на замет­ку:

  • Улуч­шай­те точ­ность ваших заме­ров, про­во­дя их на рас­про­стра­нён­ном обо­ру­до­ва­нии с умень­шен­ной про­пуск­ной спо­соб­но­стью сети и про­цес­со­ром.
  • Умень­ше­ние коли­че­ства кода чрез­вы­чай­но важ­но. Про­верь­те, мож­но ли что-нибудь сде­лать с вашим кодом и зави­си­мо­стя­ми.
  • Сжа­тие с помо­щью brotli может помочь силь­но умень­шить объ­ё­мы загру­зок для таких ста­ти­че­ских ресур­сов, как код.
  • Выпол­няй­те сете­вые запро­сы как мож­но рань­ше и как мож­но реже, что­бы сни­зить вре­мя про­стоя про­цес­со­ра.
  • Откла­ды­вай­те как мож­но боль­ше рабо­ты, пока при­ло­же­ние не будет загру­же­но и не ста­нет интер­ак­тив­ным.

Google AMP стра­ни­цы
В тече­ние несколь­ких лет каж­дая ста­тья, в кото­рой рас­смат­ри­ва­ют­ся трен­ды веб раз­ра­бот­ки и дизай­на кри­чит об отзыв­чи­во­сти сай­тов и ее важ­но­сти. Имен­но Google сде­лал отзыв­чи­вость обя­за­тель­ной. Сле­ду­ю­щим шагом Google ста­ло созда­ние про­ек­та уско­рен­ных мобиль­ных стра­ниц (AMP). Про­ект AMP был раз­ра­бо­тан сов­мест­ны­ми уси­ли­я­ми веду­щих IТ-спе­ци­а­ли­стов со все­го мира и в насто­я­щее вре­мя при­нят более чем на 1,5 мил­ли­о­нах веб стра­ниц.

В насто­я­щее вре­мя созда­ние вер­сии AMP ваше­го быст­ро­го сай­та – это спо­соб обес­пе­чить мол­ние­нос­ную про­из­во­ди­тель­ность на мобиль­ных устрой­ствах. Уско­рен­ные мобиль­ные стра­ни­цы упро­ща­ют коди­ро­ва­ние и уско­ря­ют загруз­ку на смарт­фо­нах в 10 раз. Таким обра­зом, исполь­зо­ва­ние AMP поз­во­ля­ет сокра­тить вре­мя загруз­ки стра­ни­цы на мобиль­ные устрой­ства до менее 1 секун­ды.

Послед­ствия это­го мно­го­чис­лен­ны. Преж­де все­го, такая впе­чат­ля­ю­щая ско­рость загруз­ки стра­ниц с AMP зна­чи­тель­но умень­ша­ет пока­за­тель отка­зов. Так­же, стра­ни­цы с опти­ми­зи­ро­ван­ны­ми стра­ни­ца­ми AMP выгля­дят более есте­ствен­ны­ми на неболь­ших экра­нах, созда­вая при­вле­ка­тель­ный поль­зо­ва­тель­ский интер­фейс. В-тре­тьих, AMP поло­жи­тель­но вли­я­ет на рей­тинг в резуль­та­тах поис­ка Google. В насто­я­щее вре­мя AMP явля­ет­ся кос­вен­ным фак­то­ром ран­жи­ро­ва­ния, кото­рый повы­ша­ет ваши резуль­та­ты, улуч­шая рабо­ту мобиль­ных поль­зо­ва­те­лей и умень­шая пока­за­тель отка­зов. Более того, AMP вам точ­но при­го­дит­ся, посколь­ку Google, Bing и дру­гие поис­ко­вые систе­мы, а так­же соци­аль­ные сети, такие как Twitter, LinkedIn, Pinterest и дру­гие уже пред­став­ля­ют кон­тент с помо­щью AMP.

Таким обра­зом, мож­но утвер­ждать, что уско­рен­ные мобиль­ные стра­ни­цы – это не про­сто мод­ная тех­но­ло­гия, кото­рой нуж­но сле­до­вать. Фак­ти­че­ски, это окно воз­мож­но­стей для сай­тов с высо­ким мобиль­ным тра­фи­ком. Поэто­му, если вы хоти­те полу­чать кли­ен­тов с мол­ние­нос­ной ско­ро­стью, пере­ход на AMP дол­жен быть в вашем спис­ке задач на 2018.

А кто, как не DimeStudio помо­жет вам в этом? Созда­ние быст­рых сай­тов в Кие­ве и Укра­ине.