سرعت است قابلیت استفاده به بیان دقیق تر، سرعت وب سایت بخش عمده ای از قابلیت استفاده است. بصری ترین رابطی که تا به حال توسط ذهن انسان ایجاد شده است، اگر کاربر در زمان بارگیری از بین برود، هیچ سودی برای شما نخواهد داشت. خودشه. مقاله تمام شد… بسیار خوب، بنابراین در واقع چیزهای بیشتری برای آن وجود دارد، اما جمله اول تقریباً نیمی از چیزی است که باید بدانید. ما باید وب سایت های خود را سریع کنیم. من می‌توانم از عبارات فوق‌العاده زیادی مانند «سریع شعله‌ور» یا «بسیار سریع» یا حتی «سریع‌تر از یک گلوله سریع» استفاده کنم، اما آنها ناکافی هستند. ساده تر است که بگوییم چیزی به نام “خیلی سریع” وجود ندارد.

بنابراین منظور ما از “سریع” چیست؟

ما باید یک دقیقه وقت بگذاریم تا در مورد اینکه به چه نوع سرعتی اشاره می کنم صحبت کنیم. به طور خلاصه، تمام سرعت. به طور دقیق تر، سه نوع سرعت:

1) زمان بارگذاری

این مدت زمانی است که طول می کشد تا همه اطلاعات در دستگاه های کاربران بارگیری شوند. این در درجه اول تحت تأثیر سرعت اتصال به اینترنت و اندازه واقعی فایل ها است. شما نمی توانید کار زیادی در مورد اتصال انجام دهید، اما شما می توان در مورد اندازه فایل کارهای زیادی انجام دهید

2) زمان پردازش

پس از دانلود فایل های شما، باید توسط مرورگر پردازش و رندر شوند. تمام این پردازش و رندر تحت تأثیر روش نوشتن کد شما و همه چیزهای دیگر است روی روی تلفن، تبلت یا لپ تاپ/رومیزی کاربر. تنها چیزی که می توانید کنترل کنید کد خودتان است، اما این تفاوت بزرگی ایجاد می کند.

3) سرعت درک شده وب سایت یا عملکرد درک شده

و سپس عامل روانی وجود دارد. وب سایت های سریع می توانند نگاه کنند و احساس کنید مثل اینکه آهسته پیش می روند با استفاده قضایی از برخی ترفندها می توان وب سایت های کند را کمی سریعتر احساس کرد. این بخش تماماً در مورد مطالعه کاربر شما و اطلاع دادن به آنهاست روی هنگامی که آنها با وب سایت یا برنامه شما تعامل دارند. شما باید به هر سه جنبه سرعت وب سایت توجه کنید تا احساس کنید سایت شما سریع پیش می رود. و هر چه سایت بزرگتر باشد، بیشتر برای بهینه سازی وجود دارد. پس بیایید شروع کنیم.

CSS خود را سرعت دهید

خیلی وقت ها مخصوصا روی آن پروژه های کوچکتر و تجربی که من خیلی دوستشان دارم، متوجه می شوم که زمان بیشتری را صرف می کنم روی CSS نسبت به هر بخش دیگری از کد. اغلب اوقات CSS نوشته شده بیشتری نسبت به HTML یا جاوا اسکریپت وجود دارد. بنابراین، دقیقاً در آنجا، نشانگر میزان تأثیر CSS شما بر اندازه فایل است. سپس، البته، این موضوع وجود دارد که وب سایت شما واقعاً چقدر سریع اجرا می شود روی دسکتاپ، لپ تاپ، تبلت یا تلفن کاربر شما. بسیاری از “کار” واقعی یا ارائه یک وب page توسط نرم افزار و با کمک کمی از GPU شما انجام می شود. ممکن است به سرعت بارگیری شود، اما به آرامی حرکت کنید. روش نوشتن CSS شما تأثیر مستقیم دارد روی یک دستگاه خاص با چه سرعتی قادر به نمایش وب است page پس از دانلود فایل ها هنگام بهینه سازی یک وب سایت برای اجرای سریعتر، CSS معمولاً مکان خوبی برای شروع است.

کد استفاده نشده

