аптымізацыя Page Speed ​​для паляпшэння рэйтынгу

1. Першы крок: ведаць, дзе аптымізацыя PageSpeed ​​можна Каб праверыць статус-кво, то забяспечыць сябе...
2. Дадатковыя інструменты для аптымізацыі часу зарадкі
3. Цяпер вы хочаце раўняцца больш хуткасці старонкі?
4. 1. Page аптымізацыя хуткасці з дапамогай кэшавання сервера
5. 2. Page аптымізацыя хуткасці з дапамогай кэшавання браўзэра
6. кэшаванне браўзэра па mod_headers
7. кэшаванне браўзэра па mod_expires
8. кэшавання браўзэра і ўнесці змены ў свой вэб-сайт
9. 3. Page аптымізацыя хуткасці шляхам мінімізацыі HTTP запытаў
10. 4. Пазбягайце непатрэбных шмат пераадрасацыі
12. 6. Сціск CSS і JavaScript
13. 7. З дапамогай GZIP сціску
14. 8. Старонка аптымізацыі хуткасці асінхроннай загрузкі
15. Асінхронная загрузка JavaScript
16. Дадатковыя HTTP запытаў 9. Выкарыстоўвайце поддомены
17. 10. Аптымізацыя хуткасці старонкі з дапамогай выкарыстання сеткі дастаўкі кантэнту (CDN)
18. 11. Паляпшэнне час водгуку вашага сервера
19. 12. Пазбягайце Bad Просьбы
20. 13. Выкарыстанне CSS3 замест графічных кнопак, абразкоў і фонавым
21. 14. Выкарыстанне малюнкаў з правільнымі памерамі
22. 15. Выкарыстоўвайце правільны фармат для малюнкаў
23. 16. Паменшыць інфармацыю для фатаграфій
24. 17. Выдаліць EXIF ​​дадзеныя і мета-тэгі
25. 18. Падумайце, першым вашым мабільным карыстальнікам
26. Святло на наступны ўзровень

Першы крок: ведаць, дзе аптымізацыя PageSpeed ​​можна

Каб праверыць статус-кво, то забяспечыць сябе Google магутны інструмент: Page Speed ​​Insights ,

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

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

Вынікі Page Speed ​​Insights вы можаце альбо з дапамогай сайт або з дапамогай Browser Add-On без дадатковай аплаты (Firefox / Chrome).

Што PageSpeed ​​на самай справе азначае?

Хоць мы вельмі сканцэнтраваць сябе ў гэтым артыкуле на тэму Page Speed ​​ў класічным сэнсе гэтага слова, мы хацелі б вы хочаце, каб даць крыху больш шырокі доступ да гэтай тэмы тут.

Як рэальна вымярае хуткасць старонкі - арыентаваны на карыстальніка Вымярэння прадукцыйнасці

Хуткасць загрузкі сайта з'яўляецца важнай, няма ніякіх сумневаў. Але як менавіта адзін фактычна адказаў на пытанне аб хуткасці прыкладання або сайта? Загрузка маёй старонкі хутка ці не? Што азначае «хуткі» на ўсіх? Мы пакажам вам чытанне, якія робяць карыстач у цэнтр увагі, таму што ў рэшце рэшт, гэта, нарэшце, пра тое, калі гэта адчувае сябе дадатак або вэб-сайт, як хутка.

на Google Блог распрацоўшчыкаў паказвае Philip Уолтон у тым, што агульнае заяву «Мае прыкладання нагрузкі ў секундах x.xx» рэальнасць наўрад ці адлюстроўвае. Хутчэй за ўсё, час зарадкі для вельмі асобных фактараў залежыць ад таго, як падлучэння прылады або Інтэрнэту. Па-другое, час зарадкі не апісвае ні аднаго моманту, але іх варта разглядаць значна больш выдасканаленымі. Наступныя пытанні ілюструюць тое, што розныя этапы рэгіструюцца карыстальнікам пры загрузцы старонкі / прыкладання:

• Здарылася што - небудзь наогул? Запуск навігацыі паспяхова? Калі сервер?
• Гэта тое , што адбываецца ўжо карысна? Быў досыць ўтрымання, выкананая з карыстальнікам можа ўжываць?
• З'яўляецца Ці то , што паказана выкарыстоўваць? Ці могуць карыстальнікі ўжо выкарыстоўваюць сайт для ўзаемадзеяння (спасылкі, тэкставыя палі і г.д.), або ці павінен ён па-ранейшаму плаціць?
• З'яўляецца Ці гэта прыемна? Запуск ўзаемадзеяння плаўна і без затрымак?

Для гэтага, Філіп Уолтон прапануе некаторыя паказанні на:

Ва- першая фарба (ФП)

Чытанне «Першая фарба» адказвае Бываў што-небудзь карыстальнікаў пытання наогул? ». А менавіта, гаворка ідзе пра першы момант, у якім з'яўляюцца першыя пікселяў на экране, і, такім чынам, так што спачатку з'яўляецца які-небудзь колер. Так што ёсць нешта адбываецца.

Ва- першая Фарба змястоўнай (FCP)

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

Ва- першая Значная Фарба (ВМП) і герой элемент часу

Тут гаворка ідзе зараз да пытання «Карысная яна?». Такім чынам, калі ўтрыманне ужо было паказана карысным? Кожны вэб-сайт змяшчае розныя карысныя / важнае ўтрыманне. Асноўны змест старонкі згадваюцца як «Hero Content». На сайце надвор'я, што б, напрыклад, бягучая надвор'е ў пэўным месцы. Загрузка гэтага кантэнту героя вельмі хутка, гэта наўрад ці будзе заўважана карыстачу, які дадаў менш важны кантэнт паступова.

доўгія задачы

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

Час Interactive (TTI)

Чытанне «Час Interactive» у цяперашні час адносіцца да перыяду часу, пакуль сайт не толькі візуальна бачны, але і гатовы да ўзаемадзеяння з карыстальнікам.

Для таго, каб зразумець, названыя паказанні яшчэ лепш дапамагае наступную класіфікацыю Philip Ўолтана:

• Здарылася што - небудзь наогул? Па-першая фарба (ФП) / Першая фарба змястоўнай (FCP)
• Гэта тое , што адбываецца ўжо карысна? Па-першая Значная фарба (ВМП) / элемент сінхранізацыі героя
• З'яўляецца Ці то , што паказана выкарыстоўваць? Час Interactive (TTI)
• З'яўляецца Ці гэта прыемна? Адсутнасць працяглых задач

крыніца: Google Developers

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

Дадатковыя парады па аптымізацыі Page Speed, калі ласка, наведайце наш 121WATT блогу.

Дадатковыя інструменты для аптымізацыі часу зарадкі

Перш чым я цяпер да канкрэтных парадаў па аптымізацыі Page Speed, я хацеў бы прадставіць вам яшчэ некалькі Інтэрнэт-маркетынг інструменты называюць, што мы выкарыстоўваем у нашай паўсядзённай працы:

Цяпер вы хочаце раўняцца больш хуткасці старонкі?

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

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

1. Page аптымізацыя хуткасці з дапамогай кэшавання сервера

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

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

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

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

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

Калі вы выкарыстоўваеце WordPress, вы можаце зрабіць Убудова WP Ракетна выкарыстоўваць для налады вашай Кэшаванне даволі проста і хутка.

2. Page аптымізацыя хуткасці з дапамогай кэшавання браўзэра

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

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

Вы можаце актываваць кэшаванне ў браўзэры з дапамогай вы карыстаецеся пашырэнне для CMS або шляхам пошуку ўручную праз ваш .htaccess Activate File.

Карыстаецеся Ці вы WordPress, вы дапамагаеце гэтыя убудовы:

Ўручную наладзіць кэшаванне браўзэра некалькі складаней.

Ва- першых , вы павінны пераканацца , што альбо рабіць ці mod_headers mod_expires на вашай працы сервера, такім чынам актывуецца.

кэшаванне браўзэра па mod_headers

У выпадку mod_headers правільная запіс у файле .htaccess выглядае наступным чынам:

