In my country internet speed is very low thus web developers are sharp in minimizing sent data through http.
I have website with same files in all pages such as css,jquery,javascript,... I need to load those files once for all pages. I use ajax in form submitation and other actions but when a page going to redirect speed is very low.
I think to use ajax in page navigation but there is a problem with ajax loaded javascripts in all pages.
thanks
You want this: http://code.google.com/p/minify/
Also, follow these best practices to speed up your site: http://code.google.com/speed/page-speed/docs/rules_intro.html
If you are hosting on apache, you could place .htaccess file in your webroot, which sets the expiration date to far future values. The disadvantage is, that you need to use version control if you change your JS or CSS.
This is .htaccess content:
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
</IfModule>
Your CSS and JS could be linked like this:
<script type="text/javascript" src="scripts/js/jquery.1.7.0.min.js"></script>
<link rel="stylesheet" media="screen" href="scripts/css/styles-2011-11-03.css" />
Everytime you make changes to your CSS or jquery version update the filename.
If you would like to speed up your whole site alot, take a look at the great html5boilerplate and download Firefox/Chrome Plugins yslow and google pagespeed (if you have access to that).
Related
I'm looking to declare an offline file that I can use for an iPad site. I believe I must be missing something in the setup as it doesn't seem to work correctly as I understand it. Here is what I have...
index page:
<!doctype html>
<html lang="en" manifest="/cache.appcache">
.htaccess
AddType text/cache-manifest .appcache
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/cache-manifest "access plus 0 seconds"
</IfModule>
cache.appcache
CACHE MANIFEST
CACHE:
/index.php
/img/img.jpg
/img/img#2x.jpg
/inc/script.php
/inc/styles.php
NETWORK:
# All URLs that start with the following lines
# are whitelisted.
FALLBACK:
Here are the steps I go through:
I navigate to the page and confirm that there are no errors and that
the url to the cache.appcache along with the items inside it are
linked correctly.
I navigate through the sites pages to confirm everything is
functioning as expected. No errors seen.
I turn off the Ethernet.
I am able to move through pages I previously setup, however, if I
hit refresh the pages all break and I can't get back to the site.
I may be misunderstanding how this is supposed to work for "offline" mode, but this seems incorrect to me.
Let me first mention that I have done some digging but can't seem to find a proper answer to what I'll looking for.
I'm working on a site where I am using a few external resources:
Google Analytics (//www.google-analytics.com/analytics.js)
Latest jQuery version (http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js)
Google Fonts (http://fonts.googleapis.com/css?family=Lato:400,300)
Use a Content Delivery Network (CDN)
I'm getting an "F" grade on "Use a Content Delivery Network (CDN)". A different SO Post links to the YSlow FAQ (direct link) but this seems to indicate that I need to define my CDN's on my browser, which seems to be a quick fix for me, but this does not solve the problem on other browsers and/or devices.
Add Expires headers
As for the "Add Expires headers" grade,I get an E. Problem is, this is what I'm getting:
There are 3 static components without a far-future expiration date.
(2014/2/26) http://fonts.googleapis.com/css?...
(2014/2/26) http://www.google-analytics.com/analytics.js
(2014/2/26) http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js
How would I go in order to correct this? My local files are all taken care of by my .htaccess as shown, here:
AddType image/x-icon .ico
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/ico "access plus 1 year"
ExpiresDefault "access plus 7 days"
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$">
# access plus 1 year
Header set Cache-Control "max-age=31536000"
</FilesMatch>
This SO post seems to suggest it is either impossible, or I call upon a local script where I use my bandwidth to load (and cache) the required external files.
So, with these things in mind, here is what I'm looking at:
External ressources should be CDN's, but YSlow reads my local preferences which will vary from user to user, so I need an alternative to the about:config solution proposed by the YSlow official site.
Expires are set by the server where the file is, so I don't seem to have access to defining it's expiration values. So, from what I gather, I could carry these files onto my server or use a local PHP file and cache it from said PHP file located my server, but this doesn't seem optimal. Is there a way to go around this?
Short answer:
You can't control much when you're loading resources from external servers like that, but it may still be okay for your site. When using a tool like YSlow it's important to not get caught up into an "A" grade for everything. It's best to understand the hints the tool is giving you, and make decisions accordingly.
Longer answers:
Content Delivery Network
YSlow will report lower grades for any domains it doesn't recognize as a CDN. You can add CDN hostnames, then it will reflect a better grade. I would add fonts.googleapis.com and ajax.googleapis.com because both behave like CDNs. Think of it as saving a preference in your copy of YSlow. Adding the domains here doesn't actually change your performance, it just improves your score.
Expires Headers
You can't control expires headers for content you're loading from a different site. Options you could consider:
Continue using external sites; in this case these are pretty well behaved and your performance will probably be pretty good. Just ignore the low grade that YSlow is giving you.
Host your fonts and jQuery files locally, then set far-futures expires headers as you've shown in your .htaccess. This would give you a better YSlow grade, but actual performance may be worse if your server is slower than the CDNs. (see this SO question)
Use external sites but adjust your URL; in the case of jQuery, if you specify on more version level (1.8.0 instead of 1.8) you will get a far future expires header (see this SO question)
So I was reading in the joomla wiki but could not find any further details than general talk.
So what I basically want to change is what is being loaded. For the simple main page of my blog joomla loads a a truckload of files, and a a big part is not cached. I want to introduce a caching mechanism and remove the things I am sure I don't need.
So what I in detail want to know is where is:
<jdoc:include type="head"/>
implemented?
If a tool exists to realize the caching in a easier fashion than actually writing it myself, i'd be very thankful as well. I am talking about caching pictures, css and javascript files by setting expire to in one year. Afterwards invalidating the cached files by adding a version number to the request string.
I am citing RedEye from the joomla forums:
"The file is in /libraries/joomla/document/html/renderer/head.php
But don't change this file, make an override. Copy it somewhere (your template folder for example) and include the file in your template index.php"
I'll have a go at this as soon as I finished what I started in the meantime
I find the JCH Optimize plugin works really well in combining, minimizing, and caching JavaScript and CSS files. There's a free and paid version of it. You can have it just cache the main Joomla core and template files, or you can have it do some or all of the extensions that you have in your install too. You can exclude certain files if you run into a problem. You may have to play with the plugin order and put this one towards the bottom of the list so that it loads later and grabs most of the files to optimize.
For images: If you're using an Apache web server, you can add ExpiresByType rules in the .htaccess file or httpd.conf or a conf.d file. I wouldn't include the css and js files here because I would let JCH Optimize handle them. Most of my sites have changing content so I don't typically set that very far in the future. Here's some sample code you could use.
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive - covers html, etc
ExpiresDefault "access plus 3 minutes"
# My favicon
ExpiresByType image/x-icon "access plus 1 year”
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
</IfModule>
For more reading, see the Apache docs on it.
Finally, jQuery can be sourced from Google using another handy free extension called jQuery Easy. You can even set it to load jQuery securely (https). Sorry, I don't have enough points to post a link.
When a browser requests a jpg and the server returns the data but not as a reference to a jpg file but rather sends the jpg data itself, is it possible for the browser to cache the data?
For example:
http://www.somewebsite.com/image/abc
This uri returns jpg data. Is there some way to get the browser to cache the data it receives to avoid having to request it again?
I just attempted to debug your example but received an Account Suspended. Webmaster, please, contact support. page!
So as I am working blind can I suggest researching the header('Expires: SOME DATA HERE') function in PHP (I assume you are using PHP).
If the solution does not lie there you can also use .htaccess to set the headers using
<IfModule mod_expires.c>
ExpiresActive On
############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresDefault "access plus 1 year"
</FilesMatch>
</IfModule>
This example taken from http://www.robertwent.com/blog/servers-and-hosting/45-set-expires-headers-in-htaccess
Ultimately it is the headers that tell the browser how you advise the content is cached. What the browsers actually does can sometimes be surprising.
I have a great .htaccess code which really improve my page speed.
This one below I below I don't really know much but from looking at it is like to compress or something not really sure
<FilesMatch ".(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
This one is really great which set the Expire header for everything to 10 years and text/html to one day
ExpiresActive On
ExpiresDefault "access plus 10 years"
ExpiresByType text/html "access plus 1 day"
So This one is use to unset ETag which is one of the requirement rules of YSlow
Header unset ETag
FileETag None
Now come to my question that I have problem with.
I can't really use w3 Total cache with my Wordpress blog because it gives me some random issue like only show one ramdom old post to my home page and to solve that is to delete the cache and then after a day it will happen again.
So I can't rely on that plugin, but with my 3 codes that I added in my .htaccess is really good with one exception and I don't know really how to fix that.
say for example I visit my site http://applesiam.com this morning and during the day I have 3 new posts. If I don't really do hard reload page I will still see the one from morning.
So this is really make me confuse.
What should I change to not to cache the actual home page so it will be updated except images and the rest.
I'm not sure if this is going to work but I found this which is going to solve the behaviour of the browser cache the file that update dynamically
# Force no caching for dynamic files
<filesMatch "\.(php|cgi|pl|htm)$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</filesMatch>