GuitarBoy (2014-06-26 20:33:25)

---

<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.

This post has been edited one or more times, the last time was:
2014-06-27 03:37:48

---

CoolApps (2014-06-28 20:04:55)

---

A little irrelevant, but you don't use whitespaces in variables.

---

GuitarBoy (2014-06-28 23:50:57)

---

What language allows whitespace in variables? Not PHP or JS I don't think.

---

CoolApps (2014-07-01 15:05:57)

---

Python doesn't either.

---

GuitarBoy (2014-07-02 22:26:06)

---

O_O So why did you bring it up?

---

CoolApps (2014-07-05 15:53:20)

---

Because you don't want others wondering why it doesn't work just because of a whitespace in a variable name.

---

GuitarBoy (2014-07-05 23:32:24)

---

True, but this is for optimization, meaning that the people reading this KNOW how to code with passable syntax.

---

CoolApps (2014-07-06 00:49:11)

---

Never mind, it's just that it looked like the code there was PHP when it's JavaScript.
Not so clear at that part lol.

---

Kouta (2014-09-10 02:25:58)

---

Very useful, though it is recommended to use the while loop as an example as well for the people who create social media websites. I have encountered so many people that doesn't know how to use the while loop properly. ~Pro64TM

This post has been edited one or more times, the last time was:
2014-09-10 09:26:23

---