У дужках, тыпы файлаў, якія вызначаны тут, каб быць у кэшы.

З узростам = 2592000 працягласць кэшавання задаецца ў секундах. У гэтым выпадку 30 дзён.

кэшаванне браўзэра па mod_expires

У гэтым варыянце вы дадаць свой файл .htaccess, дадайце гэты код:

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

• 1 месяц
• 2 тыдні
• 3600 секунд

кэшавання браўзэра і ўнесці змены ў свой вэб-сайт

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

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

3. Page аптымізацыя хуткасці шляхам мінімізацыі HTTP запытаў

Калі адзін з наведвальнікаў на ваш сайт наведалі адзін з вашых вэб-старонак, запыт адпраўляецца на сервер. сервер вяртае HTML вэб-старонкі ў адказ. Ён зноў зрабіў у асобныя файлы. Табліцы стыляў (CSS), JavaScript (JS), выявы - усё закліканы да перадачы пратаколу гіпертэксту (HTTP).

Браўзэр можа працаваць 2-8 запытаў адначасова і для аднаго дамена. Такім чынам, ёсць мяжа. У выпадку перавышэння гэтага, астатнія выклікі павінны чакаць, пакуль іншыя не будуць закончаны. Такім чынам, чым даўжэй, тым даўжэй ён будзе цалкам адлюстроўваць вэб-старонкі.

Задача: Захаванне запытаў сервера для аднаго дамена. Змесціце HTML так не некалькі невялікіх CSS файлы даступныя, але падвесці вынік, што падводзіць вынікі. Гэта таксама ставіцца да файлаў JavaScript.

але групоўка мае свае недахопы. Калі CSS падвядзення трэба для дакладнага плана. Таму важна, каб запрасіць толькі адзін CSS файл, які павінен быць аб'яднаны ў магчыма шмат файлаў. Але гэта таксама азначае, што вы тады lädtst на CSS старонцы часта задаваных пытанняў на старонцы каманды. У рэшце рэшт, можа быць, вы так толькі адзін файл, але мноства залішняй інфармацыі.

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

Тым ня менш, суб'ект «Запыт мяжа» неўзабаве будзе састарэлым, так як HTTP / 2 знаходзіцца ў зыходных блоках. Такім чынам, групоўка CSS і JavaScript файлаў больш не з'яўляецца неабходнай, бо ліміт запытаў больш не актуальны. Такім чынам, вышэй апісана аптымізацыйных падыход аднаўляецца. Цяпер ваш сервер павінен падаць у лепшым выпадку меншага маштабу файлы даступныя, таму што яны ўтрымліваюць значна менш залішняй інфармацыі. Так што гэта на самай справе выкарыстоўваецца на гэтай старонцы толькі CSS.

Для гэтага, але ваш сервер і браўзэр вашага сайта членам павінен разумець, HTTP / 2. Сучасныя браўзэры могуць у апошніх версіях. На баку сервера, які ў цяперашні час можна ў Германіі, але толькі ў некалькіх хостеров. Гэта таксама таму, што канчатковая спецыфікацыя для HTTP / 2 на сённяшні дзень няма. Ён кажа , што ў многіх месцах: Пачакайце.

На шчасце, Google разумее ўжо HTTP / 2. А для старых браўзэраў HTTP / 2 з'яўляецца цалкам назад сумяшчальным.

4. Пазбягайце непатрэбных шмат пераадрасацыі

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

Вось прыклад:

Блог 121WATT быў першапачаткова пад 121watt.de/blog быў тады blog.121watt.de пераехаў, а затым вярнуцца праз некалькі гадоў на 121watt.de/blog бегчы. У якой - то момант мы затым ўводзяць па пратаколе HTTPS , што нашы адрасы ў пратаколе да ліста «s» Advanced.

Ужо ў нас ёсць для старой, але ўсё яшчэ існуючы блог адпраўляць тры рэдырэкт, каб выклікаць час сервера.

