Link to home
Start Free TrialLog in
Avatar of tofat
tofat

asked on

Load css via php

Hi,

Is it possible to load CSS via php and if so, how could you do it? So, instead of :

 <link href="css/theme.css" rel="stylesheet" type="text/css" media="all" />

Open in new window


you use php to load this css file?
Avatar of Robert Granlund
Robert Granlund
Flag of United States of America image

<?php include('css/theme.css'); ?>
PHP is a server-side technology.  PHP and MySQL are used to generate whole-cloth web pages consisting of HTML, JavaScript and CSS.  So the answer is "yes."  You can inject the CSS inline into the HTML document.
https://www.experts-exchange.com/articles/11271/Understanding-Client-Server-Protocols-and-Web-Applications.html
You can start there but there is a little more you should do.
Sorry, I forgot to highlight the part of the article.  See: The Timeline of Request and Response
Avatar of Dave Baldwin
You can load your CSS with PHP but what is the point?  What are you trying to accomplish?
I kinda share Dave's question here, too.  It seems like there is a backstory to questions like this, and when we can uncover the "deep down" roots of the question, there is often a simple (or simpler) design pattern that emerges.
Avatar of tofat
tofat

ASKER

Well, I am not having much luck using defer/async plus a bunch of other techniques to load js and css files without getting the below the fold errors from google insights. Unfortunately I tend to obsess about things once I really get an idea in my head, and my idea is that I want to get 100% or as close to as possible.

Some of the methods work somewhat but don't always work across browsers. I have a few posts on here already with various other methods that I have been trying but I read someone say somewhere on all my searches that you could use php to do it (I think it was a wordpress function actually, but I am not using wordpress).

I am not sure if using php would in fact work to prevent that dreaded google speed insights message or not and if it would work across browsers without breaking my layout.
ASKER CERTIFIED SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of tofat

ASKER

Yeah, everything behaves better when putting css in the head and Js before the closing body tag, but then I get that annoying above the fold error. I guess I should just stop obsessing over it and do it like that. But there is one particular website I found that has 100% and they have lots of css files and js. Am I allowed to post that page's code somewhere for you to look at? I would just like to know what it is exactly they are doing to get that. I don't know what is going on in there but since most of you here know 1000 times more than me, I am sure you would know. I will give you 500 points if you do, hehe  :)
If you are trying to follow the 'recommendations' of Google Pagespeed, you should first go look at the 'View Source' of a Google search results page.  The largest thing in the <head> section is a couple of hundred lines of JavaScript.  And they put <style> sections throughout the body code.  Google is not following their own 'recommendations'.
Avatar of tofat

ASKER

Where else can I do these kind of tests if Google isn't the best?

And, you didn't say if you were prepared to look at that code?
Just post a link to the site and I'll look at it.  I don't want you to send me the code.

The point is that all these recommendations are coming from Google and they are not following them themselves.  You need to do what makes sense and works for you and then move on.
Avatar of tofat

ASKER

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.websitedesignpe.co.za&tab=desktop

http://www.websitedesignpe.co.za/

If you could explain some of the techniques it would be appreciated. Perhaps you could even tell me if they are good or bad in your opinion.
I'm sorry but that is almost fraudulent.  The page loads very slow the first time because it has at least 1000 lines, yes, one thousand lines of JavaScript in the <head> section.  About 80% of the page.  And that does not include the jQuery files that are being loaded.  Even when I load that page a second time, it takes forever for that top section to display properly.  It may 'test well' but I would not say that it 'works well'.
Avatar of tofat

ASKER

Yeah, I did notice that it had LOADS of code in the page which gave me a headache. So, do you think the site gets 100% because most of the JS is inlined?

And last question (promise), what does that bit at the bottom do with all the css files? Google doesn't pick them up but I am assuming it is because they are at the bottom of the page below a 1000 odd lines of code. What does that function do? (like I said, that is my last question, I just want to know what that function at the bottom does with the css files)
That site is 'optimized' for testing, not functioning.  And as part of that... the javascript at the bottom loads some links to the CSS files so they won't be seen in the <head> section.  I didn't notice at first but something like 80% of the <head> section is the CSS <style> section.  And that's before the JavaScript loads more.
Avatar of tofat

ASKER

Thanks for your patience and answering all my questions :)
You're welcome, glad to help.