Уроки
-
Введение
-
SEO
- Битые ссылки
- Карта сайта
- Семантическая разметка
- Robots.txt
- Ссылки
- Текст
- Дубликаты
- Базовое
- Картинки
-
Скорость
-
Минификация
-
Минификация CSS для сокращения его объёма
Минификация встроенного JavaScript кода страницы
Минификация встроенного CSS кода страницы
Минификация картинок без потери качества
Минификация JavaScript файлов для сокращения его объёма
Неиспользуемый CSS код
Оптимизация data:URL картинок
Формат анимированных изображений MP4, WEBM, SVG вместо GIF и WEBP
Неиспользуемый JavaScript код
Использование WebP формата в изображениях
Слишком качественные картинки без использования сжатия
Подходящий битрейт видео
-
Сокращение запросов
-
Переизбыток маленьких картинок
Группировка CSS файлов
Группировка JavaScript файлов
Переизбыток файлов шрифтов
Наличие сквозных CSS, JS файлов
Наличие монохромного шрифта
Загрузка дубликатов файлов
Использование JavaScript фасадов
Перенаправление JavaScript кодом
Добавление ленивой загрузки
Редирект с/на www версию
- Шрифты
-
Время загрузки
-
Допустимый размер HTML кода страницы
Время генерации HTML кода
Суммарный размер всех картинок на странице
Время загрузки страницы
Общее время загрузки страницы.
Время отображения первой графики
Оптимальное время загрузки файлов с сервера
Время загрузки файлов с сервера под нагрузкой
Блокирующие файлы
- Настройки сервера
- Картинки
-
Первое содержимое
-
Последовательность подключения JavaScript файлов
Режим отображения шрифтов
Настройка предварительного соединения
Удаление ленивой загрузки
Длительное время исполнения JavaScript кода
Загрузка файлов отложено или по востребованию
Сервер размещён в той же стране, где проживают пользователи сайта
Отсутствие запросов в другую страну, вызывающих блокировку загрузки страницы
-
Минификация
-
Мобильность
-
Поддержка экранов
-
Адаптация вёрстки под Full HD монитор компьютера
Адаптация вёрстки под горизонтальный планшет
Адаптация вёрстки под горизонтальный телефон
Скриншоты для мини-отчёта
Как блоки ломают вёрстку страницы
Адаптация вёрстки под HD монитор компьютера
Адаптация вёрстки под вертикальный планшет
Адаптация вёрстки под вертикальный телефон
- Комфорт
-
Поддержка экранов
- Баги
-
Удобство
- Соцсети
- Манифест веб-приложения
- Фавиконы
- Почта
- Базовое
- Читаемость текста
-
Уязвимости
- Шифрованное соединение
- Эксплойты
- Уязвимости
Допустимый размер HTML кода страницы
Открывая любую ссылку в браузере, первое, что получает пользователь — это HTML код страницы. Её большой объём редко когда оправдан. Большие страницы не только долго загружаются, но ещё и требуют много вычислительных ресурсов для отображения. Это замедляет общую загрузку страницы.
Используйте отложенную загрузку. Например, в карточке товара в интернет-магазине рекомендации товаров можно подгружать после загрузки всей страницы. Пользователь увидит их самое раннее через 10 секунд, когда прокрутит страницу. Поэтому нет смысла загружать эти блоки сразу.
Также можно использовать минификатор HTML кода. Он удалит лишние символы вроде лишних пробелов, символов переноса строк, комментарии и т.д. Но их работа может занять продолжительное время, поэтому применяйте их только, если код, который вы оптимизируйте, кешируется.
Старайтесь, чтобы объём HTML кода страницы не превышал 120КБ.
Сравнение времени обработки браузером большой и маленькой HTML страницы:
Демонстрация
PHP код
HTML код
<?php
$mode = $_GET['mode'] ?? '';
?><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.btn {
color: #000;
text-decoration: none;
padding: 5px 10px;
border: 1px solid #000;
border-radius: 5px;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #000;
color: #fff;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
document.querySelector('#page-load').innerHTML = 'Событие DOMContentLoaded выполнилось в <b>'+(performance.now()/1000)+'с</b>.';
});
</script>
</head>
<body style="font-family: sans-serif;">
Режим: <a class="btn <?=$mode === '' ? 'active' : ''?>" href="./over_size_page.php">Файл 1 000 DOM элементов 25 КБ</a> <a class="btn <?=$mode === 'big' ? 'active' : ''?>" href="./over_size_page.php?mode=big">Файл 20 000 DOM элементов 490 КБ</a>
<p id="page-load">Тут отобразится время вызова события DOMContentLoaded</p>
<?php for($i = 0;$i < ($mode === 'big' ? 10000 : 500); ++$i) { ?>
<div><span><?=$i?></span></div>
<?php } ?>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.btn {
color: #000;
text-decoration: none;
padding: 5px 10px;
border: 1px solid #000;
border-radius: 5px;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #000;
color: #fff;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
document.querySelector('#page-load').innerHTML = 'Событие DOMContentLoaded выполнилось в <b>'+(performance.now()/1000)+'с</b>.';
});
</script>
</head>
<body style="font-family: sans-serif;">
Режим: <a class="btn active" href="./over_size_page.php">Файл 1 000 DOM элементов 25 КБ</a> <a class="btn " href="./over_size_page.php?mode=big">Файл 20 000 DOM элементов 490 КБ</a>
<p id="page-load">Тут отобразится время вызова события DOMContentLoaded</p>
<div><span>0</span></div>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
<div><span>12</span></div>
<div><span>13</span></div>
<div><span>14</span></div>
<div><span>15</span></div>
<div><span>16</span></div>
<div><span>17</span></div>
<div><span>18</span></div>
<div><span>19</span></div>
<div><span>20</span></div>
<div><span>21</span></div>
<div><span>22</span></div>
<div><span>23</span></div>
<div><span>24</span></div>
<div><span>25</span></div>
<div><span>26</span></div>
<div><span>27</span></div>
<div><span>28</span></div>
<div><span>29</span></div>
<div><span>30</span></div>
<div><span>31</span></div>
<div><span>32</span></div>
<div><span>33</span></div>
<div><span>34</span></div>
<div><span>35</span></div>
<div><span>36</span></div>
<div><span>37</span></div>
<div><span>38</span></div>
<div><span>39</span></div>
<div><span>40</span></div>
<div><span>41</span></div>
<div><span>42</span></div>
<div><span>43</span></div>
<div><span>44</span></div>
<div><span>45</span></div>
<div><span>46</span></div>
<div><span>47</span></div>
<div><span>48</span></div>
<div><span>49</span></div>
<div><span>50</span></div>
<div><span>51</span></div>
<div><span>52</span></div>
<div><span>53</span></div>
<div><span>54</span></div>
<div><span>55</span></div>
<div><span>56</span></div>
<div><span>57</span></div>
<div><span>58</span></div>
<div><span>59</span></div>
<div><span>60</span></div>
<div><span>61</span></div>
<div><span>62</span></div>
<div><span>63</span></div>
<div><span>64</span></div>
<div><span>65</span></div>
<div><span>66</span></div>
<div><span>67</span></div>
<div><span>68</span></div>
<div><span>69</span></div>
<div><span>70</span></div>
<div><span>71</span></div>
<div><span>72</span></div>
<div><span>73</span></div>
<div><span>74</span></div>
<div><span>75</span></div>
<div><span>76</span></div>
<div><span>77</span></div>
<div><span>78</span></div>
<div><span>79</span></div>
<div><span>80</span></div>
<div><span>81</span></div>
<div><span>82</span></div>
<div><span>83</span></div>
<div><span>84</span></div>
<div><span>85</span></div>
<div><span>86</span></div>
<div><span>87</span></div>
<div><span>88</span></div>
<div><span>89</span></div>
<div><span>90</span></div>
<div><span>91</span></div>
<div><span>92</span></div>
<div><span>93</span></div>
<div><span>94</span></div>
<div><span>95</span></div>
<div><span>96</span></div>
<div><span>97</span></div>
<div><span>98</span></div>
<div><span>99</span></div>
<div><span>100</span></div>
<div><span>101</span></div>
<div><span>102</span></div>
<div><span>103</span></div>
<div><span>104</span></div>
<div><span>105</span></div>
<div><span>106</span></div>
<div><span>107</span></div>
<div><span>108</span></div>
<div><span>109</span></div>
<div><span>110</span></div>
<div><span>111</span></div>
<div><span>112</span></div>
<div><span>113</span></div>
<div><span>114</span></div>
<div><span>115</span></div>
<div><span>116</span></div>
<div><span>117</span></div>
<div><span>118</span></div>
<div><span>119</span></div>
<div><span>120</span></div>
<div><span>121</span></div>
<div><span>122</span></div>
<div><span>123</span></div>
<div><span>124</span></div>
<div><span>125</span></div>
<div><span>126</span></div>
<div><span>127</span></div>
<div><span>128</span></div>
<div><span>129</span></div>
<div><span>130</span></div>
<div><span>131</span></div>
<div><span>132</span></div>
<div><span>133</span></div>
<div><span>134</span></div>
<div><span>135</span></div>
<div><span>136</span></div>
<div><span>137</span></div>
<div><span>138</span></div>
<div><span>139</span></div>
<div><span>140</span></div>
<div><span>141</span></div>
<div><span>142</span></div>
<div><span>143</span></div>
<div><span>144</span></div>
<div><span>145</span></div>
<div><span>146</span></div>
<div><span>147</span></div>
<div><span>148</span></div>
<div><span>149</span></div>
<div><span>150</span></div>
<div><span>151</span></div>
<div><span>152</span></div>
<div><span>153</span></div>
<div><span>154</span></div>
<div><span>155</span></div>
<div><span>156</span></div>
<div><span>157</span></div>
<div><span>158</span></div>
<div><span>159</span></div>
<div><span>160</span></div>
<div><span>161</span></div>
<div><span>162</span></div>
<div><span>163</span></div>
<div><span>164</span></div>
<div><span>165</span></div>
<div><span>166</span></div>
<div><span>167</span></div>
<div><span>168</span></div>
<div><span>169</span></div>
<div><span>170</span></div>
<div><span>171</span></div>
<div><span>172</span></div>
<div><span>173</span></div>
<div><span>174</span></div>
<div><span>175</span></div>
<div><span>176</span></div>
<div><span>177</span></div>
<div><span>178</span></div>
<div><span>179</span></div>
<div><span>180</span></div>
<div><span>181</span></div>
<div><span>182</span></div>
<div><span>183</span></div>
<div><span>184</span></div>
<div><span>185</span></div>
<div><span>186</span></div>
<div><span>187</span></div>
<div><span>188</span></div>
<div><span>189</span></div>
<div><span>190</span></div>
<div><span>191</span></div>
<div><span>192</span></div>
<div><span>193</span></div>
<div><span>194</span></div>
<div><span>195</span></div>
<div><span>196</span></div>
<div><span>197</span></div>
<div><span>198</span></div>
<div><span>199</span></div>
<div><span>200</span></div>
<div><span>201</span></div>
<div><span>202</span></div>
<div><span>203</span></div>
<div><span>204</span></div>
<div><span>205</span></div>
<div><span>206</span></div>
<div><span>207</span></div>
<div><span>208</span></div>
<div><span>209</span></div>
<div><span>210</span></div>
<div><span>211</span></div>
<div><span>212</span></div>
<div><span>213</span></div>
<div><span>214</span></div>
<div><span>215</span></div>
<div><span>216</span></div>
<div><span>217</span></div>
<div><span>218</span></div>
<div><span>219</span></div>
<div><span>220</span></div>
<div><span>221</span></div>
<div><span>222</span></div>
<div><span>223</span></div>
<div><span>224</span></div>
<div><span>225</span></div>
<div><span>226</span></div>
<div><span>227</span></div>
<div><span>228</span></div>
<div><span>229</span></div>
<div><span>230</span></div>
<div><span>231</span></div>
<div><span>232</span></div>
<div><span>233</span></div>
<div><span>234</span></div>
<div><span>235</span></div>
<div><span>236</span></div>
<div><span>237</span></div>
<div><span>238</span></div>
<div><span>239</span></div>
<div><span>240</span></div>
<div><span>241</span></div>
<div><span>242</span></div>
<div><span>243</span></div>
<div><span>244</span></div>
<div><span>245</span></div>
<div><span>246</span></div>
<div><span>247</span></div>
<div><span>248</span></div>
<div><span>249</span></div>
<div><span>250</span></div>
<div><span>251</span></div>
<div><span>252</span></div>
<div><span>253</span></div>
<div><span>254</span></div>
<div><span>255</span></div>
<div><span>256</span></div>
<div><span>257</span></div>
<div><span>258</span></div>
<div><span>259</span></div>
<div><span>260</span></div>
<div><span>261</span></div>
<div><span>262</span></div>
<div><span>263</span></div>
<div><span>264</span></div>
<div><span>265</span></div>
<div><span>266</span></div>
<div><span>267</span></div>
<div><span>268</span></div>
<div><span>269</span></div>
<div><span>270</span></div>
<div><span>271</span></div>
<div><span>272</span></div>
<div><span>273</span></div>
<div><span>274</span></div>
<div><span>275</span></div>
<div><span>276</span></div>
<div><span>277</span></div>
<div><span>278</span></div>
<div><span>279</span></div>
<div><span>280</span></div>
<div><span>281</span></div>
<div><span>282</span></div>
<div><span>283</span></div>
<div><span>284</span></div>
<div><span>285</span></div>
<div><span>286</span></div>
<div><span>287</span></div>
<div><span>288</span></div>
<div><span>289</span></div>
<div><span>290</span></div>
<div><span>291</span></div>
<div><span>292</span></div>
<div><span>293</span></div>
<div><span>294</span></div>
<div><span>295</span></div>
<div><span>296</span></div>
<div><span>297</span></div>
<div><span>298</span></div>
<div><span>299</span></div>
<div><span>300</span></div>
<div><span>301</span></div>
<div><span>302</span></div>
<div><span>303</span></div>
<div><span>304</span></div>
<div><span>305</span></div>
<div><span>306</span></div>
<div><span>307</span></div>
<div><span>308</span></div>
<div><span>309</span></div>
<div><span>310</span></div>
<div><span>311</span></div>
<div><span>312</span></div>
<div><span>313</span></div>
<div><span>314</span></div>
<div><span>315</span></div>
<div><span>316</span></div>
<div><span>317</span></div>
<div><span>318</span></div>
<div><span>319</span></div>
<div><span>320</span></div>
<div><span>321</span></div>
<div><span>322</span></div>
<div><span>323</span></div>
<div><span>324</span></div>
<div><span>325</span></div>
<div><span>326</span></div>
<div><span>327</span></div>
<div><span>328</span></div>
<div><span>329</span></div>
<div><span>330</span></div>
<div><span>331</span></div>
<div><span>332</span></div>
<div><span>333</span></div>
<div><span>334</span></div>
<div><span>335</span></div>
<div><span>336</span></div>
<div><span>337</span></div>
<div><span>338</span></div>
<div><span>339</span></div>
<div><span>340</span></div>
<div><span>341</span></div>
<div><span>342</span></div>
<div><span>343</span></div>
<div><span>344</span></div>
<div><span>345</span></div>
<div><span>346</span></div>
<div><span>347</span></div>
<div><span>348</span></div>
<div><span>349</span></div>
<div><span>350</span></div>
<div><span>351</span></div>
<div><span>352</span></div>
<div><span>353</span></div>
<div><span>354</span></div>
<div><span>355</span></div>
<div><span>356</span></div>
<div><span>357</span></div>
<div><span>358</span></div>
<div><span>359</span></div>
<div><span>360</span></div>
<div><span>361</span></div>
<div><span>362</span></div>
<div><span>363</span></div>
<div><span>364</span></div>
<div><span>365</span></div>
<div><span>366</span></div>
<div><span>367</span></div>
<div><span>368</span></div>
<div><span>369</span></div>
<div><span>370</span></div>
<div><span>371</span></div>
<div><span>372</span></div>
<div><span>373</span></div>
<div><span>374</span></div>
<div><span>375</span></div>
<div><span>376</span></div>
<div><span>377</span></div>
<div><span>378</span></div>
<div><span>379</span></div>
<div><span>380</span></div>
<div><span>381</span></div>
<div><span>382</span></div>
<div><span>383</span></div>
<div><span>384</span></div>
<div><span>385</span></div>
<div><span>386</span></div>
<div><span>387</span></div>
<div><span>388</span></div>
<div><span>389</span></div>
<div><span>390</span></div>
<div><span>391</span></div>
<div><span>392</span></div>
<div><span>393</span></div>
<div><span>394</span></div>
<div><span>395</span></div>
<div><span>396</span></div>
<div><span>397</span></div>
<div><span>398</span></div>
<div><span>399</span></div>
<div><span>400</span></div>
<div><span>401</span></div>
<div><span>402</span></div>
<div><span>403</span></div>
<div><span>404</span></div>
<div><span>405</span></div>
<div><span>406</span></div>
<div><span>407</span></div>
<div><span>408</span></div>
<div><span>409</span></div>
<div><span>410</span></div>
<div><span>411</span></div>
<div><span>412</span></div>
<div><span>413</span></div>
<div><span>414</span></div>
<div><span>415</span></div>
<div><span>416</span></div>
<div><span>417</span></div>
<div><span>418</span></div>
<div><span>419</span></div>
<div><span>420</span></div>
<div><span>421</span></div>
<div><span>422</span></div>
<div><span>423</span></div>
<div><span>424</span></div>
<div><span>425</span></div>
<div><span>426</span></div>
<div><span>427</span></div>
<div><span>428</span></div>
<div><span>429</span></div>
<div><span>430</span></div>
<div><span>431</span></div>
<div><span>432</span></div>
<div><span>433</span></div>
<div><span>434</span></div>
<div><span>435</span></div>
<div><span>436</span></div>
<div><span>437</span></div>
<div><span>438</span></div>
<div><span>439</span></div>
<div><span>440</span></div>
<div><span>441</span></div>
<div><span>442</span></div>
<div><span>443</span></div>
<div><span>444</span></div>
<div><span>445</span></div>
<div><span>446</span></div>
<div><span>447</span></div>
<div><span>448</span></div>
<div><span>449</span></div>
<div><span>450</span></div>
<div><span>451</span></div>
<div><span>452</span></div>
<div><span>453</span></div>
<div><span>454</span></div>
<div><span>455</span></div>
<div><span>456</span></div>
<div><span>457</span></div>
<div><span>458</span></div>
<div><span>459</span></div>
<div><span>460</span></div>
<div><span>461</span></div>
<div><span>462</span></div>
<div><span>463</span></div>
<div><span>464</span></div>
<div><span>465</span></div>
<div><span>466</span></div>
<div><span>467</span></div>
<div><span>468</span></div>
<div><span>469</span></div>
<div><span>470</span></div>
<div><span>471</span></div>
<div><span>472</span></div>
<div><span>473</span></div>
<div><span>474</span></div>
<div><span>475</span></div>
<div><span>476</span></div>
<div><span>477</span></div>
<div><span>478</span></div>
<div><span>479</span></div>
<div><span>480</span></div>
<div><span>481</span></div>
<div><span>482</span></div>
<div><span>483</span></div>
<div><span>484</span></div>
<div><span>485</span></div>
<div><span>486</span></div>
<div><span>487</span></div>
<div><span>488</span></div>
<div><span>489</span></div>
<div><span>490</span></div>
<div><span>491</span></div>
<div><span>492</span></div>
<div><span>493</span></div>
<div><span>494</span></div>
<div><span>495</span></div>
<div><span>496</span></div>
<div><span>497</span></div>
<div><span>498</span></div>
<div><span>499</span></div>
</body>
</html>