Рэкамендацыі Google па аптымiзацыi хуткасці загрузкі сайтаў - Студыя «Т-Дызайн»

1. Пазбягайце памылковых запытаў
2. Пазбягайце метадаў «@import»
3. Аб'ядноўвайце CSS-файлы
4. Пазбягайце функцыі «document.write» у HTML
5. Аб'ядноўвайце знешнія JS-файлы
6. Аб'ядноўвайце выявы ў CSS-спрайты
7. Адкладайце загрузку JavaScript
8. Чаму важна адкладаць загрузку скрыптоў?
9. Уключыце сціск Gzip
10. Уключыце функцыю «keep-alive»
11. Ўбудавальных невялікія фрагмэнты CSS
12. Ўбудавальных невялікія фрагменты JavaScript
13. выкарыстоўвайце кэшаванне
14. Мінімізуе CSS-код
15. Мінімізуе DNS-запыты
16. мінімізуе рэдырэкты
17. Аптымізуе парадак выкліку стыляў і скрыптоў
18. Выкарыстоўвайце малюнка правільных памераў
19. Прыклад з асабістага досведу
20. Выкарыстоўвайце файл .htaccess

Галоўная → Пыталіся? →

Хуткасць загрузкі старонак вашага сайта - вельмі важны параметр не толькі для яго наведвальнікаў, але і для пошукавых сістэм. Па хуткасці загрузкі пошукавік можа судзіць пра якасць сайта. Выкананне разгледжаных у артыкуле рэкамендацый магчыма як на этапе стварэння вэб сайта, так і ў працэсе яго далейшага абслугоўвання. Тэхнічная падтрымка сайта пасля яго распрацоўкі з'яўляецца той задачай, да якой неабходна ставіцца з усёй адказнасцю і не грэбаваць ёю. Разгледзім рэкамендацыі ад Google, закліканыя аптымізаваць (паменшыць) хуткасць загрузкі вашага сайта.

Такім чынам, прыступім:

Пазбягайце памылковых запытаў

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

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

Вельмі важна кантраляваць хуткасць загрузкі старонкі і адсочваць звароты да неіснуючых рэсурсаў!

Пазбягайце метадаў «@import»

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

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

@import url ( "style.css")

Замяніць іх неабходна на прамое падключэнне стыляў у HTML-кодзе:

<Link rel = "style.css" href = "style.css" type = "text / css">

Аб'ядноўвайце CSS-файлы

Кожны CSS-файл, які выкарыстоўвае старонка вашага сайта, дадае час і зніжае хуткасць загрузкі старонкі (падлучэнне → загрузка, падлучэнне → загрузка і г.д.). Часам выкарыстанне некалькіх файлаў стыляў непазбежна (напрыклад, у тым выпадку, калі з дызайнам сайта прасцей і мэтазгодней працаваць пры дапамозе некалькіх файлаў), але па магчымасці неабходна аб'ядноўваць іх у адзін файл.

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

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

Пазбягайце функцыі «document.write» у HTML

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

Праверце увесь ваш HTML-код на наяўнасць дырэктыў document.write, якія могуць выглядаць так:

document.write ( '<script src = "script.js"> </ script>');

Замест гэтага выкарыстоўвайце проста падлучэнне вонкавага скрыпту пры дапамозе такога выкліку ў HTML-кодзе старонкі:

<Script src = "script.js«> </ script>

Аб'ядноўвайце знешнія JS-файлы

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

Па аналогіі з аб'яднаннем CSS-файлаў, неабходна аб'ядноўваць і JS-файлы ў адзін (па магчымасці). Якасць выканання прапісаных у іх функцый ад гэтага не пацерпіць, аднак станоўча адаб'ецца на хуткасці загрузкі вэб-старонак.

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

Аб'ядноўвайце выявы ў CSS-спрайты

На кожным сайце выкарыстоўваецца вялікая колькасць разнастайных малюнкаў. І для адлюстравання кожнага з іх вэб-браўзэр перадае па адным запыце, у адказ на якіх сервер «аддае", адпаведную малюнак.

Колькасць зваротаў да сервера і, адпаведна, хуткасць загрузкі старонак можна паменшыць, аб'ядноўваючы некалькі малюнкаў у адзін CSS-спрайт (CSS-sprite). Замест загрузкі вялікай колькасці малюнкаў ваш браўзэр зараз будзе загружаць адно! І ў гэтым - хараство CSS-спрайтов! Вядома, гэта ў большай ступені тычыцца аб'яднання некалькіх невялікіх малюнкаў, якія выкарыстоўваюцца ў элементах афармлення WEB-старонкі (фоны меню, смайлы, куты, абразкі і інш.).

У дадзеным выпадку для выкарыстання асобна ўзятага элемента са складу CSS-спрайт спатрэбіцца выклік дадзенага спрайт з наступным указаннем памеру і пазіцыянаваннем неабходнага элемента адносна агульнага памеру CSS-спрайт.

На прыкладзе двух малюнкаў (рупара і смайла), аб'яднаных у адзін спрайт, для адлюстравання рупара напішам наступны CSS-стыль:

.rupor {width: 50px; height: 50px; background: url (images / sprite.png) 0 0px;}

Для смайла стыль будзе выглядаць наступным чынам:

.smile {width: 50px; height: 50px; background: url (images / sprite.png) 0 -50px;}

Адпаведныя ім фрагменты HTML-кода будуць такімі:

Для рупара:

<Div class = "rupor"> </ div>

І для смайла:

<Div class = "smile"> </ div>

Адкладайце загрузку JavaScript

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

Толькі пазначанае ніжэй рашэнне дазволіць загружаць знешні скрыпт ТОЛЬКІ пасля поўнай загрузкі старонкі і не выкліча папярэджанне «Defer loading of javascript» у інструментах для вэб-майстроў ад Google. Вось ён, рэкамендуемы Google, метад:

