How to adress to "Make javascript and css extrnal" issue form yslow?

Nura111
Nura111 used Ask the Experts™
on
Im using yslow to optimize my wp site that currently using w3 total cache.

there was a few issues I managed to solve by changing w3 total cache setting such as: minify js and css.
but there are  still a few issued I dont know how to solve maybe its cant be fixed by modify the plugin setting but Im guessing it will have to be solve in the code.


so 1. Grade n/a on Make JavaScript and CSS external

Only consider this if your property is a common user home page.

    * There are a total of 8 inline scripts


2.Grade F on Add Expires headers

if its for permalink I dont own such as http://www.google-analytics.com/ga.js im guessing there is nothing I can do about it...

can anybody help with that?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Making javascript and css external simply means setting up your javascript by use of <script> tags with a "src" attribute and your stylesheets with links.  The key here is to not have javascript and css inline with your html.

YSlow will also make recommendations that you only have one external javascript and one external CSS file stating that combining all the scripts speeds up the process.

Your Expires headers are easy to add placing them in PHP before the start of your header output and using ob_start and ob_flush to show your page.

ob_start();
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
<!DOCTYPE html>
...etc.
</html>
ob_flush();

Author

Commented:
The Expires headers : Can you explain how does it work? Will I have to change it every in a  in a while? I'm sorry but I don't get it. and I need to set it in the header.php file where exctly? Isnt the w3 total cache is suppose to set it up already?

Author

Commented:
and How can I set an expiration date for pages I didnt create such as http://www.google-analytics.com/ga.js?
Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

I do need to apologize, the expires header I listed was actually for a "no-cache" situation on a site.  What you want are called "Far Future" expires headers.  If you have an Apache server you could add another directive as follows:

header('ExpiresDefault "access plus 10 years"');

other than that just set the header to expire in some future far date:

header("Expires: Wed, 26 Jul 2017 05:00:00 GMT");

In this case you would have to change the date again as you get close (say within one year) of the expires date, although in WordPress that isn't that hard.  Your headers normally are located in only one place.

Obviously, expires headers only apply to elements that you control.  There are only so many things you can do to speed up your site.
The Far Future expires header does the oposite of the "No-Cache" header in that it gives permission to your browser to cache this page for faster loading.

Author

Commented:
Its a shared  host so I don't think I can add it to the server.
but again Isnt the w3 total cache is suppose to set it up already?

I don't understand it how does it help the speed if Im setting an header to expire in one year how does it help to cache the page ? if you have a good refresher that would be great

Author

Commented:
how can I  Specify an expiration for an Img ?
I'm sorry, I am not familiar with w3 cache's operation, but your YSlow should detect whether it does handle the far future expires or not.

Having a shared host makes no difference as far as far future headers are concerned.  This is a browser command, not a server command.

Basically, the far future header tells the browser that the page that it has in memory can still be used because the expiration date has not arrived as of yet.  Once the date arrives, the browser goes back to the server and loads a new version of the page.  So, by saving trips to the server, your website speeds up.

You can read more about this at http://cjohansen.no/en/apache/using_a_far_future_expires_header

Far future expiries are for web pages, not specific elements on the page.

Author

Commented:
I keep getting the message from page speed

The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources:

and than for example I get
newspaper-icon.png

How can I set an expiration to One img?
Oh, sorry.  I misunderstood.

Try adding the following to the .htaccess file of your server:

ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000

Author

Commented:
I do see in my  .htacess the same lines but with A31536000
so to replace it ?
If that's the case, I don't understand your error.  Are you sure the .htaccess specifies image/png?

Author

Commented:
Just a side note, you have a syntax error in your w3 cache javascript file: http://www.chicagonewshub.com/wp-content/w3tc/min/dd2454aa.94d4ff.js on line

page speed shows the following:
 Page Speed Results
From what I am seeing, your site is scoring 88 out of 100.  You will never get 100 with all the content that you have.

IMHO, you are doing pretty good already.

Author

Commented:
I didnt change anything in their script so what should I do?

Its not doing good I just stop the images for a while to test it  actully  pretty low take a look again on
http://www.chicagonewshub.com/
OK, now I see it.  The Apache mod_expires are set.  This should not be happening.  I would submit a trouble ticket to your host.

Author

Commented:
I did they said they r not dealing with that  issues.
Can you attach a copy of your .htaccess file for me to look at?

Author

Commented:

# Use PHP5 Single php.ini as default
AddHandler application/x-httpd-php5s .php