Проціяддзе называецца «дакументацыяй». Поўныя, добрасумленныя і добра прасочвацца дакументацыі. Што наогул добрая ідэя працуе вэб-сайт, які з'яўляецца неабходным для аптымізацыі старонкі хуткасці ў тэрмінах пераадрасацыі.

І, як вы ліквідаваць такую ​​спасылку тармазы? Гэта не цяжка, у рэшце рэшт. Прыкаваная перасылка вы можаце быць абыдзены тэхнічнымі, што вы прымаеце ярлык. Арыгінальная спасылка на бягучую спасылку. Для таго, каб захаваць нашы зваротныя спасылкі з любога папярэдняга URL, але вы павінны паказаць кожны з гэтых URL-адрасоў непасрэдна да бягучай спасылцы.

5. Загрузка змесціва з дапамогай AJAX з дапамогай

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

Гэта можа быць шмат кода ніколі не вяртацца туды. Да прыкладу, у нашы старонкі семінара ,

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

Для мэт аптымізацыі Page Speed ​​цяпер так заўсёды можна спампаваць толькі ўтрыманне ў залежнасці ад становішча пракруткі, якое будзе адлюстроўвацца побач з дапамогай AJAX.

Найбольш распаўсюджаным прыкладам і з'яўляецца піянерам у гэтай галіне была Pinterest , Вось гэта было практычна немагчыма загрузіць усе паведамленні на тэму ў той час. Такім чынам, кожны наступныя пункты былі перагружаны, калі пракруціў гледача адзін бок да самага канца. Buzzwort: Inifnite прагорткі.

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

На смартфонах, перазарадка праз AJAX стаіць на шляху, у прыватнасці. Нават пры нармальных доўгіх бакоў. Паколькі дысплеі настолькі вузкія, што нават кароткія старонкі могуць быць вельмі доўгія старонкі хутка.

6. Сціск CSS і JavaScript

Кожны CSS, HTML або JS файл, які называецца павінен быць загружаны. Чым менш яна, тым хутчэй ён ідзе. Пры сціску вы можаце паменшыць аб'ём дадзеных.

Лепш за ўсё гэта зрабіць з дапамогай захавання знакаў. Кароткі код займае менш месцы, чым доўгі код. Такім чынам, у minifiziertem кода ўсе каментары, усе парывы ​​радкоў і большасць прабелы выдаляюцца.

Вядома, гэта не чалавек ўручную. Знаходлівы распрацоўшчык інтэрфейс пакідае адзін TaskRunner. Гэтыя наборы інструментаў, такіх як рохкаць , глытанне або Webpack прапануе шмат магчымасцяў для аўтаматызацыі паўтаральных задач у працэсе распрацоўкі. Акрамя ўсяго іншага, проста сціснуць JavaScript і CSS.

Тут вы бачыце, якое ўздзеянне сціску на файл JS.

У гэтым прыкладзе, памер файла нашага файла JavaScript можа быць паменшаны на 25%. Для вялікіх файлаў, працэнт эканоміі можа быць яшчэ вышэй. У той час як я пішу гэта, наш распрацоўшчык Роберт minifiziert на 238 кб JS файл 35 кб. Гэта адпавядае зніжэння больш чым на 85%.

У JavaScript вы можаце выразаць за імёны зменных. Самы кароткі назву натуральна лічба. Але гэта можа быць запраграмавана дрэнна. Кажучы зменныя заўсёды лепшы выбар.

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

7. З дапамогай GZIP сціску

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

Ўключэнне GZIP на вэб-серверах фактычна стандартам. Тым не менш, гэта добрая ідэя, каб праверыць, калі метад сціску сапраўды актывуецца, тым самым спрыяючы аптымізацыі Page Speed.

Даведайцеся больш пра актывацыя GZip ,

8. Старонка аптымізацыі хуткасці асінхроннай загрузкі

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

Пазіцыянаванне CSS і JS файлаў у HTML быў, такім чынам, таксама вызначаецца асаблівасцямі доўгатэрміновай сінхроннай загрузкі: CSS у <HEAD>, JS ў канцы <цела>.

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