CSS که در شیوه نامه شما قرار می گیرد و کاری انجام نمی دهد، فایل های شما را بی دلیل بزرگتر می کند. خوب، پس این یکی ممکن است بی‌معنا به نظر برسد. اما هنوز هم برای بهترین ما اتفاق می افتد. شما مقداری محتوا را حذف می کنید و فراموش می کنید که CSS قدیمی را حذف کنید. شما a را تغییر می دهید container کلاس یا ID عنصر، و فراموش کنید که CSS قدیمی را حذف کنید. شما مقداری CSS می نویسید، متوجه می شوید که راه بهتری وجود دارد، و فراموش می کنید… متوجه می شوید. چندین توسعه‌دهنده فرانت‌اند را وارد ترکیب کنید، و اگر مراقب نباشید، دستور العملی برای یک شیوه نامه غیرقابل مدیریت یا مجموعه‌ای از آنها خواهید داشت. کد استفاده نشده کند می شود page بارگذاری به دلیل وجود خود به عنوان داده. سرعت توسعه را کاهش می دهد زیرا می تواند افرادی را که صفحه سبک را می خوانند گیج کند. همچنین می‌تواند به معنای زمان‌های رندر کندتر باشد، زیرا CSS بیشتری برای مرورگر است که می‌تواند در حالی که تمام CSS را با عناصر HTML مناسب خود مطابقت می‌دهد، بررسی کند. چه تمام CSS های قدیمی را به صورت دستی بررسی و حذف کنید، از ابزارهای خودکار برای کمک به پیدا کردن انتخابگرهای CSS استفاده نشده استفاده کنید، یا فقط موارد را به طور تصادفی حذف کنید تا زمانی که چیزی خراب شود (این کار را نکنید)، باید آن کد قدیمی را حذف کنید.

انتخابگرهای CSS

در مورد اینکه چگونه مرورگر CSS را با HTML مناسب تطبیق می دهد، وقت آن است که به انتخابگرهای CSS نگاهی بیندازیم. مطالب زیادی در مورد اینکه کدام انتخابگرها سریع‌ترین رندر می‌دهند، کدام‌ها کند هستند، آیا اصلاً باید با انتخاب‌کننده‌های کند زحمت بکشید و غیره نوشته شده است. روی. مشکل این است که بسیاری از این اطلاعات قدیمی هستند. در سال 2000، دیو هایت (یک توسعه دهنده در حال کار روی سافاری، و عضو فعال گروه کاری CSS W3C) این را نوشت:

حقیقت غم انگیز در مورد انتخابگرهای CSS3 این است که اگر به آنها اهمیت می دهید، واقعاً نباید از آنها استفاده کنید page کارایی.

اگر شما نگاهی به سند آن نقل قول از آن آمده است، خواهید دید که او در مورد انتخاب کنندگانی مانند :بچه اول و شبه انتخابگرها و حق داشت. او هنوز هم هست؛ اما در پانزده سال گذشته، کامپیوترها کمی پیشرفت کرده اند. امروزه، تلاش مضاعفی که کامپیوتر برای ارائه آن CSS نیاز دارد، نباید برای کسی قابل توجه باشد، مگر کسانی که از ارزان‌ترین دستگاه‌های تلفن همراه استفاده می‌کنند. این به خودی خود یک نگرانی است، بنابراین واقعاً بستگی دارد روی پروژه در دست، جمعیت هدف شما، و غیره روی. به زبان ساده، از بهترین قضاوت خود استفاده کنید و شاید زیاده روی نکنید روی شبه انتخابگرها در غیر این صورت، مگر اینکه صفحات شما به طول کتاب برسد، انتخابگرهایی که استفاده می کنید باید تأثیر بسیار کمی داشته باشند روی عملکرد سایت شما با این حال، به سند پیوند داده شده در بالا نگاهی بیندازید و با چه چیزی سریع‌ترین و چه چیزی را ارائه نمی‌کند آشنا شوید. ممکن است هنوز اطلاعات مفید باشد. همچنین می توانید ببینید این مقاله از CSS-Tricks برای برداشت کمی جدیدتر روی عنوان.

خواص منابع سنگین

البته، ویژگی‌های CSS نیز وجود دارند که رندر آن‌ها بیشتر از سایرین طول می‌کشد. خواص کلاسیک مانند عرض، ارتفاع، و رنگ هنوز هم سریع ترین هستند مواردی که کمی بیشتر طول می کشد (و ممکن است از مرورگر به مرورگر دیگر متفاوت باشد) دارای ویژگی های CSS3 هستند مانند جعبه-سایه

این process تا آنجا که به رندر صفحات وب مربوط می شود، افزودن یک سایه به یک عنصر پیچیده است. نکته جالب توجه این است که همانطور که اشاره شد روی سنگ های HTML5، قدرت پردازش مورد نیاز می تواند بسته به مقدار زیادی متفاوت باشد روی ابعاد خاص سایه انداز

