Выдаліць AMP і не ўплываюць на SEO рэйтынг, Organic Traffic, прадукцыйнасць

выдаленне AMP
SEO і арганічны трафік вынікі выдалення AMP
Prefetch вэб-старонкі для імгненнага прагляду вопыту
Тэставанне мабільных карыстальнікаў
Настройка HSTS
Кэш усё з Cloudflare CDN
Аптымізацыя малюнкаў пагрузачных вопыту
Падціснуць з нізкім дазволам версіі
перагледзьце залежнасці
Значэнне ў параўнанні з коштам
рэзюмэ

Я выкарыстаў, каб рэкамендаваць старонкі Google AMP як надзейны спосаб павялічыць сайт SEO рэйтынгу і арганічных наведвальнікаў трафіку. Нядаўна я выдаліў AMP з майго сайта. У гэтым блогу я буду апісваць, як гэта паўплывала на мой блог і пару больш прасунутых метады аптымізацыі вэб-прадукцыйнасці, я выкарыстоўваю замест прапрыетарнага стандарту як паскораныя мабільных старонкі.

выдаленне AMP

Як гэта зрабіць

Я не буду ўдавацца ў падрабязнасці пра тое, чаму я вырашыў выдаліць AMP з гэтага блога. Карацей кажучы, яны прапанавалі дэградавалі вопыт мабільных наведвальнікаў і захаванне занадта шмат абмежаванняў. Вы можаце праверыць Hacker News знайсці ўсе AMP Ненавіджу вы маглі б думаць.

Выдаленне AMP з вашага сайта не імгненнае і павінна выконвацца з асцярогай, каб не нічога сапсаваць.

Вы павінны пачаць з налады перасылак ад версіі AMP старонкі да стандартнага. У маім выпадку гэта было зроблена з дапамогай простай дырэктывы NGINX:

месца ~ ^ / амп /(.*)$ {вярнуць 301 / $ 1; }

Акрамя таго, пераканайцеся, каб мець правільнае отн = «кананічны», паказваючы ад версіі AMP старонкі да зыходнага. Калі ён працуе, то вы можаце выдаліць отн = «amphtml» і запыт переиндексации ў Google Search кансолі.

Праз пару дзён, вашыя старонкі AMP пачнуць знікаць з мабільнага SERP.

SEO і арганічны трафік вынікі выдалення AMP

старонкі AMP былі сышлі з майго блога каля аднаго месяца на момант напісання гэтага паста. Яно павінна быць дастаткова часу, каб убачыць некаторыя эфекты на трафік.

Я не заўважыў, негатыўны ўплыў на становішча SERP і арганічных нумароў трафіку.

Чырвоная кропка паказвае на дату, калі я здабываў падтрымку AMP з гэтага блога

Можа быць, для блога выдавецтва новы артыкул кожны тыдзень або так патэнцыйнае размяшчэнне верхняга карусельные мае невялікае значэнне.

Апіша некалькі змен, якія я уведзеныя ў гэты блог, каб прапанаваць свае наведвальнік гэтак жа гладкі і прыемны вопыт прагляду ў якасці аднаго рэкламуемых прыхільнікаў AMP.

Prefetch вэб-старонкі для імгненнага прагляду вопыту

AMP вядомыя прапаноўваючы імгненны водгук. Вы можаце рэалізаваць падобны вопыт карыстальніка на вашым сайце, выкарыстоўваючы стары добры HTML-тэгі.

Кожны пост у гэтым блогу спасылкі на папярэдні і наступны. Я выкарыстоўваю наступныя тэг спасылкі для папярэдняй загрузкі змесціва HTML з суседніх пастоў:

<Спасылка отн = "папераджальнай" HREF = "/ папярэдняга пост-URL"> <спасылка отн = "папераджальнай" HREF = "/ наступнага пасля URL">

Кожная старонка вага HTML вакол ~ 10kb, так што нават на мабільных прыладах гэта нікчэмнае накладныя паласы прапускання.

На хатняй старонцы з разбіўкай на старонкі індэкса ўсіх маіх пастоў я падціснуць дзве першыя артыкулы па змаўчанні. Калі карыстальнік пачне перамяшчацца ўніз, я дынамічна падціснуць паведамленні ў блогу, калі іх назва спасылка становіцца бачнай у акне праекцыі і патэнцыйна можа быць націснутая. Гэта можа быць дасягнута з дапамогай трохі ванілі JS, змяшанай з Джэкі шаблонах:

