: Putting CSS/JS in header for faster load times I've been reading many articles lately about SEO on load times. Trying to get the perfect load time can be quite time-consuming but also a good
I've been reading many articles lately about SEO on load times. Trying to get the perfect load time can be quite time-consuming but also a good feeling when you see your site loading twice as quick.
Now a lot of these tutorials and blogs are saying to put chunks of CSS/JS in you head tag to help above-the-fold content to load faster.
"external resources take longer to load", each request back to the server for a file takes more time. So would it not make sense to actually just embed all CSS/JS in your head tag from the beginning.
Sure this could look messy at first, but the only reason why it takes long for external scripts to download in the browser is because the output has already been sent to the browser.
What if we simply do:
<head>
... Usual things here ...
<?php require('css/bootstrap'); ?>
<?php require('css/mystylesheet'); ?>
</head>
<body>
... Usual things here ...
<?php require('js/bootstrap.js'); ?>
<?php require('js/myscript.js'); ?>
</body>
Now this will just be served as a simple HTML file with embedded CSS and JavaScript as soon as it hits the users browser. And it is just as clean looking in our text editor as before because we require the file in PHP.
Would this improve overall speed performance or should i stay clear of this method?
More posts by @BetL925
2 Comments
Sorted by latest first Latest Oldest Best
As far as i know "load time" don't have much inpact on SEO ( at least for now).
Of course that you shoud do whatever you can , to make website faster, but remember that UX is the key ( not technical details that only google robot will see)
Try:
make your css and js cachable ( using .htaccess for example)
combine and minimize your js/css - look for thing called "gulp" (or if you are good in php - look for assetic bundle from symfony )
This question might belong in Stackoverflow and not here but you are including the complete stylesheets and scripts in each of your pages. That increases the download and computation time for each page significantly while the recommendation you speak of is only talking about less significant amounts of styling and code. Doing what you show can increase your page download size perhaps 10x or more.
Imagine trying to load all your markup, styling and code while on a phone with a bad connection. Lots of sites can barely function serving up HTML and basic CSS, much less all that.
What the suggestion is trying to do is get you to provide a minimal amount of markup to make the initial user experience usable as quickly as possible so you can add all the other fluff later.
Now, is this time consuming and difficult? Yep. Depending on the site.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.