I have created an OpenLayers application, but when my internet connection is slow some of the requests to the map server do not complete.
The worst part is when you try to change the zoom in / out; the OpenLayers app does not try to download the images again. I guess because are already in the cache.
So how do I create some validation so when map pieces do not download, the program tries again?
Or at least: how I do to remove bad map pieces from the cache?
Network Traffic From Browser
I see that you're using MapServer. If your spatial data doesn't change often, you could produce a cache of tiles using MapCache. That would speed up the requests for tiles and avoid your issue completely.
Related
I'm developing a chat app with Firebase. Am currently still in development phase.
Profile pictures of test users are uploaded to Firebase Storage, and are downloaded in the home screen (with all the pictures). I realized that with that I very quickly used up storage download requests (easily hit 3,000 requests in one night, and hit the free plan quota!).
What are some best practices I could use to minimize download requests? Just to be sure I'm doing it right - I'm sending a GET request to the Firebase Storage url directly: https://firebasestorage.googleapis.com/... to download the image. Is that the right way to do it?
Two suggestions that might help:
Cache your images! If you keep requesting the same images over and over again over the network, that's going to use up your quota pretty fast. Not to mention your user's battery and network traffic. After you retrieve an image from the network, save it locally, and then the next time you need an image, look for it locally before you make another network request. Or consider using a library like PINRemoteImage that does most of the work for you. (Both on the retrieving as well as the caching side)
Consider uploading smaller versions of your image if you think you might be using them often. If your chat app, for instance, saves profile pictures as 1024x768 images, but then spend most of its time showing them as 66x50 thumbnails, you're probably downloading a lot of data you don't need. Consider saving both the original image and a thumbnail, and then grabbing the larger one only if you need it.
Hope that helps...
In my Rails 4 app, I am using the metainspector gem to allow users to display meta data from a URL they post to a form.
Since I installed this gem, each time I try to visit the page of my own app where metadata is pulled from another website, load time increases significantly.
The load time increase goes from an imperceptible delay for small and local websites, to almost freezing the app for larger and foreign websites.
To give you an idea, a regular page usually loads under 400 ms: when we pull data with metainspector, it can go beyond a 30,000 ms (I measured these load times with rack-mini-profiler).
I did not find much about similar issues online.
Here is what I am trying to figure out:
Does this sound normal or did I setup something in the wrong way?
Is there a way to speed up load time with metainspector? For instance by caching responses?
If there is no way to speed up load time, should I implement a timeout limit and display an error message?
That is perfectly normal, to be exact it's not metainspector what is slowing your app down, it's the fact that you're requesting external URLs.
You should try to cache the responses using the built-in caching mechanism in metainspector, but also if possible move this to an asynchronous job using a background queue, and save or cache the result.
I am creating an offline map app for iPhone (Using MKMapKit). It will have a list of countries. If the user selects a country, all tiles will be downloaded and stored on the iPhone. I will use Open Street Map as the maps provider.
(I have read that bulk downloading is forbidden, but given that tiles for a country is pretty small (≈200MB) and that they will only be downloaded once, at least I don't think it's a problem.)
I think I will be using the template URL #"http://c.tile.openstreetmap.org/{z}/{x}/{y}.png" to downloaded the tiles and then store them. My problem is that I don't know how to determine which tiles belong to which country and therefore to determine which to download.
I found this link in another SO answer, but that only allows you to download .pbf files (which I have no idea what it is) and per continent.
First: If you really want to grab all tiles (at all zoom-levels) you should read the OSM Tile Usage Policy again with care. If you just want to download all the tiles once (for your dev environment) you can use existing downloaders that allow you to select the desired country and download them. This will result in a directory with 1000s of small images and might take some days.
The better way would be to setup your own (desktop or server based) tile rendering chain that gives you full control about styling and doesn't stress the community ressources. Please consult www.switch2osm.org for a detailed tutorial on how to setup a server based rendering stack.
This is a problem. Downloading 200 MB of tiles only once is already questionably because it is not just about the traffic, these tiles have to be rendered first. But if I understood you correctly, with your application every user will download these 200 MB.
Instead you should think about downloading raw data (which PBF is) and either render your own raster tiles as already suggested by MaM, or create a vector map as done by other popular apps, like OsmAnd and Navit.
so my application connects to a URL (via URLConnectionDelegate), gathers data, which contains image URLs. It then connects to each and every image url (again, via URLConnectionDelegate), and gathers the images for each image.
Everything works perfect, couldn't be happier.
But the problem is that I can't really track the networkActivityIndicator. There are like, 100 connections going off at once, so I don't know when or how to set the networkActivityIndicator to turn off once the last image is done loading.
Does anyone have any suggestions without me having to redo a bunch of code?
Thanks for the help guys
The typical solution is a singleton object that you call [NetworkMonitor increaseNetworkCount] and [NetworkMonitor decreaseNetworkCount] at the appropriate points.
The nicer solution is a toolkit like MKNetworkKit, which will handle this and a bunch of similar things for you (like managing your download queue, since 100 simultaneous connections is actually very bad on iOS).
I'm working on a website with reasonably heavy traffic and I'm looking into using a CSS sprite to reduce the number of image loads in its design.
Are there any advantages to using a CSS sprite besides reducing the amount of transmitted data? How much space do you really save? Is there a threshold where using sprites becomes worthwhile to a website?
UPDATE: Thank you for your responses. They are obviously all very carefully thought out and present good sources to verify your points. I feel much more capable to make an informed decision about using CSS sprites in my site design now.
The question is generally not about the amount of bandwith it might save. It is more about lowering the number of HTTP requests needed to render a webpage.
Considering :
web browsers only do a few HTTP requests in parallel
doing an HTTP request means a round-trip to the server, which takes lots of time
we have "fast" internet connection, which means we download fast...
What takes time, when doing lots of requests to get small contents (like images, icons, and the like) is the multiple round-trips to the server : you end up spending time waiting for the request to go, and the server to respond, instead of using this time to download data.
If we can minimize the number of requests, we minimize the number of trips to the server, and use our hight-speed connection better (we download a bigger file, instead of waiting for many smaller ones).
That's why CSS sprites are used.
For more informations, you can have a look at, for instance : CSS Sprites: Image Slicing’s Kiss of Death
Less http requests = faster loading overall. Yahoo and co. use this technique, if you can imagine the amount of users they have it saves a lot of bandwidth. Imagine 50 seperate images for icons, that's 50 seperate http requests as opposed to having just one css sprite containing all the images, that would save 49 http requests and multiply that per all the users of the site.
Actually, sprites are not used to reduce the amount of transmitted data (in most cases it slightly increases the amount of data transferred), but to reduce the amount of requests done on the server.
HTTP requests on a browsers are traditionally done in sequence. Which means that one request will not start until the previous one is completed. Also, it is expensive to open a connection to do a request. By limiting the amount of requests made on the server, you are increasing the speed the elements load.
I think Yahoo has the best argument for CSS sprites. Besides, the whole page is worth reading:
http://developer.yahoo.com/performance/rules.html#num_http
Besides the performance enhancement of the overall page load by limiting the amount of requests, image sprites can also make dynamically swapping images (for example changing the background image of a nav item on hover) "perform" a little better since all you do is change the x,y instead of the src.
So I guess to answer what is the threshold to warrant using them, I'd say immediately because of the potential loading improvements on each individual client.
In addition to reducing HTTP requests (as already noted), CSS sprites aren't dependent on JavaScript. This gives a few other advantages:
less code to maintain
easier cross-browser testing
can be coded inline via style attributes
no DOM hacking
no image preloading (so less administrivia -- "Oh wait, I need to preload that new nav button ... crap which .js file has my preloader?")
you can use css classes to apply it to several selectors
can be applied to any selector with the :hover pseudoclass, or in any selector that can be wrapped with an anchor (not just imgs)
If you're not averse to DOM hacking, though, you can get some nifty animation effects just by pushing the X and Y values around. Which makes it easier to animate lots of different states (like keypress or onmouseclick).
There are a few interesting graphic production side effects as well:
fewer graphic production files
easier to do layout for buttons etc. directly in HTML (less need for PSD comps)
easier to make GUI changes without having to regenerate a ton of graphics
just that much tougher for image pirates to slurp your graphics