Ultimate Doom: Thy Flesh Consumed (Episode 4) - Nightmare! Speedrun i 4:27 (5:42)

For nylig læste jeg om media attribut for <link> tag. Umiddelbart tænkte jeg, at det ville være en god idé at adskille alle medieforespørgsler i separate filer og kun linke dem, når hjemmesiden åbnes på en mobilenhed for ikke at blokere dom-gengivelsen på skrivebordet osv. Noget som dette:

<link rel='stylesheet' type='text/css' href='main.css'> <link rel='stylesheet' type='text/css' href='mobile.css' media='screen and (max-width:768px)'> 

Men jeg kan ikke rigtig se nogen, der bruger denne attribut. Er der nogen grund bag det, er det stadig hurtigere at bare indlæse en større fil?

Det er meningsløst på grund af det faktum, at alle stilark bliver downloadet på alle enheder, selvom de er over max-width:, så mobile.css downloades på desktop, og desktop downloades på mobile samt alle andre CSS-script. Derfor øges dine stigende serversidenforespørgsler, som igen bremser siden / serveren.

Hvis du ønsker at opdele filer til administrationsformål, kan du bruge scripts på serversiden til at kombinere alle JavaScripts, CSS-filer og andre ressourcer i en enkelt cachelagret fil, så du nemt kan redigere filerne, mens du opretholder den anbefalede tilgang - som få anmodninger på serversiden som muligt. Google har frigivet et modul til Apache og NGinx, der kan gøre dette kaldet PageSpeed ​​Module.

  • Så vidt jeg ved, vil kun den vigtigste css-fil blokere html dom-gengivelsen, er det korrekt? Og stilark med mediekode skal downloades, når dom er klar, så ja, det ville være endnu en anmodning til serveren, men ville ikke nødvendigvis gøre webstedsindlæsningen langsommere, er det korrekt? Hvis det lykkes mig at finde kilden til det, jeg skrev, sørger jeg for at give det.
  • DOM- og CSSOM-træstrukturer er to uafhængige strukturer. DOM + CSSOM = gengiv træet. HTML og CSS gengiver blokerende ressourcer.
  • Jeg antydede aldrig, at det bare ville sænke siden, sagde jeg side / server, så en af ​​dem. Når man udvikler et websted, betragtes det som bedste praksis at tænke på volumen snarere end enkeltpersoner, hvad jeg mener med dette er ... ja en bruger, der ser siden, der skal downloade 3 CSS-filer, vil ikke se nogen afmatning, nu, det er multipel med 10.000 brugere ... hvad der skal være 10.000 server-side anmodninger, bliver nu 30.000 server-side anmodninger, lad os nu sige, at du har 10 JavaScripts, der ikke er kombineret, der lige blev 100.000 serverside anmodninger snarere end 10.000.
  • Dette er grunden til, at Cloudflare er så populær, fordi det reducerer anmodninger på serversiden. Men med alt dette sagt ... optimering er fantastisk, men hvis du har en god serveropsætning, har du ikke brug for det. Tag mit websted, 30-40.000 besøgende om måneden, halvdelen af ​​båndbredden betjenes af Cloudflare, webstedet er meget dårligt optimeret, og alligevel kan det gengives på mindre end et halvt sekund. tools.pingdom.com/#5ad6ea0c7a800000 Så du kan bruge flere CSS-filer, hvis du vil, ideelt set bør du dog ikke, hvis du kan undgå det.
  • 1 Efter at have læst Marcios linkede artikler ser det ud til, at medieattributter er det ikke meningsløs, fordi de kan forhindre visse typografiark i at blokere gengivelse. Og antallet af anmodninger er ikke så vigtigt under HTTP / 2, så længe det ikke bliver meget høj.

Denne teknik er slet ikke meningsløs, den kan bruges til at optimere den kritiske gengivelsessti, hvilket vil reducere tiden til først at gengive og også hjælpe dit websted til at bestå fyrtesten.

Både Google og Mozilla går ind for denne teknik.

Med hensyn til spørgsmålet om anmodninger: implementer bare HTTP2 på din server.

arbejdet for dig: Charles Robertson | Ønsker du at kontakte os?