Javascript і CSS, але вы таксама можаце загрузіць асінхронна. Перад тым, як у глыбіні Крытычны шлях Rendering схадзіць, я растлумачу коратка, чаму вы павінны загрузіць асінхронна асабліва JavaScript.

Асінхронная загрузка JavaScript

У асінхроннай загрузцы JavaScript, гэта не мае значэння, ці з'яўляецца вашыя файлы JS можна знайсці уверх і ўніз ў HTML.

Чаму?

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

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

Дадатковыя HTTP запытаў 9. Выкарыстоўвайце поддомены

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

Вы можаце выкарыстоўваць CSS і таму JS файлы будуць загружаныя з аднаго або некалькіх субдоменов. Чаму?

Дапусцім, што ваш сайт складаецца з 28 файлаў. HTML, CSS, JS і розныя малюнкі. Выкажам здагадку для прастаты працягваецца, гэтыя файлы аднолькавага памеру. Напрыклад, 15 кб.

Калі ўсе 28 файлаў на асноўным дамене, то браўзэр вашага наведвальніка можа загрузіць іх у чатыры этапы: 8, 8, 8, чацвёртым

Будзе ці загрузіць файл за 50 мілісекунд, то файлы будуць тэарэтычна зараджацца ў працягу 200 мілісекунд.

Калі ўсе файлы размеркаваны на ваш асноўны дамен і 3 подобластей браўзэра вашага наведвальніка можа адначасова атрымаць 28 запытаў. Тэарэтычнае час загрузкі для ўсіх 28 файлаў цяпер: 50 мілісекунд.

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

Часам гэта дапамагае змясціць усе фатаграфіі на дамене bilder.deinedomain.de. JavaScript і CSS павінны быць у большасці выпадкаў толькі ў выглядзе файла.

Усё гэта не ставіцца да HTTP / 2. Для не здесь запыты на дамен больш не абмежаваныя.

10. Аптымізацыя хуткасці старонкі з дапамогай выкарыстання сеткі дастаўкі кантэнту (CDN)

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

Перавагай з'яўляецца адзін у эканоміі HTTP запытаў на ваш сервер. На іншым працоўным CDNs рэгіянальнага. Такім чынам, калі кліент нагрузак пунктаў у Германіі, яны загружаюцца з сайта ў Германіі, а не ў ЗША або на Філіпінах. Такім чынам, хуткасць павялічваецца з-за больш кароткія шляху перадачы зноў.

Ёсць шмат правайдэра CDN. Для малых і буйных праектаў. Затым яны, адпаведна, танна ці дорага.

Калі мы выкарыстоўваем 121WATT MaxCDN ,

Ці атрымалі вы галодныя для больш SEO? Тады вы знойдзеце нашы наступныя даты для нашай структуры SEO або SEO тэхнічнага семінара:

11. Паляпшэнне час водгуку вашага сервера

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

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

І як хутка «хутка»? Google запісвае ў Page Speed ​​Insights, што значэнне павінна быць ніжэй за 200 мс , Толькі тады бот Google наведаў гэты URL таксама пастаянна і рэгулярна.

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

Прытуліцца тут лёгка і выбраць другі варыянт, калі вы можаце.

Іншыя парады на працягу больш кароткага часу водгуку праверыць гэтую артыкул ,

12. Пазбягайце Bad Просьбы

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

Вы можаце лёгка выправіць, у якім вы, адсутнасць запытаных файлаў:

1. Адсутны файл перапытаў даступны там, дзе ён быў першапачаткова
2. weiterleitest на новае імя файла або месца, дзе файл зараз можна знайсці

У вас ёсць запыты ванны, але як толькі раскрыць. Для гэтага вы можаце зноў выкарыстоўваць Якія крычаць жабы ,

404 на сайце, якія былі выяўленыя ў крычала Frog

13. Выкарыстанне CSS3 замест графічных кнопак, абразкоў і фонавым

Так - гэта рада стары. Але вы не ведаеце, як часта ён па-ранейшаму ігнаруецца.

Некалькі гадоў таму былі быць графікам, укаранёны як малюнкі, так PNG або JPG ў вэбе-сайтах. Акрамя таго, што адзін Horribly метады, такія як рассоўныя дзверы прыйшлося звярнуцца, каб стварыць кнопкі, якія мелі дынамічны дыяпазон, заўсёды малюнка загружаюцца.

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

