Online Users Page


QN

New Blog Entry In Todd's Film Reviews!
More..

Thread: Website Optimization Tips

All categories Return to thread list

44GuitarBoy
26/06/14 at 3:39 PM
<This thread allows you to post optimization tips to improve website stability and usability>

If you are willing to make a website, it is important to keep your clients in mind.

Some clients may be on older devices, such as a Nintendo DSi or an old trac phone. Others may have mobile data caps or mobile data limits. It is important to focus on not just making beautiful websites and web applications, but web optimization as well.

If you have any knowledge of machine code or computer programming, optimization should be very important to you in terms of website development and design. HTML, CSS, JavaScript, PHP, Python, Perl, SCSS, SASS...they are all abstract interpreted programming languages. They are interpreted by a program that tells your page how to display, what to do, and how to do it, while maintaining the human-readable code we write.

Machines can only do so much. If code is attempting to execute faster than what the interpreter can interpret, you will have lag. Sometimes it gets so serious that your entire page might hang.

Since machines can only do so much, it is important to take a look at the size of your pages and other resources. Every byte on a web page is allocated to RAM (Random Access Memory), as well as the actual web browser itself. Depending on the size of your page, your images, your CSS and JavaScript files...you may run out of usable RAM.

Having pages that are too big is what causes the "out of memory" error on the DSi/3DS.

Top start optimizing resources such as videos, images, and animations, I suggest you read up on file formats and their differences.

PNGs support alphatransparency (some parts can be transparent or semi-transparent); JPEGs cannot be transparent.

GIFs are usually animated, and can support alphatransparency.

WebP is a new image format that supports alphatransparency, but maintains a smaller filesize than GIFs and PNGs. Support is varied, however, so don\'t depend on them too much.

WebM is a new video AND audio format that produces smaller media files than MP4s, OGGs, and FLVs, while maintaining the same quality. Support is varied for WebM as well, so don\'t use it all the time.

To reduce the filesizes of your images, they can be compressed by stripping pointless metadata, as well as reducing the number of colors that the image can display.

Try these sites out for size (punny):

http://compresspng.com
http://compressjpg.com
http://tinypng.org

I suggest using TinyPNG first for PNG images...THEN using CompressPNG.


Now to start optimizing your code today, you should look at it, and see if there are ways to improve it.

Here\'s a good start:

Loops are great in JavaScript and PHP, but don\'t have them running infinitely. In fact, NEVER have an infinite loop in PHP, JavaScript, Python, or Perl. Avoid it at all costs.

Another issue with looping is that you may be looping more than you should. If you\'re checking if a value is equal to a another within an array, you don\'t need to check the remaining values once you found your needle in the haystack.

Example:
var x = 0,
values = [4,5,6,7,l8];
for(x; x < values.length; x++){
if(values[x] == 6){
//hooray! we\'re finished looping. Execute what you need and gtfo of the loop

break;
}
}

In the example above, once we find the value 6, we don\'t need to continue searching, so just get out of the loop by using the "break" statement. It ends a loop. It can also be used for while loops.
You should break your loops in every language if you no longer need to loop.

Another thing that you can do to optimize your code is to make it shorter.
Shorten your variable names while maintaining readability. Group your variables in JavaScript with ONE \'var\' keyword, and then listing your variables like so:

var foo = \'bar\',
boo = \'baz\',
baz = \'zippity boo bop\';

And use variables when they are helpful, but don\'t ever overuse them (that goes for any language).


If anybody else encounters optimization methods please feel free to post them here for the good of the whole. I\'d post some more but I\'d like to see what everybody else has come up with. Maybe stuff I haven\'t even seen yet.
SocialCu.be is AWESOME.
60umer936

26/06/14 at 3:59 PM
Use WebP. Definitely worth it.
Your mom just called. Check your phone.
1Prestotron
26/06/14 at 9:55 PM
I usually use WebP, that works for me and it\'s really epic. Trust me, do it.
I am so massive.
1Prestotron
26/06/14 at 9:55 PM
Oh @umer936 said that already xD
I am so massive.
16Alyx
27/06/14 at 10:52 PM
Lol
44GuitarBoy
28/06/14 at 6:53 PM
http://caniuse.com/webp

Guys, I like WebP but with such limited support I\'d only do it for specific circumstances, such as Google Chromebook apps.
SocialCu.be is AWESOME.
60umer936

09/07/14 at 10:15 AM
See http://umer936.com

It uses WebP if it can. If can\'t, it falls back to TinyPNG.
Your mom just called. Check your phone.
10TwistedChaos95
09/07/14 at 1:43 PM
Using

if(isset($string[255])) {
// string is 255 characters
}

instead of

if(strlen($string) == 255) {
// string is 255 characters
}

The first one is apparently way better if you know the exact number the int should be.
...No one ever said that hope would be so beautiful!


Back to top
v3.2