این مقاله نشان می دهد که همین امر برای سایر ویژگی ها مانند شعاع مرزی و تبدیل.

باز هم، اینها تأثیر کمی خواهند داشت روی ارائه یک page روی متوسط ​​دسکتاپ یا لپ تاپ شما با این حال، دستگاه های تلفن همراه ممکن است ضربه بزرگ تری را متحمل شوند، و در نتیجه این تجربه ممکن است آسیب ببیند. همه از پیمایش متلاطم متنفرند. با این حال، این باید با هزینه استفاده از تصاویر برای تولید همان جلوه ها سنجیده شود. آیا کسی کارهایی را که زمانی برای گرد کردن گوشه های آن انجام می دادیم به خاطر می آورد؟ فقط زیاده روی نکنید، و سبک های شما باید به اندازه کافی سریع ارائه شوند.

انیمیشن های CSS

اکنون وارد قلمرو دیگری می شویم. انیمیشن‌های CSS می‌توانند بسیار سریع باشند، یا می‌توانند سرعت مرورگر را تا حدی کاهش دهند که ریگ‌های بازی در نگه‌داشتن آن با مشکل مواجه شوند. این تا حدی به این دلیل است که همه انیمیشن ها به طور یکسان ارائه نمی شوند. برخی از کارهای سنگین توسط سخت افزار انجام می شود، در حالی که انواع دیگر انیمیشن ها باید به طور کامل توسط عملکردهای خود مرورگر ارائه شوند. این به خصوص پرهزینه است روی دستگاه های تلفن همراه که در مقاله دیگری روی HTML5 Rocks، ویژگی‌های CSS که سریع‌ترین متحرک‌سازی هستند، هستند موقعیت، مقیاس، چرخش، و کدورت

مقاله را برای یک نمای کلی کاملتر از آنچه که می توان متحرک ساخت و در عین حال “هزینه” را پایین نگه داشت، بررسی کنید.

از پیش پردازنده های CSS استفاده کنید

اینجا جایی است که من کاربردی ترین توصیه ای را که من نویسنده می توانم به شما ارائه دهم. از پیش پردازنده های CSS مانند LESS، SASS و Stylus استفاده کنید. مطمئناً، اگر از آنها اشتباه استفاده کنید، می توانید شیوه نامه های بزرگتری از آنچه در نظر داشتید ایجاد کنید. اما مزایای بالقوه ارزش آن را دارد. به عنوان مثال، اگر می خواهید تعداد درخواست های HTTP ارسال شده به سرور را کاهش دهید (همیشه ایده خوبی است)، همه بازنشانی ها، چارچوب ها را در یک فایل LESS/SASS قرار دهید. هنگامی که کامپایل می شود، همه آن ها در یک stylesheet قرار می گیرند. بعلاوه، اکثر پیش پردازنده‌ها گزینه خروجی تمام CSS را به شکل کوچک شده ارائه می‌دهند. به این ترتیب، می‌توانید از فایل‌های مختلفی که نیاز دارید برای اهداف سازماندهی کد استفاده کنید، بدون اینکه بر اندازه فایل تأثیر بگذارد.

سرعت بخشیدن به جاوا اسکریپت

جاوا اسکریپت می تواند باشد واقعا آهسته. تدریجی. به طور دقیق تر، جاوا اسکریپت می تواند تأثیر بسیار مستقیم تری داشته باشد روی بخش “پردازش” معادله سرعت نسبت به CSS. بدتر از آن، JS می تواند به طور تصاعدی از نظر اندازه فایل سنگین تر شود تا به چیزهای به ظاهر پیش پا افتاده دست یابد. این یک ضربه مضاعف از کندی دردناک است، و کاربران ما اغلب قربانی می شوند، به ویژه آن ها روی مرورگرهای موبایل اما این تقصیر زبان نیست. این که جی اس ما چقدر خراب می شود اغلب با ناآگاهی ما از برنامه نویسی به طور کلی نسبت مستقیم دارد. من یک غیر توسعه دهنده هستم. من اغلب از کتابخانه هایی مانند jQuery یا پلاگین های مستقل JS برای انجام کارها استفاده کرده ام. هرچه بیشتر باید انجام دهم، به پلاگین های بیشتری نیاز دارم تا همه آن ها کار کنند. این پلاگین ها و فریم ورک ها دارای گزینه ها و ویژگی های اضافی هستند که ممکن است هرگز از آنها استفاده نکنم. نفخ دزدیدن پهنای باند وجود دارد، همانجا. علاوه بر این، افزونه ها ممکن است به خوبی با هم کار نکنند. آنها ممکن است سرعت یکدیگر را کاهش دهند، یا ممکن است یکی دیگر را به طور کلی از کار کردن باز دارد. قدرت پردازش تلف شده وجود دارد، همانجا. اگر واقعاً می‌خواهید سرعت وب‌سایت خود را افزایش دهید، چند میلی‌ثانیه (یا در برخی موارد، ثانیه‌های کامل) را از بین ببرید، این کاری است که باید انجام دهید:

جاوا اسکریپت تقریبا همیشه باید خارجی باشد

مانند CSS، بهتر است JS را در فایل های خارجی نگه دارید و به HTML خود پیوند دهید. اگر کد JS زیادی ندارید و درخواست HTTP را اضافه می‌کند، ممکن است فکر نکنید که آنقدر مهم نیست، اما نکته اینجاست: فایل‌های CSS و JS خارجی توسط مرورگر کش می‌شوند. بنابراین زمانی که همان page دوباره درخواست می شود یا صفحات دیگر روی سایت شما که از همان CSS یا JS استفاده می کند درخواست می شود، آن فایل های خارجی ذخیره شده به جای دانلود مجدد استفاده می شود. این زمان بارگذاری سایت سریعتر است و پردازش کمی سریعتر ارزش تماس بیشتر با سرور را دارد.

فایل های JS خود را در پایین قسمت قرار دهید page

اساساً، این تئوری به این صورت است: مرورگر هر چیزی را که در بالای a قرار دارد، ارائه می‌کند pageابتدا کد منبع به همین دلیل است که چیزهایی مانند برچسب به بالای صفحه نزدیک می شوند. با این حال، فایل‌های جاوا اسکریپت می‌توانند با متوقف کردن مرورگر از رندر HTML شما تا زمانی که بارگذاری شوند، سرعت همه چیز را کاهش دهند. از آنجایی که بیشتر افکت‌ها و افزونه‌های رایج JS فقط باید کار کنند بعد از بقیه ی page است روی صفحه نمایش، این کمتر از ایده آل است. با پیوند دادن به آن فایل های خارجی در پایین، تجربه کاربر را بهبود بخشید و زمان بارگذاری درک شده را کاهش دهید. page، درست قبل از برچسب. زمانی که کاربر به تعامل با هر چیزی که به JS نیاز دارد می رسد، باید آماده کار باشد.

اگر می توانید از چارچوب ها و سایر وابستگی ها اجتناب کنید

اگر در حال طراحی یک برنامه کامل هستید، می توانید و شاید باید این بخش را نادیده بگیرید. یک چارچوب خوب، انعطاف پذیر و سبک می تواند به توسعه دهندگان مزیت بزرگی بدهد. با این حال، برای وب‌سایت‌های کوچک تا متوسط، گنجاندن چارچوب جاوا اسکریپت ممکن است بیش از حد باشد. در این وب سایت ها، از JS بیشتر در قسمت پشتی CMS برای مدیریت محتوا استفاده می شود. در قسمت جلویی، ممکن است یک نوار لغزنده تصویر، یا طرح بندی سنگ تراشی یا دو مورد داشته باشید. اگر واقعاً علاقه مند هستید، ممکن است تکمیل خودکار داشته باشید روی نوار جستجو بیشتر محتواها نیازی به تخیل و انیمیشن ندارند. جاوا اسکریپت باید تا حد امکان برای بهبود تجربه کاربر رزرو شود. تکیه کردن روی به سادگی زیبا کردن یک سایت می تواند به یک سایت کند و کند منجر شود، به خصوص روی دستگاه های تلفن همراه به نوعی، همه چارچوب‌های کد همگی یکسان هستند، چه جاوا اسکریپت، PHP، پایتون، HTML یا CSS: هر ویژگی یک دسته کد است. هنگام انتخاب یک فریمورک یا افزونه برای یک کار، از خود بپرسید که آیا قصد دارید از هر ویژگی ارائه شده یا حتی بیشتر آنها استفاده کنید. اگر نه، فریم ورک ماژولار است؟ آیا می توانید فقط قطعات مورد نیاز خود را انتخاب و انتخاب کنید؟ اگر چنین است، و شما معتقدید که تغییر اندازه فایل ارزشش را دارد، پس حتما آن را دنبال کنید! در غیر این صورت، بهترین تمرین این است که ببینید چه چیزی را می‌توانید بیشتر از آنچه می‌توانید بیرون بیاورید، بیرون بیاورید.

جاوا اسکریپت را خاموش کنید

نه دائمی! به این موضوع فکر کنید، آیا محتوا یا عملکردی وجود دارد روی سایت شما توسط JS پنهان شده است؟ آیا افراد می توانند بدون اینکه JS در مرورگرشان فعال باشد به آن دسترسی داشته باشند؟ اگر چنین است، پس عالی است. با این حال، اگر افراد نمی توانند اطلاعات مهم را ببینند، با شما تماس بگیرند یا بدون جاوا اسکریپت به درستی پیمایش کنند، پس با مشکل مواجه شده اید. مطمئناً می توانید اعتماد کنید روی بسیاری از مردم هنوز آن را فعال کرده اند، اما شما همیشه آن موارد لبه را دارید. چه ارتباطی با سرعت وب سایت دارد؟ تصور کنید که اگر بخشی از وب سایت شما به طور ناگهانی کار نکند، سرعت مرور چقدر کند می شود.

یک توسعه دهنده استخدام کنید

نه جدی، اگر توسعه‌دهنده نیستید و بودجه آن را دارید، حتی برای کارهای کوچک و ساده یکی را تهیه کنید. در درازمدت ارزان‌تر است که فردی با تجربه را برای انجام درست یک بار استخدام کنید. در صورتی که همه چیز به طرز وحشتناکی اشتباه پیش رود (و ما در اینجا در مورد رایانه صحبت می کنیم، بنابراین چیزی اراده اشتباه کنید)، آنها سریعتر متوجه خواهند شد که چه چیزی اشتباه بوده است. آنها در یافتن این نوع مشکلات و حل آنها تجربه خواهند داشت. اگر هیچ چیز دیگری نباشد، آنها در گوگل کردن آن موضوعات خاص بهتر خواهند بود. مهمتر از همه، آنها می دانند که چگونه کاری را که باید با کد کمتر انجام شود، انجام دهند. کد کمتر (معمولا) سریعتر اجرا می شود و (همیشه) سریعتر دانلود می شود. این ساده ترین توصیه ای است که می توانم بکنم. (اگر توسعه‌دهنده هستید یا در حال یادگیری هستید، من فهرستی از آموزش‌ها را جمع‌آوری کرده‌ام که در انتهای این مقاله خواهد بود. شامل برخی از راهنماهای مبتدی برای نوشتن جاوا اسکریپت که سریع اجرا می‌شود.)

تصاویر و فشرده سازی

وقتی ویدیو را از معادله خارج می کنید، بزرگترین چیز است روی هر سایت مبتنی بر محتوا، تصاویر است. وقتی تصاویر بهینه نشده باشند معمولاً بزرگ، حجیم و آهسته هستند. اکنون، با تکثیر صفحه‌های شبکیه، ما را مجبور می‌کند تا اگر می‌خواهیم همه چیز خوب به نظر برسد، از تصاویر بزرگ‌تر استفاده کنیم. روی در هر دستگاهی، حل مشکل آسان تر نخواهد بود. و بدتر از آن، این مسئله ای است که به راحتی می توان آن را فراموش کرد تا زمانی که بیش از آنچه در نظر گرفته شده خرج کنید روی پهنای باند وقتی هر بایت مهم است، ما نمی توانیم فراموش کنیم. خبر خوب این است که این به هیچ وجه مشکل جدیدی نیست. چرا این خوب است؟ این بدان معنی است که هزاران راه حل بالقوه برای انتخاب وجود دارد و می توانید همزمان از بیش از یکی از آنها استفاده کنید. در واقع، این به طور کلی ایده خوبی است. بنابراین تا زمانی که ISP ها و شرکت های میزبان شروع به دادن پهنای باند رایگان نامحدود به همه ما کنند (نفس خود را حبس نکنید)، در اینجا چند کار وجود دارد که می توانید انجام دهید:

با کد بیشتر از تصاویر کار کنید

به زبان ساده، قبل از اینکه به تصاویر روی بیاورید، از نظر بصری، تا آنجا که می توانید با CSS و جاوا اسکریپت انجام دهید. انتقال کد همیشه ارزان تر از تصاویر خواهد بود، بنابراین تا جایی که می توانید به آن پایبند باشید. علیرغم قدرت پردازشی مصرف شده توسط سایه های باز شده مبتنی بر CSS، گرادینت ها و موارد مشابه، این موارد را در نظر بگیرید. همچنین به خاطر داشته باشید که تصاویر SVG، در این مثال، به عنوان “کد” به حساب می آیند، زیرا این همه چیز هستند: کد XML که به عنوان یک تصویر ارائه می شود. بنابراین آنها باید هر زمان که به هر چیزی مرتبط با برداری نیاز دارید استفاده شوند.

از تصاویر واکنش گرا استفاده کنید

حالا، با بازگشت به آن صفحه‌های شبکیه چشم، چه کار کنیم؟ چگونه پس انداز کنیم روی پهنای باند وجود دارد؟ اینجاست که ما به عنصر و the روی می آوریم مجموعه تصویر ویژگی. آنها نسبتا جدید هستند و به طور کامل پشتیبانی نمی شوند، اما به مرورگرها اجازه می دهند اندازه تصویر مناسب را برای دستگاه مورد استفاده انتخاب کنند. بنابراین، در حالی که این امر باعث صرفه جویی در پهنای باند شما برای کسی که سایت شما را در iMac خود مشاهده می کند، نمی شود، اما این امر چندان مهم نیست زیرا آنها به احتمال زیاد پهنای باند دارند. کسی روی در همین حال، تلفن آنها یک نسخه کوچکتر از همان تصویر را دریافت می کند و آنها را از انتظار طولانی مدت جلوگیری می کند.

قالب مناسب برای کار را انتخاب کنید

بسیاری از مشکلات اندازه تصویر زمانی که یاد بگیرید در هر موقعیتی از کدام فرمت تصویر استفاده کنید، برطرف می شوند. میتونستم برم روی در مورد فرمت های تصویر خاص، روش فشرده سازی و غیره روی، اما واقعاً فقط باید چند نکته را به خاطر بسپارید:

1. برای گرافیک های پیچیده، مانند عکس ها، از فرمت JPEG استفاده کنید.
2. برای گرافیک های ساده تر که از رنگ های کمی استفاده می کنند، مانند نمادها و آرم ها، از SVG و/یا PNG استفاده کنید.
3. GIF فقط برای انیمیشن است، و فقط زمانی که با متحرک سازی چیزی با CSS3 یا جاوا اسکریپت بهتر از آن استفاده نکنید. GIF های متحرک به عنوان محتوا بهتر از عناصر رابط کار می کنند.

واقعا همه اش همین است. اگر این کار را انجام دهید و هنگام ذخیره تصاویر با تنظیمات بهینه سازی بازی کنید، اغلب می توانید کیفیت بسیار مناسبی را در اندازه های نسبتاً کوچک فایل دریافت کنید.

مشتاقانه منتظر است

با این حال، قالب جدیدی به نام WebP وجود دارد که توسط کروم و اپرا به صورت خودکار پشتیبانی می شود. گوگل ادعاها که فایل های WebP 26% کوچکتر از PNG و 25-34% کوچکتر هستند روی یکی دو عامل این خبر بسیار خوبی است، به جز دو چیز: فایرفاکس و IE. اکنون، اگر از استفاده از اسکریپت های جایگزین و اسکریپت اضافی برایتان مهم نیست، می توانید همین امروز از قالب WebP استفاده کنید. فقط دانلود کنید WebPJS، و شما خوب هستید که بروید. WebPJS از جاوا اسکریپت و کمی فلش (آه… اما این فقط برای IE) است تا کار کند، اما کار می کند. در صورت نیاز به ارائه سریع تعداد زیادی از تصاویر بزرگتر، می توانید آن را در نظر بگیرید، با این نکته که بدون JS کار نمی کند.

فشرده سازی

دو نوع فشرده سازی وجود دارد که می توانید از آنها استفاده کنید روی تصاویر شما اول، ما داریم فشرده سازی با اتلاف. این مورد استفاده قرار می گیرد روی فرمت های با اتلاف مانند JPEG. این به شما امکان می دهد هر تصویری را به اندازه ای که دوست دارید فشرده کنید با این درک که کیفیت بدتر و بدتر و بدتر می شود. چیزها پیکسلی می شوند و تعریف خود را از دست می دهند.

فشرده سازی بدون اتلاف استفاده می شود روی فرمت هایی مانند PNG و می توانند اندازه فایل خود را تا حدی کاهش دهند. با این حال، محدودیت های خود را دارد. همیشه به نقطه ای می رسد که کوچکتر کردن تصویر بدون از دست دادن کیفیت غیرممکن است. اگر فتوشاپ یا یک ویرایشگر تصویر پیشرفته مشابه دارید، اغلب بهتر است از آن ها برای فشرده سازی تصاویر خود استفاده کنید تا بتوانید پس از اتمام کار، خروجی را ببینید. (از نظر تجربه من، ابزارهای خودکار، به ویژه ابزارهای آنلاین، ممکن است کمی بیش از حد چیزها را فشرده کنند.

فشرده سازی و تغییر اندازه تصویر را در CMS خود پیاده سازی کنید

اگر از CMS مانند وردپرس استفاده می کنید، به طور خودکار اندازه تصاویر خیلی بزرگ را تغییر می دهد. همچنین یافتن افزونه هایی که به طور خودکار آنها را برای شما فشرده می کنند، آسان است. توجه داشته باشید، فشرده‌سازی خودکار را فقط در مواردی توصیه می‌کنم که می‌دانید تعداد زیادی عکس و تعداد زیادی از تصاویر با کیفیت مشابه را برای همین منظور آپلود خواهید کرد. وبلاگ عکس یک نمونه است. اگر سایتی را اجرا می کنید که کاربران در آن تصاویر خود را آپلود می کنند، خوب… تغییر اندازه و فشرده سازی خودکار یک الزام مطلق است، و به همین دلیل است که هر شبکه اجتماعی این کار را انجام می دهد.

نکات کلی

در اینجا چند توصیه وجود دارد که در هیچ یک از سه دسته بالا نمی گنجد.

همه چیز را کوچک کن

“کوچک کردن” کد شما فقط به این معنی است که تمام فضاهای اضافی و خطوط شکسته حذف می شوند. این می تواند اندازه فایل را به طور قابل توجهی کاهش دهد. ممکن است کار زیادی به نظر برسد، اما ابزارهایی برای کوچک کردن CSS و JS به صورت خودکار، و جدا نگه داشتن فایل‌های کوچک‌سازی شده برای فایل‌های منبع شما، به دلایل کاملاً واضح، وجود دارد. همانطور که قبلاً ذکر شد، پیش پردازنده های مختلف CSS می توانند در وهله اول همه کدهای شما را به شکل کوچک شده خروجی دهند.

همه چیز را فشرده کنید

به شرطی که سرور شما به درستی تنظیم شده باشد، تمام کدهای شما می توانند به صورت فشرده به مرورگر ارسال شوند. فایل های متنی به خوبی فشرده می شوند و حجم فایل های ارسالی را به میزان قابل توجهی کاهش می دهند. اکنون، سرور شما باید یک یا دو لحظه طول بکشد تا فایل‌هایی را که ارسال می‌کند فشرده کند، و مرورگر کاربر باید آنها را از حالت فشرده خارج کند، اما این معمولاً ارزش تبادل پهنای باند را دارد. برای توضیح کامل روش عملکرد این کار، نگاه کنید چگونه سایت خود را با فشرده سازی GZIP بهینه کنید.

سایت خود را کش کنید

حافظه پنهان مرورگر به لطف مرورگرهای مدرن تا حدی به طور خودکار انجام می شود. یک مرورگر به یک سایت می رود و به طور موقت تصاویر و سایر اطلاعاتی را که پیدا می کند در آنجا ذخیره می کند. به این ترتیب، اگر همان کاربر در یک بازه زمانی معین برگردد، مرورگر مجبور نیست دوباره همان تصاویر را بخواهد. فقط تصاویری را که از قبل دارد بارگیری می کند و هر تصویر جدیدی را که ممکن است نداشته باشد درخواست می کند. با این حال، کاری وجود دارد که می‌توانید انجام دهید تا به مرورگرها بگویید که چه چیزی را در حافظه پنهان و برای چه مدت ذخیره کنند، همانطور که در اینجا مشاهده می‌شود این راهنما.

کش سرور

و سپس ذخیره سرور وجود دارد. کش سرور اساساً فقط سایت شما را می گیرد و نوعی “کپی” از آن را بین کاربران و سرور واقعی شما قرار می دهد. چرا زحمت میکشی؟ خوب، به ویژه برای افرادی که از سیستم های مدیریت محتوا استفاده می کنند مفید است روی یک مقیاس بزرگ دسترسی کاربران به یک کپی موقت از سایت شما به جای چیز واقعی، تعداد تماس ها با پایگاه داده شما را کاهش می دهد. اطلاعات سریع‌تر نمایش داده می‌شوند و بارگذاری می‌شوند زیرا لازم نیست هر بار دوباره پردازش شوند. بسته به روی روش تنظیم آن، کش سرور همچنین می تواند هزینه های پهنای باند را به طور کلی کاهش دهد. اساساً، هر چه سایت شما بزرگتر باشد، دلیل بیشتری باید برای ذخیره آن جستجو کنید.

پیوندها

و اکنون، بخشی که همه منتظر آن بودید: لیست پیوندها! ما عمدتاً آموزش ها و راهنماها و چند ابزار فشرده سازی تصویر را برای توصیه داریم.

اطلاعات کلی

از شبکه توسعه دهندگان یاهو

یاهو ممکن است به اندازه گذشته یک معامله بزرگ نباشد، اما شبکه توسعه دهندگان آنها چیزهای خوب زیادی دارد روی آی تی. این شامل آنها می شود بهترین روش ها برای افزایش سرعت وب سایت شما، که برخی از کارهای اساسی را که می توانید انجام دهید را پوشش می دهد. برخی از آن‌ها همان زمینه‌های این مقاله را پوشش می‌دهند، اما در کنار آن موارد بیشتری نیز وجود دارد. در مقدمه به سرعت درک شده سایت اشاره کردم که به عنوان عملکرد درک شده نیز شناخته می شود. اگر می خواهید در مورد آن بیشتر بخوانید، بررسی کنید راهنمای مبتدیان برای عملکرد درک شده: 4 روش برای اینکه سایت موبایل شما شبیه یک برنامه بومی باشد.

CSS

Effectt.css

Effectt.css مجموعه‌ای از انیمیشن‌های مبتنی بر CSS است که برای رندر سریع طراحی شده‌اند، صرف نظر از اینکه کاربر چه پلتفرمی باشد روی.

تحویل CSS را بهینه کنید

این راهنمایی برای اطمینان از اینکه CSS شما با بیشترین سرعت ممکن توسط مرورگر دانلود و پردازش می شود.

جاوا اسکریپت

24 بهترین روش جاوا اسکریپت برای مبتدیان

وقتی تازه شروع می کنی، یادگیری کدنویسی صحیح می تواند به اندازه ترفندهای تصادفی که ممکن است یاد بگیرید، باعث افزایش سرعت شود. کد بد از نظر زمان پردازش هزینه بیشتری دارد، بنابراین یاد بگیرید که کارها را به روش صحیح انجام دهید.

نوشتن جاوا اسکریپت سریع و کارآمد در حافظه

اینجا یک راهنمای اولیه که به طور خاص تر تمرکز می کند روی نوشتن جاوا اسکریپت که سریع اجرا می شود.

نکات عملکرد جاوا اسکریپت در V8

درست مانند آنچه عنوان میگوید، این همه توصیه ها به طور خاص در جاوا اسکریپت V8 هدف قرار گرفته است.

5 نکته برای انتخابگرهای جی کوئری کارآمدتر

و گاهی اوقات، احتمالاً از jQuery استفاده می کنید. اگر قصد انجام این کار را دارید، حداقل باید بدانید که چگونه انتخابگرهای جی کوئری را بنویسید که سرعت شما را کاهش ندهد. و اینجا کجاست سایت پوینت شما را پوشش داده است.

تصاویر

راهنمای مبتدیان برای فرمت های فایل تصویری

این را بخوان برای اطلاعات بیشتر در مورد فرمت های تصویر روی وب. اطلاعات کمی قدیمی است، اما هنوز معتبر است و خوب است بدانید.

بهینه سازی تصویر

این یک راهنمای فنی تر برای بهینه سازی تصویر است که توسط Google Developer Network ارائه شده است.

Compressor.io

Compressor.io یکی از تاثیرگذارترین ابزارهایی است که من شخصاً با آن روبرو شده ام. این یک برنامه آنلاین است، بنابراین باید هر فایلی را که می خواهید فشرده کنید بارگذاری کنید، اما می تواند برای JPG ها شگفت انگیز باشد. هم گزینه های فشرده سازی با اتلاف و هم بدون تلفات را ارائه می دهد که هر کدام نتایج بسیار شگفت انگیزی دارند و می تواند پردازش دسته ای را نیز انجام دهد.

تریماژ

تریماژ در فشرده سازی بدون تلفات تخصص دارد، اما قابل نصب است روی کامپیوتر خودت، روی ویندوز، مک یا لینوکس. از آنجایی که روی رایانه شما نصب می شود (و بله، دارای گزینه های مختلف خط فرمان و همچنین رابط کاربری گرافیکی است)، به راحتی می تواند به عنوان بخشی از یک گردش کار توسعه به طور خودکار اجرا شود.

نتیجه

مثل همیشه، چیزهای بیشتری برای یادگیری وجود دارد. اما با اطلاعاتی که ارائه کرده‌ایم، و منابعی که به آن‌ها پیوند داده‌ایم، مسلح خواهید شد روی راه شما برای ساختن سایت‌ها و برنامه‌هایی است که کاربران شما را آزار نمی‌دهند. و این اولین قدم برای تحت تاثیر قرار دادن آنهاست.