Настройка и оптимизация на статични сайтове
Основният критерий за отличната работа на сайта от гледна точка на потребителя е, разбира се, скоростта на зареждане на компонентите. Ако сайтът се зарежда твърде дълго по една или друга причина, това неминуемо води до загуба на посетители, които се уморяват от чакане. За да направите сайта бърз и удобен, трябва да поработите върху неговата оптимизация.
По-долу ще дадем редица препоръки, с които можете да увеличите скоростта на статичен сайт, хостван в нашето хранилище.
Съвет 1. Използвайте силата на CDN
Вече писахме за свързване с нашето CDN облачно хранилище от Akamai. CDN съхранява цялото статично съдържание (изображения, текстови файлове, JS, CSS и т.н.) на кеширащи сървъри, разпръснати по целия свят (вижте картата тук).
При достъп до уеб страница или нейните ресурси, заявката ще бъде обработена от географски най-близкия кеширащ сървър до клиента. Използването на CDN помага да се увеличи скоростта на зареждане на уебсайта както за настолни, така и за мобилни устройства.
По подразбиране всички данни се кешират в CDN за 24 часа. Наскоро към хранилището беше добавена нова функция, с която можете да изчистите кеша на CDN по всяко време:
Съвет 2. Не забравяйте вашите настройки за кеширане
Всяка уеб страница включва много различни елементи: изображения, скриптове, стилови файлове и т.н. Потребителят, който посещава страницата за първи път, получава всички тези елементи чрез поредица от HTTP заявки. За да се избегне повторно изтегляне на голям брой файлове, се използва кеширане.
Моделът на кеширане, използван в HTTP протокола, се основава на така наречените валидатори - специални хедъри, използвани от клиента, за дауверете се, че кешираният документ все още е актуален. Благодарение на валидаторите, клиентът може да провери състоянието на документа, без да предава цялото кеширано копие на сървъра. На свой ред сървърът изпраща документ в отговор само ако валидаторът, който получава, показва, че клиентът има остаряло копие в кеша на клиента.
Валидаторите се делят на силни и слаби. Силни валидатори се появиха в HTTP/1.1. Те са наречени така, защото се променят при всяка промяна на файла. Те включват така наречените ETags (entity tags). ETag е идентификатор на съдържанието на документ; променя се, ако поне един бит се промени в документа. Като идентификатор може да се използва например сумата MD5 на съдържанието на документа. Когато клиент поиска документ от сървъра, стойността на ETag се предава в отговора, например:
Когато същият документ бъде поискан отново, запазената стойност на валидатора вече е предадена в заглавката If-None-Match:
Ако документът не е бил модифициран, сървърът ще върне само заглавки и код 304 Not Modified в отговора. В противен случай сървърът ще върне код 200 и ще предаде новата версия на документа, както и новата стойност на ETag за него.
В нашето хранилище и ETag се генерира веднага след качването на файла. Това е MD5 хеш на съдържанието. Ако съдържанието се промени, тогава ETag също се променя.
Слабите валидатори са тези, които не се променят непременно при всяка промяна на файла.
Пример за слаб валидатор е заглавката Last-Modified. Стойността на тази заглавка е датата на последната промяна на файла. В нашето хранилище той се инсталира автоматично. Ако посочите дата в заглавката If-Modified-Since не по-рано от тази, която в момента се съдържа в заглавката Last-Modified, тогаваотговорът също ще бъде 304 Not Modified.
Силните валидатори могат да се използват във всеки контекст. Слабите валидатори се използват в контекст, който не зависи от точното съдържание на файла.
Например и двата вида валидатори могат да се използват в GET заявки с условие (Ако е променено от или Ако не съвпада). Въпреки това, когато изтегляте файлове на части, могат да се използват само силни валидатори - в противен случай клиентът ще получи файла в непоследователна форма.
Съвет 3: Обърнете внимание на заглавката Cache-Control
Заглавката Cache-Control с директивата max-age се използва за задаване на времето за кеширане на браузъра за копие на файл, чийто оригинал е в хранилището. Благодарение на този хедър можете значително да увеличите скоростта на зареждане на сайта - ако файлът е кеширан, браузърът незабавно ще покаже съдържанието от кеша, без да прави нито една заявка към сайта. Времето за съхранение на файла в кеша е определено в секунди:
В показания пример това е 7200 секунди (2 часа). Обикновено CSS, JS и файловете с изображения се кешират по този начин. Желателно е да ги кеширате завинаги и когато съдържанието се промени, променете връзките към тях в HTML. RFC 2616 препоръчва такива файлове да бъдат кеширани за не повече от 1 година:
Ако искате конкретен файл да не се кешира, а винаги да се връща „свеж“, заглавката Cache-Control се задава на следната стойност:
Това указва, че елементът изобщо не трябва да се кешира и че клиентът трябва да го изисква всеки път, когато има достъп до магазина (времето за изтегляне на файла ще се увеличи в този случай, тъй като тялото на файла ще трябва да бъде изтеглено).
Друг начин винаги да актуализирате файл е да добавите към името на файлаконтролна сума на съдържанието.
Можете да получите контролната сума или с помощта на стандартните помощни програми md5sum или sha1sum, или с помощта на специални помощни програми.
За HTML страници е за предпочитане да настроите заглавката Cache-Control на no-cache. Ако трябва спешно да промените нещо на страницата и клиентът вече е кеширал тази страница (съвременните браузъри правят това по подразбиране), тогава клиентът може изобщо да не види промените.
Това е особено важно при използване на CDN: CDN на Akamai кешира файлове без подходящи заглавки за 24 часа по подразбиране. Можете, разбира се, да изчистите кеша (вижте по-горе), но все пак ще трябва да изчакате поне 15 минути след изпращане на съответната заявка. Задаването на стойността без кеширане ще помогне да се избегнат възможни проблеми - страницата винаги ще се зарежда актуална. Браузърите в този случай ще продължат да използват заглавките If-None-Match (или If-Modified-Since) и страницата, която не е била променена, няма да бъде презаредена.
В някои случаи е по-добре да посочите времето за кеширане на HTML страници въз основа на честотата на промените. Например, ако страницата с новини на сайта се актуализира на всеки час, тогава максималната възраст може да бъде зададена на 3600 (1 час).
Стойността на заглавката Cache-Control (както и други HTTP заглавки) в нашия магазин може да бъде зададена чрез уеб интерфейса:
Чрез уеб интерфейса стойностите на заглавките се задават само за контейнера като цяло. Стойностите на заглавките за отделни файлове могат да се задават само чрез API или клиенти на трети страни.
Можете да използвате заглавката Expires вместо Cache-Control. Стойността му показва датата във формата за дата RFC 1123, след което файлът вече не е подходящ (например: вторник, 31 януари 2012 г.15:02:53 GMT). До тази дата браузърът няма да прави заявки към сайта, а ще получава файла от кеша. След тази дата файлът ще бъде качен отново.
Съвет 4 Използвайте gzip компресия
С помощта на компресия можете значително да ускорите зареждането на сайта. Започвайки с HTTP/1.1, клиентите отчитат поддържаните методи за компресиране в заглавката Accept-Encoding:
В отговора на сървъра информацията за използвания метод на компресия се предава в заглавката Content-Encoding:
Един от най-популярните и най-използваните методи днес е, разбира се, gzip. С него можете значително да намалите времето за изтегляне. Gzip работи особено добре с текстови файлове: HTML, CSS, JS. Благодарение на компресията размерът на текстовите файлове (и съответно количеството на предавания трафик) намалява средно 5-10 пъти. Това ви позволява значително да увеличите скоростта на зареждане на страницата, което е особено важно за мобилни клиенти с бавна връзка.
Няма смисъл да се използва gzip за графични файлове: компресията не намалява значително размера им, а често дори го увеличава.
Akamai CDN използва gzip за повечето текстови файлове по подразбиране.
Съвет 5: Минимизирайте JS и CSS
Минимизирането е премахването на допълнителни / незадължителни знаци от файл, за да се намали неговият размер и времето за изтегляне. Поради това размерът на файла се намалява средно 1,5-3 пъти. Днес практиката за минимизиране не само на JS и CSS, но и на други видове файлове (HTML, графични файлове и др.) става широко разпространена.
Използвайки минимизиране, можете не само да премахвате незначителни интервали и прекъсвания на редове (в CSS и JS те не са задължителни), но и да извършвате по-сложни операции. Например в JS функция като:
Съвет 6Използвайте конкатенация
Съвременните браузъри правят средно по 6 едновременни заявки на домейн. Ако даден сайт съдържа много малки файлове, може да отнеме повече време за зареждане, особено при бавна или нестабилна връзка.
Тук може да помогне конкатенацията - комбиниране на няколко файла от един и същи тип (например JS или CSS) в един. Тя ви позволява да намалите броя на заявките и по този начин да увеличите скоростта на зареждане на страницата.
Конкатенацията може да се използва и за ускоряване на зареждането на изображението. Това може да стане по два начина: чрез вграждане на данни в URL адреса и чрез използване на спрайтове.
Данните се вграждат с помощта на специален вид URL — данни: URI. URI (Universal Resource Identifator) може да се използва както в атрибута src на етикета img, така и в URL адреса на фоновото изображение в CSS.
Има онлайн инструменти за конвертиране на изображения в data:URI (вижте например тук и тук).
Спрайтът е колекция от изображения, комбинирани в едно изображение. За създаване на уебсайтове се използват различни софтуерни инструменти. Използвайки CSS, можете да получите достъп до необходимия раздел на голямо изображение и да го поставите на правилното място в сайта.
Спрайтовете помагат за ускоряване на зареждането, но трябва да се отбележи, че работата с тях често е трудна. За да направите дори малка промяна в спрайт, ще трябва да направите съпътстваща промяна в CSS.
В съвременните инструменти за изграждане на JS проекти (Brunch, Grunt, Gulp и други). процедурите за минимизиране и конкатенация могат да бъдат автоматизирани. За да извършите всички необходими операции с файлове с една команда (включително окончателното разполагане на сървъра), е достатъчно да създадете малък конфигурационен файл, който описваред и свойства на сглобяване.
За тези, които искат да знаят повече
Характеристиките на разработването и конфигурирането на статични сайтове са обширна тема и в следващите публикации определено ще я продължим. За тези, които искат да проучат тази тема по-задълбочено както на теория, така и на практика, ето няколко полезни връзки: