I've searched for this, but can't find anything - maybe I'm describing it badly!?
Anyway - I have a website (on an IIS 6 server) whose pages loads 2 or 3 CSS files, these css files are actually ASP files with the response headers set accordingly.
The ASP in the files simply reads the query string to set colours of various css rules based on user preferences.
I've noticed that sometimes pages are loading very slowly, and using the dev tools in Chrome (although this seems to apply in all browsers) I could see the page load is stalling on these CSS files, the reported latency can be up to 2 minutes - everything else only takes a few milliseconds.
I've tried using PHP files instead of ASP files, but this makes no difference!
The website is behind password so I can't really demo it easily - although could try and set something up if it would help - Although it isn't consistent, it seem to happen most of the time, but sometimes can be quite fast!
Any ideas what I could try?
Thanks
A couple of things you can try are using Google's page speed or Yahoo's YSlow - both will generate suggestions for you to help improve performance.
Related
From Google I have found that there are a lot if issues regarding Firefox's built in "Preview option" for PDF's. Workarounds found is to basically disable the PDF viewer and use anther one. Unfortunately from a developers point of view, this is unacceptable as I will be unable to tell users to disable the previewer. I am asking the group am I doing something wrong, which is causing FireFox's Previewer to choke? basic few lines of code I am using to display the pdf is below. Am I missing something with my headers? Please note that the code works on IE and Chrome, as well as firefox if I change the viewer.
<?php
header("Content-type: application/pdf");
echo $fileData;
?>
How the page renders with previewer enabled:
Frankly I can't figure out why we're wasting resources on re-inventing the wheel (ie, trying to replace Adobe Reader extensions); not to mention that so far I have not seen a single "replacement" -- including Chrome, etc. -- that offers the complete page zooom, format and viewing controls. Why don't we spend that energy on solving the print interface issues!! Or the fact that Firefox leaks like a sieve and crashes catastrophically when it mis-handles memory requests. Sure, Chrome leaks too but it does handle memory requests perfectly. For example, Firefox crashes pretty reliably once the Paged memory gets more than 2GB above my 3.5GB system RAM. But Chrome runs happily at 4-5GB Paged memory above that same system RAM and I only restart it because the system slows below usefulness; it is only an old Pentium D after all. Which brings up another point. Years ago we used to make fun of Microsoft for their "bloatware" OS. Well, boys and girls, those same laughs now apply to all your "modern" software. Assembly might be harder but it sure was smaller and quicker.
If the PDF renders Firefox spawning the external Adobe reader and other browsers, then you are doing everything right and the issue is with the PDF.js rendering.
What can you do about it? Best solution is to fix the underlying issue in the PDF that is choking pdf.js -- could be font issue, or a text layer issue, or a few other things. How do you find out what that issue is? Try appending #disableWorker=true to your URL.
For example, open these URL in Firefox with the pdf.js enabled:
http://www.vd.ch/fileadmin/user_upload/organisation/dinf/sm/fichiers_pdf/TP2020_sm_061010.pdf
http://www.xfront.com/URLversusURN.pdf
Notice it gives you the warning or doesn't show up at all? This is expected, bugs have been reported against both these. Now append the debug line:
http://www.vd.ch/fileadmin/user_upload/organisation/dinf/sm/fichiers_pdf/TP2020_sm_061010.pdf#disableWorker=true
http://www.xfront.com/URLversusURN.pdf#disableWorker=true
Either no more error or at least the contents show. Not a magic bullet, and this might not work for you, but now you can follow the debugging guide to figure out what is going on and fix it in the PDF itself.
append #disableFontFace=true to the URL
Looks like a defect in PDF.js (one of hundreds). Since some time Firefox comes with a PDF reader implemented in javascript, which frankly should never have been put into production in the state that it is now.
Feel free to file a new issue for PDF.js, attaching your PDF file.
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.
Before anyone rips me a new one...I HAVE PERMISSION to hotlink images from an external site. It works all good, however I don't like that everytime i refresh the page it pulls the images again. My server is running PHP, is there a way to cache the images once, then display them via some local code. I'm really just looking for a way to speed up the page, and not waste anyones bandwidth. Thanks in advance.
I was looking for an answer to this myself and didn't find anything that fit my needs perfectly. TimThumb came close (you'll have to Google it; I'm a newbie and can thus only post one hyperlink), but it was a little overkill (it has all kinds of image manipulation stuff built-in) and couldn't handle some of the image types I was interested in using (specifically *.ico files). So I wrote my own quick-n-dirty PHP script that should handle any image type and is only concerned with caching the images alone and passing them through without any modifications.
I'm a bit concerned my script may have glaring security flaws or could be more efficient. Also, it's not very smart the way it caches. It never bothers to check later to see if the image has been updated, and it never bothers to clean up its own cache. If anyone has suggestions for improvements to my code, I'm open to feedback.
Here's the script: Warm linker - RefactorMyCode.com
You might consider using a proxying CDN like CoralCDN.
I've bumped into a problem while working at a project. I want to "crawl" certain websites of interest and save them as "full web page" including styles and images in order to build a mirror for them. It happened to me several times to bookmark a website in order to read it later and after few days the website was down because it got hacked and the owner didn't have a backup of the database.
Of course, I can read the files with php very easily with fopen("http://website.com", "r") or fsockopen() but the main target is to save the full web pages so in case it goes down, it can still be available to others like a "programming time machine" :)
Is there a way to do this without read and save each and every link on the page?
Objective-C solutions are also welcome since I'm trying to figure out more of it also.
Thanks!
You actually need to parse the html and all css files that are referenced, which is NOT easy. However a fast way to do it is to use an external tool like wget. After installing wget you could run from the command line
wget --no-parent --timestamping --convert-links --page-requisites --no-directories --no-host-directories -erobots=off http://example.com/mypage.html
This will download the mypage.html and all linked css files, images and those images linked inside css.
After installing wget on your system you could use php's system() function to control programmatically wget.
NOTE: You need at least wget 1.12 to properly save images that are references through css files.
Is there a way to do this without read and save each and every link on the page?
Short answer: No.
Longer answer: if you want to save every page in a website, you're going to have to read every page in a website with something on some level.
It's probably worth looking into the Linux app wget, which may do something like what you want.
One word of warning - sites often have links out to other sites, which have links to other sites and so on. Make sure you put some kind of stop if different domain condition in your spider!
If you prefer an Objective-C solution, you could use the WebArchive class from Webkit.
It provides a public API that allows you to store whole web pages as .webarchive file. (Like Safari does when you save a webpage).
Some nice features of the webarchive format:
completely self-contained (incl. css,
scripts, images)
QuickLook support
Easy to decompose
Whatever app is going to do the work (your code, or code that you find) is going to have to do exactly that: download a page, parse it for references to external resources and links to other pages, and then download all of that stuff. That's how the web works.
But rather than doing the heavy lifting yourself, why not check out curl and wget? They're standard on most Unix-like OSes, and do pretty much exactly what you want. For that matter, your browser probably does, too, at least on a single page basis (though it'd also be harder to schedule that).
I'm not sure if you need a programming solution to 'crawl websites' or personally need to save websites for offline viewing, but if its the latter, there's a great app for Windows — Teleport Pro and SiteCrawler for Mac.
You can use IDM (internet downloader management) for downloading full webpages, there's also HTTrack.
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.