Any tips or methods(encryption, plugins etc) to load flash files (i.e. swf) as quickly as possible at the client side ???
consider files size is between 5MB - 10MB....
make sure gzip/deflate and http caching are active during transport
If you can break up your files, you have the option to load a small file first and then bring in additional files as needed or at least once the initial interface is up. I no longer activly develop for flash, so this might be a bit outdated, but I always had the best results when I structured my desktop applications with the ultimate goal of easy portability to the web...
You mean, load them more quickly than a standard <embed>? Hardly, seeing as the file is so and so large, and that number of bytes needs to be transferred to the client in any case.
Make sure compression is enabled as stillstanding says. There's probably not much more you can do except work on the Flash files themselves, reducing the quality of embedded images, splitting it into several files, reducing embedded fonts, etc..
Related
I quickly wrote this up, http://www.ionfish.org/php-shrink/ where a user uploads a .php file with comments and spaces in it, and it will "minify" it for small file-size.
It does exactly this: http://devpro.it/remove_phpcomments/ except it's web-based, and instant. You get a download prompt after you click upload, to save the processed file.
My questions:
Is a 2-megabyte upload limit enough? Should I make it 4, 8, etc. ?
Is the output (requires you test it with some random PHP) satisfactory, or should it be tweaked?
Would there be any use for this for the general public, and should I add support to minify HTML, CSS, JS, and even C++ and Python etc. ?
EDIT: Changed to 250K for now, will see if it suffices.
A file that needs such a minification is proof of bad practice.
The file size of a single php file should never be a problem when using best practice.
You should not be uploading files during your deployment anyways. Instead you should be checking out files from your VCS and you don't want 'minified' files in your VCS.
Such a minification will not improve site performance either since every serious project uses opcode caching.
Conclusion: Such a service is not needed.
Background: I'm working on a single page web app that loads everything through AJAX and so started learning php a few days ago. I immediately thought of putting everything (html, css, javascript) in php files so that there is only one html file and one sprite request. For instance, external javascript could be stored in:
main.js.php (adding the .js for organizational purposes only) which would look like:
<script>
...
</script>
or
<style>
...
</style>
Question: Would storing everything in php be a bad idea? I have OCD and like to have related functions in separate files (and actually, folders too), so let's just say my project uses 100+ includes. These only get loaded exactly once, when the user visits (AJAX site). I want to reduce the number of Http Requests to just 1 html and 1 sprite (my app uses a custom font for images actually). My app will also be ran on mobile devices (using a different design, using far fewer includes but a similar method).
Research: Here's what I know:
You can have Apache handle js/css as php, but is not something I'm interested in (dangerous) - link
This site gave me the idea, although I don't quite understand it - 3 Ways to Compress CSS
Caching with something like APC (not sure how it works, but out of the scope of this question) would improve php speeds (?)
Whilst reducing the number of HTTP requests is a good thing, it has problems too. If you combine CSS and Javascript into the HTML file, you increase the page size. You also make it impossible for the browser to cache the CSS and Javascript files too - so those assets are being redownloaded over and over, instead of just once.
Also - serving static files is much faster than serving via PHP. PHP is slow.
Combining all images, however, is a great idea. This is what Google uses: http://www.google.co.uk/images/nav_logo91.png
Overall, I say don't bother. Keep CSS and Javascript separate, combine images where possible and - yes - definitely use APC if you can. Remember though - don't optimise your site prematurely. Get the content in there first, develop the features, etc. Making your site fast can come at the expense of reduced maintainability - I know that from experience.
some points to consider:
1. code - text ratio:
your content pages are read by google. when google is ranking you pages, one of the parameter is the ratio of code versus the textual content. if you put your css/js code together with the content, you lower the ratio. (btw, one of the arguments for using divs instead of tables is that tables normally will take more html code and lower the ratio).
EDIT: this is a theory and not really known fact. it's important that the html code will be syntactically correct, so it will be easier to parse by search engine parsers. some say that google ignores the content that comes after the first 100kb, so it's also something to consider.
2. nginX
i have nginx installed with apache as a reversed proxy to handle php.
nginx is an http server, that knows how to handle static pages. apache's design is thread per client, while nginx uses the reactor pattern, meaning - nginx can handle much more traffic than apache as a web server (about 50 times the number of requests).
the drawback is that nginx doesn't handle the php requests, and for that the apache is installed too - nginx will send all the php calls to the apache, so it will handle them and return the response back to nginx, and back to the client.
if in that setup (which is quite common) you will put css/js files under javascript, you will lose the advantage of the nginx, which instead of handling the static js/css files on its own, it will send them to the apache as it'll address them as php pages.
3. cache
caching files is one of the most common mechanisms to improve your website performance, while reducing traffic. if you mix static content with dynamic content, you will lose the advantage you get from caching static files.
when working in web environment, it's best (as a habbit) to keep as much static content as you can separated from dynamic content. this will give you the best results when caching static data.
of course, there are no rules for what should and what shouldn't. i have many dynamic js contents, but the main functions are normally extracted to static files.
4. CSS sprites
css sprites (as #Muu mentioned) are a great improvement to performance and should definitely be adopted.
another recommendation more specific to your case - if you want your content indexed properly - since you mentioned that most data will be loaded using ajax, i'd recommend to have it present also without ajax. for example: www.domain.com/ will have a link to #contact, that will show the form (loaded using ajax). you should also have www.domain.com/contact for indexing. also make sure that if a user enters www.domain.com/#contact - he will be redirected to the contact page (or content will be loaded dynamically).
use browsers' web dev tools to see what requests are being made and see where you can lower the number of requests, and also pay attention to file sizes, see which files are cached and which are requested by the server. define cache attributes in you server config and htaccess.
hope that helps ;)
PS: another tip - if you get water spilled all over your keyboard - don't try to dry it with a hair dryer - it could melt down your keys...
I would keep CSS and JS out of the PHP unless it is dynamically generated. Static pages are usually faster and easier to serve by the webserver. Keeping the files separate also allows for the client browser to cache some data used repeatedly (e.g. the CSS file).
Still, make sure you use compression on the individual files. Some useful links in the Google "Page Speed" documentation.
Also, bytecode caching improves speed for sure. Doesn't have to compile every time.
I'm currently using PHP to include multiple css (or js) files into a single file (as well as compress the content using GZIP).
E.g. the HTML page calls resources like this...
<link rel="stylesheet" href="Concat.php?filetype=css&files=stylesheet1,stylesheet2,stylesheet3"></link>
<script src="Concat.php?filetype=js&files=script1,script2,script3"></script>
Example of my Concat.php file can be found here: http://dl.dropbox.com/u/3687270/Concat.php (feel free to comment on any problems with the code)
But instead of having to open up my command prompt and running YUI Compressor manually on my CSS/JS files I want the Concat.php file to handle this for at least the CSS side of things (I say CSS only because I appreciate that YUI Compressor does minification of variables and other optimisations so it isn't feasible to replicate in PHP - but that is part 2 of my question).
I know this can be done with some Regex magic and I haven't a problem doing that.
So, my question has 2 parts, which are:
1.) What is the performance implications of having the server minify using preg_replace on a CSS file (or set of CSS files that could have a few hundred lines of code per file - normally it would be a lot less but I'm thinking that if the server compresses the file then I wouldn't have to worry too much about extra whitespace in my CSS)
2.) And how can I get the JavaScript files that are concatenated via my Concat.php file run through YUI Compressor? Maybe run via the server (I have direct access to the server so I could install YUI Compressor there if necessary), but would this be a good idea? Surely optimising on the server everytime a page is requested will be slow and bad for the server + increase bandwidth etc.
The reason this has come up is that I'm constantly having to go back and make changes to existing 'compressed/minified' JS/CSS files which is a real pain because I need to grab the original source files, make changes then re-minify and upload. When really I'd rather just have to edit my files and let the server handle the minification.
Hope someone can help with this.
If your webserver is Apache, you should use mod_concat and let the Apache take care of compression using gzip,
http://code.google.com/p/modconcat/
You should minify the JS just once and save the minified version on servers.
As suggested in the comments you could use one of the pre-built scripts for that. They make use of YUI compressor as well as other solutions even if you can't run Java on the server.
The first one was probably PHP Speedy, which still works but has been abandoned.
A new one is Minify, which offers a lot of features including general caching solution depending on the server's capabilities (APC, Memcached, File cache).
Another advantage of these projects is that your URLs won't have query strings in them (contrary to your current method), which causes troubles in a lot of browsers when it comes to caching. They also take care of gzipping and handling Expires headers for your content.
So I definitely recommend that you try out one of these projects as they offer immediate positive effects, with some simple steps of configuration.
Here's how i recommend you do it:
Turn on GZIP for that specific folder (Web server level)
Use one of the tools to strip out whitespace and concat the files. This will serve as a backup for search engines/proxy users who don't have gzip enabled. You'd then cache the output of this - so the expensive regex calls aren't hit again.
The above wont be very expensive CPU wise if you configure your server correctly. The PHP overhead won't really be much - As you'll have a cached version of the CSS, ie.
-- css.php --
if (!isset($_GET['f'])) {
exit();
}
if (file_exists('path/to/cached/css/'.md5($_GET['f'])) {
// just include that file...
readfile('/path/to/cached/css/'.md5($_GET['f']));
exit();
}
$files = explode(',', $_GET['f']);
ob_start();
foreach ($files as $file)
{
readfile($file);
}
// set a header (including the etags, future expiration dates..)
Header(....);
echo ob_get_flush(); // remove whitespace etc..
// write a new cached file
file_put_contents('/path/to/cache/'.md5($_GET['f']));
exit();
You can then do href="css.php?f=style.css,something.css,other.css" the script will then make a cache file which is the md5 of those files included.
The above example isn't complete.. it's more pseudo really.
Does anybody know a purely PHP based way to alter the frequency of an MP3 file?
I am on shared hosting with this, so installing ffmpeg or something similar is out of the question.
If this requires actually altering the audio data, then I guess it is not possible nor feasible to do with PHP, but I was thinking maybe this is just a header setting. I don't know.
Background:
A client's website is utilizing a Flash based MP3 player to play some audio.
The client is producing the audio herself.
The trouble is that the tools that she is producing it with, and is familiar with, automatically produces MP3 files with a frequency of 48000hz, while some versions of Flash have trouble playing anything with a frequency differing from 44100khz. (See my related question here).
I would like to avoid adding yet another program to the already complex audio production process, and solve this on the web server end if possible.
I was thinking maybe this is just a header setting.
No. That is, you can probably change it in the header, if you don't mind your MP3s being played too slow or too fast with a shifted pitch.
If you want it to sound the same, you will need to re-encode. Decoding to WAV (or raw samples), resampling, then re-encoding is a possibility, and probably your only one.
Maybe the way MP3 works allows for a shortcut (like JPEG allowing for lossless rotation), but I am unaware of any such methods.
I have a few sites I built for my work, nothing major, mainly just little tools which people can access and use when they're out of the office. I'm not very experienced as a developer but I like to tinker quite a lot and I was wondering if anyone had any clever little tweaks I could do to my sites to make them download faster? We have an office in south america with a poor internet connection who constantly complain my sites take too long to use. So far I have found the following site which was quite useful and the guys in the other office said they'd seen a difference in the service www.dev-explorer.com/articles/apache-optimisation
Anyone kno of any more little bits and pieces I could do?
Any help is much appreciated.
Thanks in advance
John
Look into YSLOW and read the Yahoo Dev blog. You can do a lot by optimizing the front-end.
Limit the number of http requests (css, js, images)
Use mod_deflate in apache to gzip your content
Use a far-future expires header whenever possible
Make your HTML markup as lean as possible
2 things (from YSlow) that will help are a CDN (Content Delivery Network)... and cookie-less servers for static content.
Even if you can just push your images to load off another server you'll be able to load your HTML content faster while image downloading can happen in the background from the other server(s).
Try to have these other servers (for images, CSS, and Scripts) be cookie-less if possible, its a minor saving, but it sounds like you're trying to squeeze every last drop. ;-)
and of course, cache everything except your HTML.
I'd got for yslow, as already said, and better (because is what yslow is based on) the Yahoo Exceptional Performance Team best practices
A few simple tricks:
Firstly, limit yourself to exactly one CSS and one Javascript file. No more. If you have multiple compact them into one (each). Ideally, your Javascript should also be minified. I've been using JSMin for this lately.
There are some more advanced techniques to optimize this further. You set the expires header to far in the future so the browser doesn't download it as often. To push changes you need to change the link to the css/js file though. You can do this with Apache mod_rewrite and a small PHP script.
More on this in What is an elegant way to force browsers to reload cached CSS/JS files?
You can also use the expires trick on images.
Secondly, gzip your constent. Typically all you have to do for this in PHP is start all your scripts wiht:
ob_start('ob_gzhandler');
This turns on output buffering (good idea anyway) and if the browser says that it supports gzip encoding, your script will be gzipped before sending it to the client.