Хутчэй і больш элегантнай, каб стварыць усе графічныя элементы, якія не з'яўляюцца ні адной фатаграфіі, праз CSS. Класікі з'яўляюцца кнопкамі. Калі яны вырабляюцца ў CSS3, яны складаюцца толькі з вельмі нямногіх радкоў кода.

У дадатак да эканоміі часу зарада з'яўляюцца графікі, якія былі створаны з выкарыстаннем CSS, вядома knackscharf ўсюды. Калі на звычайным маніторы, які з'яўляецца 72 dpi або на сятчатцы дысплей з 220 кропак на цалю.

14. Выкарыстанне малюнкаў з правільнымі памерамі

Памеры малюнка заўсёды павінны быць вымераныя пры найбольшым прадстаўленні адпаведных экранаў на вашым боку. Давайце казаць аб адаптыўным дызайне, у якім малюнак на працоўным стале 1000px х 1000px паказана, на тэлефоне, але значна менш, таму малюнак павінна быць яшчэ ў 1000px х 1000px.

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

Вы таксама можаце выкарыстоўваць элемент <малюнак> а. Гэты элемент HTML5 дазваляе прапанаваць розныя варыянты выявы. Гэтыя версіі заснаваныя на розных памераў акна прагляду, што вы самі можаце вызначыць:

15. Выкарыстоўвайце правільны фармат для малюнкаў

У прынцыпе, толькі тры фарматы файлаў для малюнкаў на вэб-сайтах адпаведных: .jpg, .png і .gif. Але тое, што вы павінны выкарыстоўваць якія?

правіла:

• .jpg для фатаграфій і фонавых малюнкаў
• PNG, GIF ці SVG графікі для макета

Але PNG гэта не тое ж PNG. У большасці выпадкаў PNG-8 з'яўляецца добрым выбарам, так як гэты фармат спалучае ў сабе вельмі маленькі памер файла, пры гэтым большасць дастатковай каляровага спектру.

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

16. Паменшыць інфармацыю для фатаграфій

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

Графічны можа быць так сціснутыя, як і ў Photoshop да прымальнага ўзроўню, каб пасля зноў праз інструмент, як kraken.io або PNGGauntlet павінны быць вызваленыя ад далейшых залішніх элементаў.

17. Выдаліць EXIF ​​дадзеныя і мета-тэгі

Большасць фатаграфій ўтрымліваюць мета-інфармацыю, як EXIF ​​і мета-тэгаў. Гэтая інфармацыя займае месца і прапанова на сайце не дадае каштоўнасці. Дык куды ставіць? Правільна: у смецце. Дапамагае нам, напрыклад, вэб-службы tinypng ,

18. Падумайце, першым вашым мабільным карыстальнікам

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

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

Калі вы думаеце пра гэтых людзей, вы разумееце, што хуткасць павінна быць вашай асноўнай мэтай. Для вас павольна, ваш сайт не для мабільных прылад. Калі гэта не для мабільных прылад, Google не лічыць гэта ў мабільным тэлефоне (!) Пошук у індэксацыі годнага. магчыма, больш чым 50% вашых кліентаў лёгка страціць - і вы ідзяце - у залежнасці ад галіны.

Святло на наступны ўзровень

аптымізацыя Page Speed ​​ня ракетабудавання, нягледзячы на ​​гэты загаловак. У рэшце рэшт, гэта амаль заўсёды аб прыцягненні дадзеных на тэрмінал вашага сайта членам як мага хутчэй.

Цяпер вы ведаеце, адносіны і найбольш эфектыўныя спосабы, каб зрабіць ваш сайт хутчэй і даставіць так карыстальнік і машыну, чаго яны хочуць: Хуткасць!

Хіба я нешта забыўся? У Вас ёсць пытанні? Ці бачыце вы што-небудзь іншае? Выкарыстоўвайце наш каментар функцыю, каб увайсці ў кантакт са мной.