So I decided to take a look at one of my favorite websites,
Netflix. I'm going to open up dev
tools by pressing Cmd+Option+I. Turn on emulation.
And go into the timeline. I'll do a hard reload by
doing Cmd+Shift+R. We can see the events that happen as the
page is loading. Let's take a look at the first couple.
We could see we send a request for the homepage here. This
is the HTML file that we need to load the page.
Let's scroll down. We can see that when the HTML file
finishes loading, we then parse the HTML. Let's open this up.
And we see a request for two different files, both called include.
Clicking on the first one gives us this CSS file.
Scrolling down, I think we can pick out two pretty obvious
optimizations just looking at this file. The first optimization is
to minify the CSS or get rid of all the white
space. The white space in the file only helps us
read it. It doesn't help the browser parse the file. So
in fact, if we got rid of all the white space,
we would remove a significant amount of bytes from our data.
The second optimization is to inline critical CSS and we wouldn't have
to send out another request for this CSS file to style this page
حسنًا، لقد قررت إلقاء نظرة على أحد مواقع الويب المفضلة لدي، وهو
Netflix. سوف أفتح أدوات
.المطوِّر من خلال الضغط على Cmd+Option+I. تشغيل المحاكاة
والذهاب إلى Timeline. سأقوم بإجراء إعادة تحميل صعبة من خلال
الضغط على Cmd+Shift+R. يمكننا رؤية الأحداث التي تحدث بينما يتم
.تحميل الصفحة. دعونا نلق نظرة على أول اثنين
يمكننا أن نرى هنا أننا نرسل طلبًا للصفحة الرئيسية هنا. هذا
.هو ملف HTML الذي نحتاجه لتحميل الصفحة
دعونا نمرر لأسفل. يمكننا رؤية أنه عند انتهاء تحميل
.ملف HTML، نقوم بعد ذلك بتحليل HTML. دعونا نفتح هذا
.نرى طلبًا لملفين مختلفين يُطلق على كل منهما include
.نحصل على ملف CSS هذا من خلال النقر فوق الملف الأول
بالتمرير لأسفل، أعتقد أنه يمكننا انتقاء عمليتي تحسين واضحين
جدًا بالنظر إلى هذا الملف فقط. يتمثل التحسين الأول
في تقليل CSS إلى حدها الأدنى أو التخلص من المساحة
البيضاء كلها. فالمساحة البيضاء في الملف تساعدنا فقط
على قراءته. ولا تساعد المستعرض في تحليل الملف. لذا
،في الواقع، إن تخلصنا من المساحة البيضاء كلها
.فسنقوم بإزالة قدر كبير من وحدات البايت من البيانات لدينا
يتمثل التحسين الثاني في تضمين CSS هامة ولن يكون علينا
إرسال طلب آخر لملف CSS هذا لإنشاء نمط لهذه الصفحة
He decidido echar un vistazo a una de mis páginas web favoritas, Netflix.
Voy a abrir DevTools presionando Cmd+opción+I.
Activamos la emulación.
Y vamos a Timeline.
Haré una actualización forzosa haciendo Cmd+Shift+R.
Podemos ver los eventos que aparecen cuando la página está cargando.
Vamos a echar un vistazo a los primeros.
Se puede enviar una solicitud para la página principal aquí.
Este es el archivo HTML que usamos para cargar la página.
Vamos a desplazarnos hacia abajo.
Podemos ver que cuando la página HTML termina de cargar, analizamos el HTML.
Abramos esto.
Y podemos ver una solicitud para dos archivos diferentes,
ambos llamados include.
Dándole click en la primera nos da un archivo CSS.
Nos desplazamos abajo
y pienso que podemos hacer dos optimizaciones bastante obvias
con solo ver este archivo.
La primera optimización es disminuir el CSS
o deshacernos de todos los espacios en blanco.
El espacio blanco solo nos ayuda a leer el archivo,
no ayuda al navegador a analizarlo.
De hecho, si nos deshacemos de todos los espacios en blanco,
removeríamos una cantidad significativa de bytes de nuestra información.
La segunda optimización es enlinear CSS crítico,
y no tendríamos que enviar otra solicitud para este archivo CSS
para designar esta página.
お気に入りのWebサイトの Netflixを見ることにしました
Macの場合はCmd＋Opt＋Iを押して
デベロッパーツールを開き Emulationをオンにします
Timelineを表示します Cmd＋Shift＋Rを押して
完全に更新します ページが読み込まれている間に 起こるイベントを
見ることができます 最初のいくつかを見てみましょう
ホームページへの要求を送信していることが 分かるはずです
これはページを読み込むために必要な HTMLファイルです
スクロールしましょう HTMLファイルの読み込みが終わると
HTMLを解析することが分かります これを開きましょう
includeと呼ばれる2つの異なるファイルへの 要求があります
最初の1つをクリックすると このCSSファイルを表示します
スクロールダウンすると このファイルには 2つの最適化が
適用されるとはっきり分かります 最初の最適化は
CSSの縮小やすべてのホワイトスペースの削除です
ホワイトスペースは 単に人が読みやすくなるだけです
ブラウザがファイルを解析する助けにはなりません
そのため実際には すべてのホワイトスペースを削除すれば
データからかなりの量のバイトを削除するでしょう
2つめの最適化は重要なCSSを埋め込むことで
ページを装飾するCSSファイルに さらなる要求を送信しなくてすみます
그래서 전 제가 가장 좋아하는 웹사이트 중 하나인 넷플릭스를 살펴보기로 했어요
Cmd + Option + I 키를 눌러서 개발자 도구를 엽니다
emulation을 활성화 시키고
그리고 타임라인으로 갑니다
Cmd + Shift + R 키를 눌러서 새로 고침을 합니다
페이지가 로딩되면서 일어나는 이벤트들을 볼 수 있군요
첫 번째 몇 개를 볼까요
여기에서 홈페이지에 요청을 보낸 것을 볼 수 있네요
이것은 페이지를 로딩할 때 필요한 HTML 파일이고요
스크롤을 내려봅시다
HTML 파일이 로딩을 끝냈을 때
HTML을 파싱하는 것을 볼 수 있죠 이걸 열어 볼까요
그리고 다른 두 파일에 대한 요청을 볼 수 있는데요 둘 다 include라고 쓰여 있네요
첫 번째 것을 클릭하면, 이 CSS 파일이 나오는데요
스크롤을 내리죠
이 파일을 보면 2가지의 분명한 최적화 방법을 쓸 수 있을 것 같아요
첫 번째 최적화 방법은
CSS를 최소화시켜서 모든 공백 문자를 지우는 거죠
파일 내부의 공백 문자는 우리가 읽기 편하도록 도와줄 뿐이에요
그건 브라우저가 파일을 파싱하는 것에는 전혀 도움이 되지 않죠
그래서 실제로, 우리가 모든 빈 공간을 없애면
우리 데이터에서 상당한 바이트들을 절약할 수 있어요
두 번째 최적화는 중요한 CSS를 인라인으로 만드는 거에요
그렇게 하면 이 페이지에 스타일을 입히기 위해 또 다른 요청을 보낼 필요가 없어지죠
Então decidi olhar um dos meus sites favoritos,
o Netflix. Vou abrir as ferramentas
do desenvolvedor pressionando Cmd+Option+I. Ativar Emulation.
E ir para a timeline. Farei uma atualização forçada
pressionando Cmd+Shift+R. Podemos ver os eventos que acontecem enquanto
a página é carregada. Vamos dar uma olhada nos primeiros.
Enviamos uma requisição para a página inicial aqui. Este
é o arquivo HTML necessário para carregar a página.
Vamos rolar para baixo. Quando o arquivo HTML
termina de ser carregado, analisamos o HTML. Vamos abri-lo.
E vemos uma requisição para dois arquivos diferentes, ambos chamados include.
Clicar no primeiro abre este arquivo CSS.
Vou rolar para baixo, acho que podemos escolher duas otimizações
bem óbvias apenas olhando este arquivo. A primeira otimização é
para minimizar o CSS ou tirar todo o espaço
em branco. O espaço em branco no arquivo apenas ajuda
em sua leitura. Ele não ajuda o navegador a analisar o arquivo. Então,
na verdade, se tirarmos todo o espaço em branco,
removeremos uma quantidade significativa de bytes dos dados.
A segunda otimização é embutir CSS crítico, e não é necessário
enviar outra requisição para este arquivo CSS para definir o estilo desta página.