(Функцыя () {VAR = URLs [...] // URL-адрас, загружаныя з дапамогай Джекиля шаблоннага вару preloadedUrls = [] preloadedUrls. Націснуць (URL [0]) preloadedUrls. Націснуць (спасылкі [1]) вар преднагрузка = функцыя (URL) {калі (URL === не вызначаны) {вяртанне;} калі (. preloadedUrls ўключае ў сябе (URL)) {вяртанне;} = пераменная preloadLink дакумент createElement ( "спасылка"); .. preloadLink SetAttribute ( "отно", "предвыборку") ;. preloadLink SetAttribute ( "HREF", URL) ;. дакумент getElementsByTagName ( "галава") [0] AppendChild (preloadLink); .. preloadedUrls штурхаць (URL);} акно OnScroll = функцыя () {вар preloadIndex = ParseInt (. акно. scrollY / 300) папярэдні нацяг (URLs [preloadIndex]);}}) ();

Я заўважыў, што падціскаць працуе надзейна на працоўным стале Chrome і Android мабільных браўзэраў. Ён прапануе імгненны вопыт навігацыі, нават калі злучэнне дрэнна. На жаль, гэта, здаецца, не ўплывае на iPhone, на працоўным стале Safari або Firefox. Chrome з'яўляецца самым папулярным браўзэрам, так што гэта добрая перамога ў любым выпадку.

Тэставанне мабільных карыстальнікаў

Калі вы знаходзіцеся на высокай хуткасці WIFI а, вы можаце не заўважыць паляпшэнні, прапанаваныя падціскаць. Вы можаце падумаць, што ваш сайт вельмі хутка, калі вы толькі калі-небудзь доступ да яго на настольным кампутары. У цяперашні час вялікая частка трафіку мабільных прылад, і распрацоўшчык вэб-сайт павінен засяродзіцца на прапаноўваючы лепшы вопыт прагляду для іх у прыватнасці.

Я выкарыстоўваю Сетка Кандыцыянер Link каб праверыць, як мае сайты працуюць у дрэнных умовах сеткі:

Калі вы хочаце пабудаваць хуткія сайты, выкарыстоўваць павольны інтэрнэт

Настройка HSTS

Такія інструменты, як давайце Encrypt і Cloudflare прапаноўваючы бясплатна SSL / TLS сертыфікатаў няма ніякіх прычын, чаму якая-небудзь частка вашага сайта павінна падавацца па звычайным пратаколе HTTP.

Даданне HSTS загалоўка (HTTP Strict Transport Security) уяўляе сабой просты спосаб, каб пазбегнуць непатрэбных на боку сервера перасылкі, калі карыстальнік ўводзіць URL вашага сайта непасрэдна ў браўзэры.

Без загалоўка перанакіраванне HSTS будзе ажыццяўляцца з дапамогай 301 HTTP кода, перанакіраванне HTTP версіі HTTPS. Калі ў вас ёсць загаловак HSTS на месцы, рэдырэкт будзе зроблены на баку кліента, аднаўленчую адзін поўныя сеткавай туды і назад, і, такім чынам, паляпшаючы пачатковы вопыт карыстальніка.

Акрамя таго, вы можаце ўявіць ваш сайт HSTS Спіс Preload так што наведвальнікі перанакіроўваюцца на HTTPS версіі па змаўчанні, нават калі яны яшчэ не наведваюць ваш сайт раней.

Пераканайцеся ў тым, каб уважліва прачытаць пра наступствы дадання загалоўка HSTS, таму што гэта адзін-палосная паездку і не могуць быць адмененыя.

Кэш усё з Cloudflare CDN

Я выкарыстоўваю Cloudflare як CDN для гэтага блога. Па змаўчанні, ён кэшуецца толькі статычныя рэсурсы ,

У гэтым выпадку кожны наведвальнік павінен загрузіць вэб-сайт HTML з сервера VPS, размешчаным у ЗША. Гэта азначае поўную сетку туды і назад ўвесь шлях у ЗША, незалежна ад іх геаграфічнага размяшчэння проста ўбачыць што-небудзь вынесенае на экране.

Гэты блог уяўляе сабой статычны сайт так проста Cloudflare канфігурацыі Твік можа значна палепшыць прадукцыйнасць вэб. Выкарыстанне так званыя правілы старонкі вы можаце наладзіць Cloudflare кэшаваць ўсе, уключаючы вашых HTML-старонкі, паважаючы іх адпаведны кэш заканчэння тэрміну дзеяння загалоўкаў.

Cloudflare загалоўкі кэша старонкі і правілы канфігурацыі

Для таго, каб зрабіць яго працу я выкарыстоўваю наступную канфігурацыю NGINX:

месца ~ * \ (?: ICO | CSS | JS | GIF | JPE г | PNG?) $ {мінае 8d. add_header Cache-Control "грамадскасць"; try_files $ = 404 URI; } Месцазнаходжанне / {завяршаецца 15 м; add_header Cache-Control "грамадскасць"; try_files $ $ URI .html $ URI URI / /404.html; }

Я магу кэшаваць статычныя рэсурсы на працягу 8 дзён, каб зрабіць Google Page Insights шчаслівым. Я выкарыстоўваю Джекилл-актывы для дадання md5 дайджэста файла на аснове змесціва, таму нясвежы кэш не з'яўляецца праблемай.

Пасля кожнага Deploy я запускаю наступны сцэнар Ruby, якая ачышчае Cloudflare кэшы для статычных HTML-старонак:

патрабуецца «карта сайта-парсер» патрабуюць «HTTP» адказ = HTTP. загалоўкі ( "X-Auth-пошта" => ENV. выбаркі ( "CLOUDFLARE_EMAIL"), "X-Auth-Key" => ENV. выбаркі ( "CLOUDFLARE_API_KEY"), "Content-Type" => "дадатку / JSON" ). пост ( "https://api.cloudflare.com/client/v4/zones/ # {. ENV выбаркі ( 'CLOUDFLARE_ZONE_ID')} / purge_cache", JSON: {файлы :. SitemapParser новы ( »./docs/sitemap. XML »). to_a})

Гэта азначае, што кожны наведвальнік будзе трымаць копію HTML-старонак у яго лакальным кэшы не больш за 15 хвілін і пасля гэтага запыту да даты версіі ад вузла сервера Cloudflare CDN.

Гэта можа быць менш крытычна ў выпадку цалкам статычным сайце. Скарачэнне сеткі наступнага адлегласці мае вырашальнае значэнне, калі ўтрыманне вашага сайта з'яўляецца дынамічным.

Большасць наведвальнікаў гэтага блога, ботаў ці не, з'яўляюцца ЗША

Я нядаўна міграваў сервер VPS мая бок праекта Abot Слак Bot у ЗША. У той час як карыстальнікі Абот раскіданыя па ўсім свеце, сам бот падключаецца да нацяжны API ЗША на аснове сервераў для кожнай каманды. Скарочаныя бакавой сервернай сеткі адлегласць туды і назад значна палепшылася час водгуку.

Аптымізацыя малюнкаў пагрузачных вопыту

паказаць запаўняльнік

Дадаць малюнак у верхняй частцы кожнага блога. На павольных сетках высокай якасці версія малюнка можа заняць значнае час, каб загрузіць і сапсаваць вопыт.

Калі вы ведаеце , стаўленне вашых малюнкаў вы можаце выкарыстоўваць просты CSS трук , каб прадухіліць ваша прылеглае ўтрыманне ад «скачкоў» , калі малюнак нарэшце загружана:

<DIV клас = "асноўнага малюнка запаўняльнік"> <IMG SRC = "/images/image.jpg"> </ DIV> .main-малюнак-запаўняльнік {пазіцыя: адносная; абіўка дно: 61%; / * Стаўленне вышыні да шырыні малюнка * / вышыня: 0; перапаўненне: схаваны; колер: #eee; колер фону: #eee; } .Main-малюнак-запаўняльнік IMG {пазіцыю: абсалютная; верх: 0; Злева направа: 0; шырыня: 100%; }

Ён будзе адлюстроўваць пустую шэрыя пустышку з правільным памерам незалежна ад краявіднага экрана наведвальніка перад загрузкай выявы.

Падціснуць з нізкім дазволам версіі

Іншая аптымізацыя вы можаце ўжыць, каб адлюстраваць версію з нізкім дазволам малюнкаў перад арыгінальнай версіяй загружаецца. Гэта можа быць дасягнута з невялікай колькасцю коды ванілі JavaScript.

(Функцыя () {Array. Прататып. Лустачкамі. Выкліку (дакумент. GetElementsByClassName ( 'JS-асінхронным IMG')). Foreach (функцыя (asyncImgNode) {вар fullImg = новы малюнак () fullImg. SRC = asyncImgNode. Набор дадзеных. ЦСІ ;. fullImg OnLoad = функцыя () {asyncImgNode ClassList выдаліць ( 'JS-асінхронным IMG') asyncImgNode SRC = asyncImgNode набор дадзеных SRC .....};});}) ();

Адпаведны HTML IMG вузел:

45 кб Elk супраць 4 кб Elk

перагледзьце залежнасці

Перадазіроўкі вонкава прайшлі трэція іншыя бібліятэкі JavaScript гэта самы просты спосаб, каб забіць прадукцыйнасць вашага сайта. стандарт AMP не дазваляе ўключыць іх наогул. Я хацеў бы прапанаваць сярэдні наземны падыход.

Апусціўшыся ў яшчэ адным <скрыпт SRC = «...»> можа не здацца вялікім справай. Лёгка забыцца, што адзін сцэнар тэг можа прывесці да каскаду запыту кожнаму, уключаючы больш скрыпты і рэсурсы. Давайце паглядзім на кошт ўкаранення ўзору трэцяй іншых бібліятэк JavaScript:

Як вы можаце бачыць SUMO на здзіўленне цяжкім. Я выкарыстаў яго на некаторы час, таму што мне вельмі спадабалася іх спагадны сацыяльны убудова акцый. Пазней я перапісана з нуля.

3 МБ і 16 запытаў супраць двух дзясяткаў радкоў HTML + CSS

У рэшце рэшт, я вырашыў, што Disqus з'яўляецца адзіным цяжкавагавіком трэцяга ўдзельніка JavaScript бібліятэкай, якая прапануе досыць значэння, каб ўставіць яе на гэтым блогу. Можа быць, калі б я выкарыстаў SUMO поўнаэкранныя падпіскі усплывальныя вокны і іншыя інструменты пераўтварэнні, было б мэтазгодна, каб дадаць гэтыя 3 МБ прапускной здольнасці.

[Update] Я міграваў сваю сістэму для каментарыяў лёгкіх Commento ,

Значэнне ў параўнанні з коштам

Сутнасць у тым, што гэта вельмі лёгка выпусціць з-пад увагі, што цана выканання, уключаючы залежнасці JavaScript, і, такім чынам, псуючы вопыт прагляду карыстача.

Я думаю, што яна ідзе ўніз, наколькі вялікае значэнне інструмент прапановы ў параўнанні з коштам у запытах і прапускной здольнасці. Напрыклад, я вырашыў ўбудаваць Crisp чат на мэтавая старонка Abot , На месцы падтрымка чата паляпшае карыстальнікі Абот / кліенты адчуваюць шмат і не патрабуе вялікіх выдаткаў з пункту гледжання прадукцыйнасці.

Для супярэчаць 8 дадатковых запытаў і амаль 200 кб для інтэрактыўнай кнопкі Twitter прытрымлівацца не падаецца добрым кампрамісам.

Запыты, якія выдаюцца пры бібліятэцы, уключаючы Sumo JavaScript

Пераканайцеся ў тым, каб адключыць печыва адсочвання і партнёрскай спасылкі ў Disqus панэлі адміністратара, каб паменшыць колькасць запытаў ён робіць:

рэзюмэ

Я не думаю, што галіць пару сот мілісекунд ад часу загрузкі вэба-сайта можа зрабіць перапынак ці ваш інтэрнэт-бізнэс, але занадта шмат сайтаў, разадзьмутыя непатрэбным JavaScript і рэсурсамі. Прапаноўваючы сваім карыстальнікам гладчэйшы вопыт прагляду можа быць канкурэнтнай перавагай.

Я выканаў усе аптымізацыі, якія я апісаў вышэй у маім Шаблон Джэкіл SEO , Вы можаце спампаваць яго бясплатна. Гэта стандартнае ласунак для электроннай пошты суб здзелкі.

Я ўсё яшчэ ў працэсе стварэння гэтага блога, як прадукцыйную, наколькі гэта магчыма. Калі вы заўважылі якія-небудзь паляпшэння, якія можна было б прымяніць тут, калі ласка, пакіньце каментар. Дарэчы, я вельмі рэкамендую чытаць Высокая прадукцыйнасць браўзэра сеткі ад Іллі Григорика, які быў натхненнем для многіх аптымізацый я пішу. Вы таксама можаце праверыць мой папярэдні пост для больш аптымізацыі SEO і вэб-парады па паляпшэнні прадукцыйнасці ,

ICO | CSS | JS | GIF | JPE г | PNG?