# BEGIN W3TC Browser Cache
<IfModule mod_mime.c>
    AddType text/css .css
    AddType application/x-javascript .js
    AddType text/html .html .htm
    AddType text/richtext .rtf .rtx
    AddType image/svg+xml .svg .svgz
    AddType text/plain .txt
    AddType text/xsd .xsd
    AddType text/xsl .xsl
    AddType text/xml .xml
    AddType video/asf .asf .asx .wax .wmv .wmx
    AddType video/avi .avi
    AddType image/bmp .bmp
    AddType application/java .class
    AddType video/divx .divx
    AddType application/msword .doc .docx
    AddType application/x-msdownload .exe
    AddType image/gif .gif
    AddType application/x-gzip .gz .gzip
    AddType image/x-icon .ico
    AddType image/jpeg .jpg .jpeg .jpe
    AddType application/vnd.ms-access .mdb
    AddType audio/midi .mid .midi
    AddType video/quicktime .mov .qt
    AddType audio/mpeg .mp3 .m4a
    AddType video/mp4 .mp4 .m4v
    AddType video/mpeg .mpeg .mpg .mpe
    AddType application/vnd.ms-project .mpp
    AddType application/vnd.oasis.opendocument.database .odb
    AddType application/vnd.oasis.opendocument.chart .odc
    AddType application/vnd.oasis.opendocument.formula .odf
    AddType application/vnd.oasis.opendocument.graphics .odg
    AddType application/vnd.oasis.opendocument.presentation .odp
    AddType application/vnd.oasis.opendocument.spreadsheet .ods
    AddType application/vnd.oasis.opendocument.text .odt
    AddType audio/ogg .ogg
    AddType application/pdf .pdf
    AddType image/png .png
    AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
    AddType audio/x-realaudio .ra .ram
    AddType application/x-shockwave-flash .swf
    AddType application/x-tar .tar
    AddType image/tiff .tif .tiff
    AddType audio/wav .wav
    AddType audio/wma .wma
    AddType application/vnd.ms-write .wri
    AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
    AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css A31536000
    ExpiresByType application/x-javascript A31536000
    ExpiresByType text/html A3600
    ExpiresByType text/richtext A3600
    ExpiresByType image/svg+xml A3600
    ExpiresByType text/plain A3600
    ExpiresByType text/xsd A3600
    ExpiresByType text/xsl A3600
    ExpiresByType text/xml A3600
    ExpiresByType video/asf A31536000
    ExpiresByType video/avi A31536000
    ExpiresByType image/bmp A31536000
    ExpiresByType application/java A31536000
    ExpiresByType video/divx A31536000
    ExpiresByType application/msword A31536000
    ExpiresByType application/x-msdownload A31536000
    ExpiresByType image/gif A31536000
    ExpiresByType application/x-gzip A31536000
    ExpiresByType image/x-icon A31536000
    ExpiresByType image/jpeg A31536000
    ExpiresByType application/vnd.ms-access A31536000
    ExpiresByType audio/midi A31536000
    ExpiresByType video/quicktime A31536000
    ExpiresByType audio/mpeg A31536000
    ExpiresByType video/mp4 A31536000
    ExpiresByType video/mpeg A31536000
    ExpiresByType application/vnd.ms-project A31536000
    ExpiresByType application/vnd.oasis.opendocument.database A31536000
    ExpiresByType application/vnd.oasis.opendocument.chart A31536000
    ExpiresByType application/vnd.oasis.opendocument.formula A31536000
    ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
    ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
    ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
    ExpiresByType application/vnd.oasis.opendocument.text A31536000
    ExpiresByType audio/ogg A31536000
    ExpiresByType application/pdf A31536000
    ExpiresByType image/png A31536000
    ExpiresByType application/vnd.ms-powerpoint A31536000
    ExpiresByType audio/x-realaudio A31536000
    ExpiresByType application/x-shockwave-flash A31536000
    ExpiresByType application/x-tar A31536000
    ExpiresByType image/tiff A31536000
    ExpiresByType audio/wav A31536000
    ExpiresByType audio/wma A31536000
    ExpiresByType application/vnd.ms-write A31536000
    ExpiresByType application/vnd.ms-excel A31536000
    ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
    <IfModule mod_setenvif.c>
        BrowserMatch ^Mozilla/4 gzip-only-text/html
        BrowserMatch ^Mozilla/4\.0[678] no-gzip
        BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
        BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
    </IfModule>
    <IfModule mod_headers.c>
        Header append Vary User-Agent env=!dont-vary
    </IfModule>
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
    </IfModule>
</IfModule>
<FilesMatch "\.(css|js|CSS|JS)$">
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public, must-revalidate, proxy-revalidate"
    </IfModule>
    FileETag MTime Size
    <IfModule mod_headers.c>
         Header set X-Powered-By "W3 Total Cache/0.9.2.3"
    </IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$">
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public, must-revalidate, proxy-revalidate"
    </IfModule>
    FileETag MTime Size
    <IfModule mod_headers.c>
         Header set X-Powered-By "W3 Total Cache/0.9.2.3"
    </IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SWF|TAR|TIF|TIFF|WAV|WMA|WRI|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public, must-revalidate, proxy-revalidate"
    </IfModule>
    FileETag MTime Size
    <IfModule mod_headers.c>
         Header set X-Powered-By "W3 Total Cache/0.9.2.3"
    </IfModule>
