SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)

    Ways to make your website run faster!

    Hi there guys,

    I am currently looking into making my websites lighting fast and I wanted to list ways in which we can do this.

    Minifying CSS and HTML
    Optimizing Images
    Reducing HTTP requests
    Content Delivery Network
    Avoiding empty image alt tags
    Use CSS Sprites where possible

    Are there any other ways we can speed up our websites.

    PS: One of my websites has thousands of CSS declarations, are there any ways you can speed up your decla
    rations?
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Share the CSS and JavaScript between pages as much as possible so that it will be cached when the second and subsequent pages are accessed.

    Attach any JavaScript at the bottom of the page so that the page can be displayed while the JavaScript is still loading.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Some people like to concatenate files such as CSS file and JS files:

    http://robertnyman.com/2010/01/19/to...-environments/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Choosing good and stable web space is also very important.

  5. #5
    SitePoint Enthusiast seanuk's Avatar
    Join Date
    Dec 2012
    Location
    UK
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sega View Post
    PS: One of my websites has thousands of CSS declarations, are there any ways you can speed up your decla[/I]rations?
    Single line CSS, and all CSS in one file

    same with JS, all into one file, and put the JS file at the bottom of your html file

  6. #6
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    @felgall ; @ralph.m ;
    Are there any ways you can do this concentration of file locally? It's not on an online environment. Also are there any ways to safely minify your script without it breaking. From experience when you minify your JS it ends up breaking.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    In addition to what you and others have listed, I'd also take the backend into account. It's equally important in terms performance. Whatever language, web framework or CMS you're using, there are always ways to improve performance and trim the fat. Some CMSes are hopelessly bloated, so your options are somewhat limited and dependent on the developers who created the CMS/Web Framework.

    Still, there's quite a lot you can do, so I'd scan the web and look for bottlenecks and how to improve on them.

    Same goes for databases, what kind of database you're using, whether or not you're applying extra layers. Depending on what you use, perhaps there are options to implement other ways to store your data.

    I can recommend Steve Souders as the ultimate source in regards to performance: http://stevesouders.com/

    His books are great, too, and I can wholeheartedly recommend them.

    Quote Originally Posted by Sega
    PS: One of my websites has thousands of CSS declarations, are there any ways you can speed up your declarations?
    Well, you can group selectors and use as much shorthand code as possible. Thousands of declarations does sound quite a lot to me and I have the feeling you could reduce that a lot by approaching the markup differently, i.e. creating basic containers and styles and making those reusable.

    In my mind, the best approach is a solid balance between scalability and performance.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Sega View Post
    Are there any ways you can do this concentration of file locally?
    I'm not sure. But the alternative would be to put all your scripts into one file, I guess.

    are there any ways to safely minify your script without it breaking. From experience when you minify your JS it ends up breaking.
    I guess you could try different minifier tools to see which works best, such as this one:

    http://fmarcia.info/jsmin/test.html
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    Community Advisor ULTiMATE's Avatar
    Join Date
    Aug 2003
    Location
    Bristol, United Kingdom
    Posts
    2,160
    Mentioned
    46 Post(s)
    Tagged
    0 Thread(s)
    It might be worth looking into YSlow if you want to reduce your page load times.

    http://developer.yahoo.com/yslow/

    However, all of the suggestions raised are to do with front-end optimisation. In my experience it's definitely worth using a profiler on slow parts of your website to see if there are any issues with your code. For compiled frameworks like .NET this can help tremendously.

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    In order on of speed results you'll likely see...

    1. optimize images (Photoshop > Menu > File > "save for web and devices" > usually best is between 40% - 60% optimization)
    2. put js scripts at bottom http://uxmovement.com/content/why-yo...efore-scripts/
    3. GZIP and compress files at server level http://www.visibilityinherit.com/cod...ur-website.php
    4. combine css and js scripts into one file (one .css and one .js - keep the order originally on page)
    5. Compress js - dont worry about css http://compressorrater.thruhere.net/ (use YUI Compressor - prob the best and safest)
    6. sprites http://www.visibilityinherit.com/cod...tion-image.php

  11. #11
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ULTiMATE View Post
    It might be worth looking into YSlow if you want to reduce your page load times.


    However, all of the suggestions raised are to do with front-end optimisation.

    I must be in invisible mode...
    Maleika E. A. | Rockatee | Twitter | Dribbble



  12. #12
    Community Advisor ULTiMATE's Avatar
    Join Date
    Aug 2003
    Location
    Bristol, United Kingdom
    Posts
    2,160
    Mentioned
    46 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    I must be in invisible mode...
    Ha! Apologies for missing your reply. I blame my missing glasses!

  13. #13
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    I must be in invisible mode...
    I'm always in invisible mode. It's a setting I found deeply nested in My Sitepoint.

  14. #14
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Sorry for the late reply guys.

    Quote Originally Posted by kohoutek
    Thousands of declarations does sound quite a lot to me and I have the feeling you could reduce that a lot by approaching the markup differently, i.e. creating basic containers and styles and making those reusable.
    It's mainly due to the CSS switcher, it comprizes over 200 different backgrounds with over 8 variations styles and 7 different colors. To add to all that it's both responsive and retina-ready, so this did get a little bit complex. Normally I would not have so many declarations, but with everything said I hope it's understandable that this was not my choice. Typically I would end up with 50KB for the CSS, for this template it's over 100KB! So we need to fix this somehow.

    Quote Originally Posted by EricWatson
    I also found that when placing the external jQuery on the bottom of the page (just above the closing body) I get FOUC, something which I did not get before.

    There are around 15 different script files. I used the minified version of them where possible. In addition to this I used head.js. I was recommended another tool by a friend - jQuery validation plug-in. I don't know how to use this and it's not something I feel will be straight-forward as it's purpose is validation and not minifying.

    What I liked about head.js is that I could still keep the files in their natural state and it would run them in a single file one it's own. The only downside to this plug-in is that it does not minify the scripts. I could minify each CSS and JS individually which would probably save more space. A dream plug-in would be one that combines and minifies at the same time.

    @EricWatson ;
    I have used spites a couple of time. This would be another cool way to speed up the website. Anything helps at this stage. Not entirely sure you'd do the CSS. Having spites would limit the http requests to files. Maybe another plug-in might be the solution here. CSSSpites are good, but from what I found you'd end up downloading a huge image you can do without. For instance, the template comprises of over 200 different backgrounds, some small other's big. A single CSS spite would limit the request but force a complete download.

    The trouble is that there seams to be plug-ins for everything, and including all of these would further reduce the speed of your web page. A little like downloading a program to speed up your computer, which indoubtedly further slows your machine down.

    For the images I use FastStone Resizer, which works wonders. It manages to reduce the file size of those images to something a little more acceptable. Maybe this combine with CSS Spites might further help the situation.


    Quote Originally Posted by kohoutek
    Same goes for databases, what kind of database you're using, whether or not you're applying extra layers. Depending on what you use, perhaps there are options to implement other ways to store your data.
    Because it's a template there will be no database. As far as I know the only thing I can do from the server side it to GZIP it and have it run on a CDN, something like CloudFlare. The CSS is as short as it could be, but maybe there is a little more I can do. Might also be worth using prefixfree, which would probably further reduce the file size of the overall CSS file.

    @ULTiMATE ;
    I've used YSlow before. It's a great tool for isolated different issues. I will certainly use this tool. The only drawback I found with this is that it needs to be uploaded to a live environment to see it fully working.

    Just wondering, would validation also play a role to the download speed of a web page. I tried to see what Facebook and Yahoo do, but they all have unvalidated web pages, and they seam to have some strange scripts going on there. Certainly not what I would call readable.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  15. #15
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    "I also found that when placing the external jQuery on the bottom of the page (just above the closing body) I get FOUC, something which I did not get before."

    This will solve your fouc problem - number 7 is the best - http://www.visibilityinherit.com/cod...javascript.php

  16. #16
    Non-Member
    Join Date
    Jun 2007
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can use the css and js to make the code more clean and short. You can code it manual. For the small image like button you can use it spirit technology as background. have a good luck.

  17. #17
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are running a wordpress blog then install w3 cache plugin.

    Cheers,
    40% OFF on Web Design, SEO, Article Writing & PLR Software at JVW Store:
    http://www.jimmysvalueworld.com/store/

    Use Coupon Code: HOLIDAY

  18. #18
    SitePoint Member
    Join Date
    Feb 2013
    Location
    India
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    These are the easy steps to be followed, when developing a website to create it run faster. Here are some of them….
    1. Use minified Javascript and CSS, Avoid copy JS and CSS.
    2. Put your CSS at the top of the document.
    3. Put the javascript at the end.
    4. Use divide domain for images, javasripts etc...
    5. Avoid URL Redirections
    6. Use Image Sprites to Minimize HTTP Requests
    7. Add an Expires or a Cache-Control
    8. Use Gzip Components
    9. Compress your images using Smushit or good image compressor.
    10. Compress your css and javascripts using Yahoo User Interface Compressor.

  19. #19
    SitePoint Member JohnnyChen's Avatar
    Join Date
    Mar 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are using Wordpress you can install some very useful plugins like W3 Total Cache

  20. #20
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Go here http://compressorrater.thruhere.net/ and use the YUI compression and you will never have any problems.

  21. #21
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Breaking up long pages into small pages can help in website loading fast. Remove the needless points from your web page. Reducing image size is also useful in loading website faster.

  22. #22
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am using blogger to host my website. how can I improve my website opening speed. Still is opening in 1.6 Seconds. Is this good speed or it could be more better than yet...

  23. #23
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I cache all my files. Unlike others I cache my php/html files too. This makes my pages open instantaneously. That is after you have visited once before of course.

    Aside from that another big speed thing is to move your JS to the bottom.

    Check out my site in my sig. Fasted on the web. I CHALLENGE ANYONE!? That bad boy is the Ferrari of sites.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •