Krydos Posted October 13, 2018 Posted October 13, 2018 Wow! How did you get that?Just press F12, and go to the console tab. If the external CSS resources are small, you can insert those directly into the HTML document, which is called inlining. Inlining small CSS in this way allows the browser to proceed with rendering the page.Each https request has a certain amount of overhead so you want to try to minimize the number of requests your browser needs to make to load the page. https://atoz.ml/assets/css/styles.css is relatively tiny so it would actually be beneficial to put the code straight into your .php file rather than forcing the browser to make two requests. One for the .php file, and then another for the .css file. You might want to also minimize the css code to reduce size, but since there is so little code there it probably won't make much of a difference. Keep in mind if the CSS file is large, completely inlining the CSS may cause PageSpeed Insights to warn that the above-the-fold portion of your page is too large via Prioritize Visible Content.If you take a look at https://atoz.ml/assets/css/materialize.min.css however, it is quite large, and obviously not written by you. You can try inlining it if you want, but like the above quote says it will likely make your above-the-fold size too large to load quickly enough. In the case of a large CSS file, you will need to identify and inline the CSS necessary for rendering the above-the-fold content and defer loading the remaining styles until after the above-the-fold content.This means you need to identify which rules in that css file are actually used above-the-fold, and probably just inline them. Then you can asynchronously load the rest of the .css that you need for the rest of the page. The point of all of the above is to get the portion of the page that is immediately visible when someone goes to your site to load as quickly as possible. Human reaction time is relatively slow so you can asynchronously continue loading the rest of the page that isn't immediately visible after the top part is done. Also, none of the above has anything to do with the server. This is all code changes that you need to make.
Recommended Posts