</FilesMatch>
# END W3TC Browser Cache
# BEGIN W3TC Page Cache core
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^(.*\/)?w3tc_rewrite_test$ $1?w3tc_rewrite_test=1 [L]
    RewriteCond %{HTTP_USER_AGENT} (2\.0\ mmp|240x320|alcatel|amoi|asus|au\-mic|audiovox|avantgo|benq|bird|blackberry|blazer|cdm|cellphone|danger|ddipocket|docomo|dopod|elaine/3\.0|ericsson|eudoraweb|fly|haier|hiptop|hp\.ipaq|htc|huawei|i\-mobile|iemobile|j\-phone|kddi|konka|kwc|kyocera/wx310k|lenovo|lg|lg/u990|lge\ vx|midp|midp\-2\.0|mmef20|mmp|mobilephone|mot\-v|motorola|netfront|newgen|newt|nintendo\ ds|nintendo\ wii|nitro|nokia|novarra|o2|openweb|opera\ mobi|opera\.mobi|palm|panasonic|pantech|pdxgw|pg|philips|phone|playstation\ portable|portalmmm|\bppc\b|proxinet|psp|qtek|sagem|samsung|sanyo|sch|sec|sendo|sgh|sharp|sharp\-tq\-gx10|small|smartphone|softbank|sonyericsson|sph|symbian|symbian\ os|symbianos|toshiba|treo|ts21i\-10|up\.browser|up\.link|uts|vertu|vodafone|wap|willcome|windows\ ce|windows\.ce|winwap|xda|zte) [NC]
    RewriteRule .* - [E=W3TC_UA:_low]
    RewriteCond %{HTTP_USER_AGENT} (acer\ s100|android|archos5|blackberry9500|blackberry9530|blackberry9550|blackberry\ 9800|cupcake|docomo\ ht\-03a|dream|htc\ hero|htc\ magic|htc_dream|htc_magic|incognito|ipad|iphone|ipod|kindle|lg\-gw620|liquid\ build|maemo|mot\-mb200|mot\-mb300|nexus\ one|opera\ mini|samsung\-s8000|series60.*webkit|series60/5\.0|sonyericssone10|sonyericssonu20|sonyericssonx10|t\-mobile\ mytouch\ 3g|t\-mobile\ opal|tattoo|webmate|webos) [NC]
    RewriteRule .* - [E=W3TC_UA:_high]
    RewriteCond %{HTTP_COOKIE} w3tc_referrer=.*(google\.com|yahoo\.com|bing\.com|ask\.com|msn\.com) [NC]
    RewriteRule .* - [E=W3TC_REF:_search_engines]
    RewriteCond %{HTTPS} =on
    RewriteRule .* - [E=W3TC_SSL:_ssl]
    RewriteCond %{SERVER_PORT} =443
    RewriteRule .* - [E=W3TC_SSL:_ssl]
    RewriteCond %{HTTP:Accept-Encoding} gzip
    RewriteRule .* - [E=W3TC_ENC:.gzip]
    RewriteCond %{REQUEST_METHOD} !=POST
    RewriteCond %{QUERY_STRING} =""
    RewriteCond %{REQUEST_URI} \/$ [OR]
    RewriteCond %{REQUEST_URI} (sitemap\.xml(\.gz)?) [NC]
    RewriteCond %{REQUEST_URI} !(\/wp-admin\/|\/xmlrpc.php|\/wp-(app|cron|login|register|mail)\.php|wp-.*\.php|index\.php) [NC,OR]
    RewriteCond %{REQUEST_URI} (wp-comments-popup\.php|wp-links-opml\.php|wp-locations\.php) [NC]
    RewriteCond %{HTTP_COOKIE} !(comment_author|wp-postpass|wordpress_\[a-f0-9\]\+|wordpress_logged_in) [NC]
    RewriteCond %{HTTP_USER_AGENT} !(W3\ Total\ Cache/0\.9\.2\.3) [NC]
    RewriteCond "%{DOCUMENT_ROOT}/wp-content/w3tc/pgcache/%{REQUEST_URI}/_index%{ENV:W3TC_UA}%{ENV:W3TC_REF}%{ENV:W3TC_SSL}.html%{ENV:W3TC_ENC}" -f
    RewriteRule .* "/wp-content/w3tc/pgcache/%{REQUEST_URI}/_index%{ENV:W3TC_UA}%{ENV:W3TC_REF}%{ENV:W3TC_SSL}.html%{ENV:W3TC_ENC}" [L]
</IfModule>
# END W3TC Page Cache core
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Open in new window

The code looks fine.  You should ask your host to verify access to the mod_expires.c file.

Author

Commented:
they are saying that That file is enabled on the server
You should tell them that you have the following in the .htaccess file:

<IfModule mod_mime.c>
    AddType image/png .png
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/png A31536000
</IfModule>

and that page speed is reporting

http://www.chicagonewshub.com/.../goteq-logo.png (expiration not specified)
http://www.chicagonewshub.com/.../newspaper-icon.png (expiration not specified)
http://www.chicagonewshub.com/.../wordpress.png (expiration not specified)

Author

Commented:
yep I used it also but I still don't get why some objects not getting expired headers and some objects doesnt get minify even the I configured w3 total cache to that options

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial