StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here is the list where you can test your webpage:</p> <ol> <li><a href="https://developers.google.com/speed/pagespeed/insights" rel="noreferrer">PageSpeed Insights - Google Developers</a></li> <li><a href="https://addons.mozilla.org/en-US/firefox/addon/yslow/" rel="noreferrer">YSlow</a></li> <li><a href="http://www.webpagetest.org" rel="noreferrer">Webpagetest</a></li> <li><a href="http://tools.pingdom.com" rel="noreferrer">Pingdom Tools</a></li> <li><a href="http://gtmetrix.com/" rel="noreferrer">GTmetrix</a></li> <li><a href="http://www.iwebtool.com/speed_test" rel="noreferrer">iWebTool</a></li> <li><a href="http://cloudmonitor.ca.com/en/checkit.php" rel="noreferrer">APM Cloud Monitor</a></li> </ol> <p>Also to speed up your page you can use:</p> <ol> <li><a href="http://aws.amazon.com/cloudfront/" rel="noreferrer">Amazon CloudFront</a></li> <li><a href="https://www.cloudflare.com" rel="noreferrer">CloudFlare</a> - has free plan</li> </ol> <p><br/></p> <hr/> <p><strong>1. Optimize Your Images</strong></p> <p>Know when to use the appropriate file format for your images. Changing to a different file format can dramatically decrease the file size of an image.</p> <ul> <li><strong>GIF</strong> - is ideal for images with few colors like logos.</li> <li><strong>JPEG</strong> - is great for images with lots of colors and details like photographs.</li> <li><strong>PNG</strong> - is the choice when you need high quality transparent images.</li> </ul> <p>Check out these resources to learn more about optimizing images:</p> <ul> <li><a href="http://sixrevisions.com/web_design/comprehensive-guide-saving-images-for-web/" rel="noreferrer">The Comprehensive Guide to Saving Images for the Web</a></li> <li><a href="http://sixrevisions.com/graphics-design/jpeg-101-a-crash-course-guide-on-jpeg/" rel="noreferrer">JPEG 101: A Crash Course Guide on JPEG</a></li> <li><a href="http://sixrevisions.com/web_design/web-designers-guide-to-png-image-format/" rel="noreferrer">Web Designer’s Guide to PNG Image Format</a></li> <li><a href="http://sixrevisions.com/tools/8-excellent-tools-for-optimizing-your-images/" rel="noreferrer">8 Excellent Tools for Optimizing Your Images</a></li> </ul> <p>For reducing your image size I would recommend <a href="http://www.tinypng.org" rel="noreferrer">TinyPNG</a></p> <hr/> <p><strong>2. Don’t Scale Down Images</strong></p> <p>Avoid using a larger image than you need just because you can set the <code>width</code> and <code>height</code>attributes of <code><img></code> elements in HTML.</p> <p><sub>* If you need a 100x100px image and you have a 700x700px image, use an image editor like Photoshop or one of these web-based image editors to resize the image to the needed dimensions. This lowers the file size of the image, thus helping to decrease page loading times.</sub></p> <hr/> <p><strong>3. Compress and Optimize Your Content</strong></p> <p>The task of compressing your website content can have a huge impact on reducing load times. When using HTTP compression, all of your web page data is sent in a single smaller file instead of a request that is full of many different files. For more information, see this Wikipedia article on <a href="http://en.wikipedia.org/wiki/HTTP_compression" rel="noreferrer">HTTP Compression</a>.</p> <p>You can also optimize and compress your JavaScript and CSS files by combining them and minifying the source code.</p> <hr/> <p><strong>4. Put Stylesheet References at the Top</strong></p> <p>Moving your stylesheet references to the <code><head></code> of your HTML document helps your pages feel like it is loading faster because doing so allows your pages to render the styles progressively. In addition, it doesn’t hurt that it’s the W3C standard.</p> <hr/> <p><strong>5. Put Script References at the Bottom</strong></p> <p>Browsers can only download two components per hostname at the same time. If you add your scripts towards the top, it would block anything else below it on the initial loading of the page. This makes it feel like the page is loading slower.</p> <p>To avoid this situation, place script references as far down the HTML document as possible, preferably right before the closing <code><body></code> tag.</p> <hr/> <p><strong>6. Place JavaScript and CSS in External Files</strong></p> <p>If your JavaScript and CSS are directly in your HTML document, they are downloaded every time an HTML document is requested. This, then, doesn’t take advantage of browser caching and increases the size of the HTML document.</p> <p>Always place your CSS and JavaScript in external files; it’s a best practice and makes your site easier to maintain and update.</p> <hr/> <p><strong>7. Minimize HTTP Requests</strong></p> <p>When visiting a new web page, most of the page-loading time is spent downloading components of that page (e.g. images, stylesheets, and scripts).</p> <p>By minimizing the number of requests a web page needs to make, it will load faster. To reduce HTTP requests for images, one thing you can do is to use <a href="http://sixrevisions.com/css/css-sprites-site-speed/" rel="noreferrer">CSS sprites</a> to combine multiple images.</p> <p>If you have multiple stylesheets and JavaScript libraries, consider combining them to reduce the number of HTTP requests.</p> <hr/> <p><strong>8. Cache Your Web Pages</strong></p> <p>If you use a <a href="http://sixrevisions.com/web-development/how-to-evaluate-what-cms-to-use/" rel="noreferrer">content management system</a> that dynamically generates your web pages, you should statically cache your web pages and database queries so that you can decrease the strain on your server as well as speed up page rendering times.</p> <hr/> <p><strong>9. Reduce 301 Redirects</strong></p> <p>Every time a 301 redirect is used, it forces the browser to a new URL which increases page-loading times. If possible, avoid using 301 redirects.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload