Чек-лист проверки фронтенда

По дан­ному списку можно про­ве­рить фрон­тенд сайта или веб-при­ло­же­ния для выяв­ле­ния и после­ду­ю­щего исправ­ле­ния оши­бок или недочётов.

• Сайт нор­мально отоб­ра­жа­ется в бра­у­зе­рах? Для быст­рого теста — новый Chrome, новый Firefox, IE8 (если есть в ТЗ) и IE11, бра­у­зер в iOS. Пол­ный тест — согласно ТЗ.
• Нужны ли все под­клю­ча­е­мые скрипты и сти­ли? Если нет — убрать лиш­нее, так как это уве­ли­чи­вает время загрузки сай­та.
• Можно ли что-то загру­жать не бло­ки­руя отри­сов­ку? Если да, то пере­не­сти загрузку «на потом».
• Timeline загрузки адекватен? Оптимизировать после­до­ва­тель­ность при необ­хо­ди­мо­сти.
• Раз­мер стра­ницы со всеми ресур­сами адекватен? Если нет, то выявить при­чины и устра­нить их (боль­шие изоб­ра­же­ния, лиш­ние ресурсы и про­чее), как мини­мум, стоит отло­жить «тяже­лую» загрузку на «после отри­совки» или сде­лать её «по тре­бо­ва­нию».
• HTML вали­ден? Если нет, то испра­вить. Как пра­ви­ло, вали­да­то­ром можно «отло­вить» реаль­ные ошибки — неза­кры­тые теги, напри­мер.
• В HTML исполь­зу­ется семан­тич­ная раз­мет­ка? Должны быть как мини­мум теги заго­лов­ков h1, h2 и т.д. Если нет, то испра­вить.
• HTML мини­ми­зи­ро­ван? Это не особо кри­тич­но, но всё же полез­но.
• Под­клю­чен­ные стили CSS мини­ми­зи­ро­ва­ны? Если нет, то мини­ми­зи­ро­вать, напри­мер, при помощи YUI Compressor. Можно также опти­ми­зи­ро­вать, напри­мер, при помощи CSSO.
• Вывод кон­соли веб-раз­ра­бот­чика чистый? Если нет, то убрать логи и устра­нить ошиб­ки.
• Ошибки при загрузке ресур­сов есть? Обра­ще­ние к несу­ще­ству­ю­щим фай­лам надо убрать.
• Под­клю­чен­ные JS мини­ми­зи­ро­ва­ны? Если нет — мини­ми­зи­ро­вать, а лучше еще и опти­ми­зи­ро­вать (обфу­ци­ро­вать). Напри­мер, при помощи YUI Compressor или UglifyJS. После опти­ми­за­ции обя­за­тельно про­ве­рить рабо­то­спо­соб­но­сть.
• Изоб­ра­же­ния опти­ми­зи­ро­ва­ны? Если нет — опти­ми­зи­ро­вать без потерь: каче­ство не постра­да­ет, а ско­рость загрузки уве­ли­чит­ся.
• Изоб­ра­же­ния исполь­зу­ются в адек­ват­ном раз­ме­ре? Если для отоб­ра­же­ния изоб­ра­же­ний в неболь­шом раз­мере исполь­зу­ются пол­но­раз­мер­ные фай­лы, то это надо испра­вить. Исклю­че­ние — очень высо­кая веро­ят­ность про­смотра поль­зо­ва­те­лем пол­ного изоб­ра­же­ния.
• Иконки в шриф­тах или в спрай­тах? Или зако­ди­ро­ваны в base64? Если исполь­зу­ется боль­шое коли­че­ство ико­нок, то их раци­о­наль­нее всего гру­зить из одного фай­ла: шрифты и спрайты — отлич­ное реше­ние, аль­тер­на­тива — base64 коди­ро­ва­ние изоб­ра­же­ний в CSS.
• Блоки с фоно­вым изоб­ра­же­нием имеют залив­ку? Блоки с фоно­вым изоб­ра­же­нием должны иметь задан­ный цвет фона, соот­вет­ству­ю­щий изображению. Иначе воз­ни­кает непри­ят­ный эффект при загрузке инвер­си­ро­ван­ных бло­ков — белый текст на стан­дарт­ном белом фоне не чита­ет­ся.
• Раз­мер изоб­ра­же­ний указан? Если нет, то ука­зать (по воз­мож­но­сти). Это поз­во­ляет избе­жать «скач­ков» при загрузке стра­ницы.
• Под­стройка под раз­ре­ше­ние экрана есть? Если нет, то жела­тельно реа­ли­зо­вать при помощи CSS Media Queries. Сто­ит, как мини­мум, адап­ти­ро­вать кон­тролы и раз­мер тек­ста под исполь­зо­ва­ние в мобиль­ных бра­у­зерах.
• Нави­га­ция «завя­зана» на наве­де­ние курсора? Исключить, так как на мобиль­ных устрой­ствах с touch-интер­фей­сом это вызы­вает про­бле­мы.
• Исполь­зу­ются ли пла­гины (Flash, напри­мер)? Лучше отка­заться от них, при невоз­мож­но­сти — предо­ста­вить «заме­ни­тели» для бра­у­зеров без этих пла­ги­нов.
• Что сооб­щает сер­вис Google PageSpeed Insights? Учесть рекомендации.