<Script type = "text / javascript">
function downloadJSAtOnload () {
var element = document.createElement ( "script");
element.src = "script.js";
document.body.appendChild (element);
}
if (window.addEventListener)
window.addEventListener ( "load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent ( "onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</ Script & gt

Дадзены код «кажа» браўзэру аб неабходнасці дачакацца завяршэння поўнай загрузкі старонкі і наступнага выканання скрыпту script.js.

Важна разумець, што нельга змяшчаць ў гэты код якой-небудзь JS-скрыпт, неабходны для правільнай загрузкі старонкі. Неабходна падзяліць усе скрыпты на дзве групы. Першая група - скрыпты для правільнай загрузкі старонкі, другая - скрыпты, выкананне якіх можна адкласці на «пасля загрузкі» (напрыклад, нейкія падзеі ад мышкі і да т.п.). І толькі скрыпты з другой групы магчыма змяшчаць у паказаны код.

Чаму важна адкладаць загрузку скрыптоў?

Ды проста таму што яны істотна ўплываюць на хуткасць загрузкі старонак, якая, у сваю чаргу, з'яўляецца значным фактарам у ранжыраванні старонак пошукавікамі.

Уключыце сціск Gzip

Сціск HTML- і CSS-файлаў пры дапамозе кампрэсіі Gzip можа зэканоміць ад 50 да 70 працэнтаў аб'ёму загружанай з вэб-сервера інфармацыі. Пасля запыту карыстальніка ў такім выпадку сервер будзе перадаваць у адказ сціслы дакумент. А гэта аўтаматычна знізіць нагрузку на сервер і паменшыць час загрузкі старонак вашага web-сайта.

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

Неабходна стварыць файл .htaccess або, калі ён Ужо існуе дадаць у яго Код:,

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file. (html? | txt | css | js | php | pl) $
mod_gzip_item_include handler ^ cgi-script $
mod_gzip_item_include mime ^ text /.*
mod_gzip_item_include mime ^ application / x-javascript. *
mod_gzip_item_exclude mime ^ image /.*
mod_gzip_item_exclude rspheader ^ Content-Encoding:. * gzip. *
</ IfModule>

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

Існуе і яшчэ адзін (і, напэўна, не апошні) варыянт кода для размяшчэння у файле .htaccess, прызначаны для ўключэння кампрэсіі Gzip (такі код мы выкарыстоўваем на сваім сайце)

# Compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text / plain
AddOutputFilterByType DEFLATE text / html
AddOutputFilterByType DEFLATE text / xml
AddOutputFilterByType DEFLATE text / css
AddOutputFilterByType DEFLATE application / xml
AddOutputFilterByType DEFLATE application / xhtml + xml
AddOutputFilterByType DEFLATE application / rss + xml
AddOutputFilterByType DEFLATE application / javascript
AddOutputFilterByType DEFLATE application / x-javascript
# Or, compress certain file types by extension:
SetOutputFilter DEFLATE

Пасля ўключэння Gzip адным з пералічаных вышэй спосабаў вы можаце праверыць ступень сціску старонак вашага сайта. Для гэтага прайдзіце па спасылцы і ўвядзіце адрас сайта ў полі «Web Page URL». Вынік можа быць прыкладна такім:

Звярніце увагу на працэнт сжания - амаль 74%. Пагадзіцеся, гэты досыць сур'ёзнае скарачэнне аб'ёму перадаваных дадзеных.

Уключыце функцыю «keep-alive»

Для адлюстравання вэб-старонак браўзэр павінен пастаянна запампоўваць пэўныя паводле дадзеных з вэб-сервера. У першую чаргу браўзэру перадаецца Файл HTML і дадатковыя дадзеныя (CSS-файлы, малюнкі, скрыпты). Калі функцыя keep-alive не ўключаная, для загрузкі старонкі можа спатрэбіцца шмат часу: для запыту кожнага файла будзе адкрыта сваё сеткавае злучэнне. У выпадку з уключанай функцыяй keep-alive паміж браўзэрам і серверам ствараецца свайго роду «размова», які дзейнічае ў рамках аднаго злучэння.

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

<IfModule mod_headers.c> Header set Connection keep-alive </ ifModule>

Калі ж у вас ёсць доступ да канфігурацыйнага файла Apache-сервера, ўключыць keep-alive можна наступным спосабам:

# KeepAlive: Whether or not to allow persistent connections (more than
# One request per connection). Set to "Off" to deactivate.
KeepAlive On
# MaxKeepAliveRequests: The maximum number of requests to allow
# During a persistent connection. Set to 0 to allow an unlimited amount.
# We recommend you leave this number high, for maximum performance.
MaxKeepAliveRequests 100
# KeepAliveTimeout: Number of seconds to wait for the next request from the
# Same client on the same connection.
KeepAliveTimeout 100

Ўбудавальных невялікія фрагмэнты CSS

Для таго, каб пазбегнуць загрузку лішніх файлаў з невялікімі фрагментамі CSS-стыляў, неабходна ўбудоўваць гэтыя фрагменты непасрэдна ў HTML-код старонак сайта. Загрузка аднаго HTML-файла з укаранёным CSS адбываецца значна хутчэй, чым загрузка двух файлаў (HTML + CSS).

Для гэтага неабходна прапісаць стылі ў раздзел <head> </ head> HTML-кода старонкі наступным чынам:

<Style type = "text / css">
...
</ Style>

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

Ўбудаванне CSS бывае вельмі карысна пры стварэнні загрузных старонак сайта, landing pages і да т.п., калі патрабуецца практычна вокамгненнае іх адлюстраванне.

Ўбудавальных невялікія фрагменты JavaScript

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

Код для ўстаўкі ў HTML выглядае наступным чынам:

<Script type = "text / javascript">
...
</ Script>

выкарыстоўвайце кэшаванне

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

Кэшаванне робіць ваш сайт адназначна хутчэй за кошт адсутнасці неабходнасці шматразовай загрузкі ўжо загружанай раней інфармацыі.

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

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image / jpg "access 1 year"
ExpiresByType image / jpeg »access 1 year"
ExpiresByType image / gif "access 1 year"
ExpiresByType image / png "access 1 year"
ExpiresByType text / css "access 1 month"
ExpiresByType text / html "access 1 month"
ExpiresByType application / pdf "access 1 month"
ExpiresByType text / x-javascript "access 1 month"
ExpiresByType application / x-shockwave-flash "access 1 month"
ExpiresByType image / x-icon "access 1 year"
ExpiresDefault "access 1 month"
</ IfModule>

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

Альтэрнатыўны код для ўключэння кэшавання праз файл .htaccess:

# Кэшаваць html і htm файлы на 6-й гадзіне
<FilesMatch ". (Html ​​| htm) $">
Header set Cache-Control "max-age = 21600"
</ FilesMatch>
# Кэшаваць css, javascript і тэкставыя файлы на адзін тыдзень
<FilesMatch ". (Js | css | txt) $">
Header set Cache-Control "max-age = 604800"
</ FilesMatch>
# Кэшаваць флэш і малюнкі на месяц
<FilesMatch ". (Flv | swf | ico | gif | jpg | jpeg | png) $">
Header set Cache-Control "max-age = 2592000"
</ FilesMatch>
# Адключыць кэшаванне для выкананых файлаў
<FilesMatch ". (Pl | php | cgi | spl | scgi | fcgi) $">
Header unset Cache-Control
</ FilesMatch>

У другім прыкладзе час кэшавання max-age задаецца ў секундах.

Мінімізуе CSS-код

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

Патлумачым на прыкладах што азначае тэрмін «мінімізацыя CSS».

«Звычайны» CSS -код можа выглядаць так:

body {
background-color: # ff0000;
}
h1 {
color: red;
text-align: right;
}

Такі ж, але мінімізаваць код выглядае наступным чынам:

body {background-color: # ff0000;}
h1 {color: red; text-align: right;}

I гэта яшчэ не ўсё. Калі падыходзіць да мінімізацыі зусім «сурова», то можна адмовіцца ад пераносаў на новы радок (2 байта эканоміі на кожным пераносе) і не дадаваць кропку з коскі ў канцы кожнага стылю (1 байт эканоміі на кожнай кропцы з коскі).

Памяншаючы код такім чынам, можна істотна зэканоміць на яго аб'ёме і значна выйграць у хуткасці загрузкі старонак вашага сайта!

Мінімізуе DNS-запыты

З кожным днём старонкі нашых сайтаў становяцца ўсё больш тэхнічна дасканалымі і функцыянальнымі, але з-за гэтага больш павольнымі. Дадаюцца звароту да дадатковых серверам, інструментам статыстыкі, шрыфтам, сацыяльным кнопак і да т.п. І ў працэсе загрузкі вашай вэб-старонкі інтэрнэт-браўзэр звяртаецца да дадатковых хастам за неабходнай інфармацыяй (ажыццяўляе дадатковыя DNS-запыты). Нават вельмі хуткая старонка сайта, загружаная за долі секунд, можа стаць вельмі павольнай з-за дапаможных зваротаў да знешніх рэсурсаў.

Адным з яркіх прыкладаў такіх зваротаў могуць служыць кнопкі сацыяльных сетак (Аднакласнікі, Вконтакте, Facebook, Twitter, Google+ і г.д.): пры іх фарміраванні на вашым сайце адбываюцца звароту да знешніх сайтаў. Іншы прыклад - выкарыстанне (падключэнне) Google Web Fonts. Кожны шрыфт патрабуе выкарыстаньне двух DNS-запытаў.

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

мінімізуе рэдырэкты

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

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

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

Пры выкарыстанні рэдырэкт прытрымвайцеся простых правілаў:

• Ніколі не рабіце спасылку на старонку, калі вы ведаеце, што на ёй ёсць рэдырэкт;
• Ніколі не рабіце больш аднаго рэдырэкту для дасягнення неабходнага рэсурсу.

Аптымізуе парадак выкліку стыляў і скрыптоў

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

Калі інтэрнэт-браўзэр загружае старонках, ён чытае HTML-код І пачынае паслядоўна выклікаць рэсурсы, Якія пазначаны Ў кодзе (CSS-стылі, скрыпты, малюнкі І г.д.). Калі браўзэр пачынае загружаць скрыпт, ён спыняе загрузку чаго-небудзь Яшчэ ды Таго гадзіне, Пакуль скрыпт ня прачытаны (загружалася) Цалко. Google сцвярджае, што тыповая вэб-старонка праводзіць ад 80 да 90 працэнтаў часу ў чаканні загрузкі з сеткі. Каб мінімізаваць гэты час, неабходна проста правільна размяшчаць выклікі рэсурсаў на старонках і трывання наступных правіл:

• Аб'ядноўвайце некалькі знешніх JavaScript-файлаў у адзін;
• Подключайте знешні CSS-файл перад падключэннем вонкавага JavaScript-файла;
• Не выкарыстоўвайце ўнутраны JavaScript (у HTML-кодзе старонкі) паміж выклікам вонкавага CSS-файла і падключэннем іншых рэсурсаў.

Выкарыстоўвайце малюнка правільных памераў

Вельмі часта на сайтах вэб-майстра не задумваюцца аб правільных памерах малюнкаў: для адлюстравання маленькіх малюнкаў (мініяцюр) часта выкарыстоўваюцца вялікія выявы з прымусовай устаноўкай малых памераў праз параметры width і height.

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

Для правільнага размяшчэння малюнкаў неабходна:

• Выкарыстоўваць выявы патрэбных памераў: пры размяшчэнні на старонцы мініяцюры варта выкарыстоўваць мініяцюры малюнкаў, для вялікіх фатаграфій - выявы адпаведнага памеру;
• Ўказваць дакладныя памеры малюнкаў: у атрыбутах width і height тэга <img> неабходна называць дакладныя малюнкі загружаных малюнкаў. У адваротным выпадку браўзэр можа адлюстраваць іх у скажоным выглядзе;
• Не грэбаваць атрыбутамі width і height: калі вы не паказваеце гэтыя параметры, пры павольнай загрузцы інфармацыя на старонцы можа «скакаць», браўзэр будзе фармаваць старонку не адзін раз, а двойчы ці больш разоў (у залежнасці ад колькасці малюнкаў на старонцы): спачатку браўзэр прачытае і размесціць тэкст без уліку памеру малюнкаў, затым падгрузіць карцінкі, «уклініцца» у тэкст і перамесцяць яго па-іншаму. Калі ж вы загадзя пакажаце браўзэру на памеры малюнкаў, ён ужо будзе ведаць пра адведзенае для іх месца i яму не прыйдзецца памногу раз перакройваць web-старонку.

Прыклад з асабістага досведу

Падчас аўдыту аднаго з нашых «падапечных» сайтаў мы выявілі ну проста гіганцкая малюнак - памерам 4049 × 2699 пікселяў. На старонцы яно прымусова дрыжалі сродкамі браўзэра шляхам ўказанні ёй патрэбных памераў. Зыходны малюнак (заліта чырвоным колерам), акрамя вялізнага памеру, займала 5.74 МБ (6 026 239 байт) на хостынгу. Аптымізаваным малюнак (заліта зялёным колерам) памерам 250 × 167 пікселяў стала «важыць» усяго 10.5 КБ (10 805 байт). Памяншэнне ў 557 (!) Разоў у наяўнасці:

Выкарыстанне гэтых нескладаных правіл дасць вашаму сайту загружацца хутчэй!

Выкарыстоўвайце файл .htaccess

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

На ўсялякі выпадак рэкамендуецца делать рэзервовую копію гэтага файла перад яго змяненнем!

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

Інфармацыю паводле працы з файлам .htaccess вы можаце на адпаведных інтэрнэт-рэсурсах.

Па матэрыялах сайта www.feedthebot.com