Suppose I display a few dozens thumbnails in a few web pages (10 thumbnails per page). I would like to load them as quickly as possible.
Does it make sense to get a few thumbnails with one HTTP request (one thumbnail is ~10K) ? How would you suggest do it with JavaScript?
You can, but you need to jump through a few hoops:
1) Base-64 encode the images on the server as a single file.
2) Send them to the client as a single request blob, via AJAX.
3) Decode the images back into pieces.
4) Use Data-URIs to insert them into the DOM.
...not really worth it.
Regarding network performance it does really make sense.
You could, for example, put a predefinited number of thumbails along in a single image.
On client side you can treat that image like using "css sprite" tecnique
(http://www.w3schools.com/css/css_image_sprites.asp)
If it's important for you to send the images as fast as possible I would consider sending them as a sprite. Unfortunately this may be somewhat difficult on the back end if the provided images may vary. If they are static and the same for every user it is way easier as you can manually prepare the images and the front end code to display the correct image parts.
In combination with the sprite approach it would also be useful to enable progressive/interlaced loading in order to deliver visible results as fast as possible.
Related
I do not want to turn off caching for a site, but I do want to avoid caching in some areas. Wondering the best way.
First, I pull data from an API to check the "online" status of an advisor.
Next, I store that (and any other data that may change) in a CPT.
At the same time, I store a random string of characters (that I can sort on later giving the appearance of random order).
I pull the data from the API on every page load, because I need real-time data. This makes me cringe, but I don't know any other way. This part isn't cached.
However, when I display the list of "advisors", I sort them by online status, then the random string. This is meant to give fairness as to who is above the fold, and near the beginning of the results.
Well, that is all generated with PHP, so therefore the resultant HTML is cached.
I read a bit about the WP Rest API, and perhaps that will help with the speed of the query, but that won't help with the cached HTML right?
So, regardless of how I query the data (REST API, WP_Query), am I to assume that I must iterate through the data with JavaScript to avoid it being cached by the Full Page Cache solution of the server?
If I use WP_Query still, and I use PHP to display the results, can I just call the PHP function from JavaScript?
Every page of the site will display some or all of the advisors (ex: homepage 8 advisors, the "advisor" page shows all, the "advisor" category pages, and 4 advisors in the footer of every other page), so it doesn't make sense to turn off caching.
Any direction would be greatly appreciated! Thanks in advance.
Are you not better of doing it with AJAX?
Or, I'm pretty sure there's like a line of PHP that you can add to pages so they won't get cached. Woocommerce sometimes needs this for example. I guess it depends on which caching plugin you are using. Which one are you using?
Or, for example WP Super Cache has an area where you can exclude certain pages from caching. Under Settings -> WP super chache -> Advanced -> Accepted Filenames & Rejected URIs.
I am working on a js app which loads some xml files stored in another server.
I am using ofcourse XHR to load and access their content.
As a first level I just acces the top level file which contains the name of the elements and I show them in a thumbnail format. My idea is to show the title of the files and the number of items that every element contain. Also and in the second level when the user clicks on one of the elements(thumbnails) I load the content of the clicked element.
So I am wandering if my process is performant or not since I load or access the files two times the first when I show the number of items an element contain and in a second time when the user clicks on the element and iI shows its content.
Please what do you think? Is there another good solution?
Thanks a lot for your answers :)
Making two HTTP requests where you could make one is usually going to be less than ideal. It's certainly going to take a bit longer, although the "bit" may be very small indeed if the browser can satisfy the second request from cache without even a revalidation query to the source server.
It's up to you what to do. If you keep a copy of the response after using it to create the thumbnail, you're using more memory; if you don't and make a second request to the server, you're doing something that could be slightly slower.
Takes your money, makes your choice.
I'm working on a database of math problems right now - all the problems are formatted in LaTeX, but there are Asymptote images as well.
It doesn't look like Mathjax supports Asymptote - what would be the best way to get the images from each math problem? How does Art of Problem Solving's TeXeR get Asymptote?
Could we send the code and render the image client-side, or should we extract the asy code for each problem, get an image, save these images to the database, and link each image to its respective problem?
I'm very late here, but I'll suggest something anyway.
What I would do is simply render all the images serverside. You can have Asymptote rerender images if there are any changes to the original file.
That way you save bandwidth and processing time for the client a lot. You may have a lot more data to store, but this way you'd also have a bit more control over the pics.
Asymptote lets you define the output, that way you can have Your server automatically create them based completely on the original problem, name them accordingly. That way they are already 'linked'.
This is probably the best answer I can give without code.
I want to make a ps3 card like this one:
http://gamercards.exophase.com/2516.png
using the data from the ps3 network site, this one
http://us.playstation.com/publictrophy/index.htm?onlinename=bruno_shady
but I want to make something different, something that show only the name of the person and the games that the person has, to post on a forum that I frequent...
How can I do it, or what do I need to do it?
something simple would be nice, and that it update itself from one to one day, or even more, two, etc...
You would need a server side language to do that - like PHP.
You will need:
A way of catch the data from the PlayStation website. It can be done quite easy using the curl library and RegExps.
A way of compose the final image. You should have one or more base image(s). You will need to load the image with a image library like GD in PHP and draw on it the necessary text.
A cache system. Actually it not necessary but your server will waste too much resource otherwise. It's about of saving the generated image in the hard disk at the first request and send it on every request, with a refrest rate of some hours or days.
Is it possible (and supported cross-browser) to embed an image into the XML of an AJAX response, and then load that image using JavaScript?
I have a system that does some calculations based on the number of sessions running through it. The results are then graphed, and returned in two parts:
1) XML containing information about the graph, totals, and Image map data allowing the user to click on relevant areas.
2) The graph image.
As the data can change between the two requests (and could be expensive to calculate), I'd prefer to do it in a single request (return the image with the XML). The current implementation caches the stats for a small period so that the results of multiple requests will still match. As the amount of data that needs to be cached is going to be increasing (from ~2.5K to ~1.2MB), I would like to try an alternative method.
NOTE: I do not want to use inline b64 PNG images as they are not supported in IE.
Can you not store the image on the server and send the URL to the client?
As this seems like more work that it's worth, I've decided that a simpler solution would be:
1) Send XML data to the client with the details of what is to be graphed.
2) Client sends a request for the image, including the data to graph (similar to the Google Chart API).
This decouples the chart rendering from the data, and then it can be used in the future to generate generic charts for other data sets. The other benefit is that it doesn't require any caching server-side since only 1 request is used.
You might want to check this link to see if this concept will work. This link maybe useful.
I think trying to combine both set of data in the XML would be interesting.
Have you considered using Google's Chart API?
Well actually you can but it's probably not going to be worth it. It seems like a vector based method such as canvas and the VML alternatives for IE would be a better alternative for rendering graphs. Then you only have to pass the graph data to the browser.
If storing is not an option. Create image in memory and flush the binary image data to response from a script, like a php file. Just use the correct header:
Content-type: image/png
The image gets regenerated every time.
To be absolutely sure the image does not get cached, append some random parameter to the querystring.
You could return the image to the ajax-client, and then include the XML data in a X-HTTP-Header for the image.
But you need to find out if it is possible to read the X-header from the ajax-client though.